vue入门，vue指令，vue组件，vue模板

vue

使用虚拟dom操作减少真实dom操作提高页面的渲染效率
- 虚拟dom的本质就是内存中的一个对象，该对象和dom结构相互对应
将开发者经历从dom中释放出来，转移到数据的操作
开发者不需要关注页面的渲染，关注的是数据的变化，数据发生变化页面会自动刷新

引用   
<script src="vue.js"> </script>

el : 选择挂载元素


new Vue({
        el:"div",
        el:"#root",
        el:".my",
        el:document.querySelector("div"),// dom元素
        // el:"body",// 不允许 挂载到body html元素当中
        data:{
            userName:"laoli"
       }
   })

同一个页面当中可以包含多个VUE实例

 new Vue({
        el:"#one",
        data:{
            num:"one"
       }
   })
    new Vue({
        el:"#two",
        data:{
            num:"two"
       }
   })

如果多个实例均挂载到同一元素，则只识别第一个。

 new Vue({
        el:"#one",
        data:{
            num:"one"
       }
   })
    new Vue({
        el:"#one",
        data:{
            num:"two"
       }
   })

输出，比较，js逻辑{{}}

{{num}}  //1

      el:"#root",
        data:{
            num:1,
       }
   })

指令

指令:是以v-开头，是vue对HTML元素属性的扩展。

v-for 列表渲染

  //对应的是 for in / of 循环
v-for = "数组里的每一项 in/of 要循环的数据" 
<li v-for="item in arr">{{item}}</li>
循环数组 item index

循环对象 value key index
obj:{a:1,b:2,c:3}
<li v-for="(value,key,index) in obj">{{key}}：{{value}}-{{index}}</li>

循环数字
num：100
<li v-for="item in num">{{item}}</li>

循环字符串
str：‘asdfghjjkl’

v-if 条件渲染

v-if="true/false“，条件为真渲染，条件为假不渲染

//控制div在界面上的出现和隐藏
<div v-if="state"></div>

new Vue({
    el :"#app",
    data:{
  state : true
   }
})

v-show

v-show 是通过display：none控制元素的在与不在
v-if 是直接渲染与不渲染
 <div v-show="isShow" style="width:200px;height:200px;background:red;">
    </div>

new Vue({
        el:"#root",
        data:{
            isShow:false //相当于display：none
       }
   })

v-else

v-on:click 事件绑定

v-on:事件名 处理函数写在methods里 事件对象e
在事件中处理函数的默认参数是事件对象
传参，即没有事件对象了 如果需要用$event手动传递 
$event 在vue中表示事件对象
简写：@click

v-bind 属性绑定

v-bind:要绑定的属性=“变量或者表达式”
src class style
   简写  ：属性

v-modol

 <input type="text" v-model.number="a">+
    <input type="text" v-model.number="b">={{a+b}}
.number - 输入字符串转为有效的数字 
        
        
 <input type="text" v-model.lazy="str">
    <div>{{str}}</div> 
.lazy - 取代 input 监听 change 事件

.trim - 输入首尾空格过滤

v-bind

 <img v-bind:src="imgSrc" alt=""> 
    <img :src="imgSrc" alt="">  //简写
  
   new Vue({
        el:"#root",
        data:{
            imgSrc:"http://b.hiphotos.baidu.com/image/h%3D300/sign=ad628627aacc7cd9e52d32d909032104/32fa828ba61ea8d3fcd2e9ce9e0a304e241f5803.jpg"
       }
   })

demo

    <input type="button" value="你过来呀" v-on:click="fn">
    <input type="button" value="你过来呀2" @click="fn">  //简写
    <input type="button" value="你过来呀3" @click="isShow=!isShow">
    <div v-show="isShow" style="width:300px;height:200px;background:yellow;"></div>

 new Vue({
        el:"#root",
        data:{
            isShow:true
       },
        methods:{
            // 方法
            fn(){
                // 记住：在方法当中可以通过this调用data当中的数据。
                this.isShow = !this.isShow;
           }
       }
   })

v-text v-html

  <input type="text" v-model="str">
    <div>1、{{str}}</div>
    <div v-html="str">2、</div>
    <div v-text="str">3、</div>

   new Vue({
        el:"#root",
        data:{
            str:"123"
       }
   })

v-once

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。

v-pre

跳过这个元素和它的子元素的编译过程。

事件

* 1、事件绑定一个函数。函数可以带括号，也可以不带。

* 区别：带括号可以根据自身的需要传递数据。不带括号，默认传递的是事件对象

* 2、事件可以直接写JS语句，多条语句用分号分隔。

* 语句与JS不是完全互通的。

style

    <p style="background:red;color:yellow;">我现在挺好的，火车票也买好了，你买到了吗？</p>
    <p :style="'background:red;color:yellow;'">我现在挺好的，火车票也买好了，你买到了吗？</p>
    <p :style="st">我现在挺好的，火车票也买好了，你买到了吗？</p>
    <p :style="{background:'red',color:'yellow'}">我现在挺好的，火车票也买好了，你买到了吗？</p>
    <p :style="stObj">我现在挺好的，火车票也买好了，你买到了吗？</p>
    <p :style="[bg,co]">我现在挺好的，火车票也买好了，你买到了吗？</p>

new Vue({
        el:"#root",
        data:{
            bg:{
               background:"green"
           },
            co:{
                color:"orange"
           },
            st:"background:red;color:yellow;",
            stObj:{
                background:"red",
                color:"yellow"
           }
       },
        methods:{

       }
   })

class

    <style>
        .bg{
            background:red;
        }
        .co{
            color:yellow;
        }
    </style>  

　　 <p class="bg co">我确定你就是那只匹着羊皮的狼。</p>
    <p :class="bgco">我确定你就是那只匹着羊皮的狼。</p>
    <p :class="myBg">我确定你就是那只匹着羊皮的狼。</p>
    <p :class="myCo">我确定你就是那只匹着羊皮的狼。</p>
    <p :class="[myBg,myCo]">我确定你就是那只匹着羊皮的狼。</p>
    <!--bg指的是样式的名字。属性值是一个布尔值，如果为true则样式生效，否则不生效-->
    <p :class="{bg:true,co:true}">我确定你就是那只匹着羊皮的狼。</p>
    <!--属性名就是你最终的样式名。样式是否采用要看属性值是否为true-->
    <p :class="{'bg co':true}">我确定你就是那只匹着羊皮的狼。</p>
    <p class="bg">我确定你就是那只匹着羊皮的狼。</p>

  new Vue({
        el:"#root",
        data:{
            myBg:"bg",
            myCo:"co",
            bgco:"bg co"
        },
        methods:{

        }
    })

过滤器

<p>{{num | currency}}</p> 


new Vue({
        el:"#root",
        data:{
            num:2.156
        },
        methods:{
            fn(v){
                return "￥"+v.toFixed(2);
            }
        },
        filters:{
            // 定义了一个名字为currency的过滤器.第一个参数即是你要过滤的值
            currency(v){
                console.log(v);
                return  "￥"+v.toFixed(2);// 返回的内容，即是你过滤完成的值。
            }
        }
    })

过滤器传值

<div id="root">
    {{num | currency(4)}}
    {{num | currency}}
</div>
</body>
<script>
    new Vue({
        el:"#root",
        data:{
            num:2.156
        },
        methods:{
            fn(v){
                return "￥"+v.toFixed(2);
            }
        },
        filters:{
            // 定义了一个名字为currency的过滤器.第一个参数即是你要过滤的值，后面的参数是接收自定义的数据
            currency(v,len = 2){
                console.log(len);
                return  "￥"+v.toFixed(len);// 返回的内容，即是你过滤完成的值。
            }
        }
    })

全局过滤器

 // 全局过滤器。第一个参数是过滤器的名字，第二个参数是一个回调函数
    Vue.filter("currency",v=>"$"+v.toFixed(2));

计算属性

computed :{}

事件修饰符

.stop

@click.stop=""  //组织事件冒泡
e.cancelBubble = true;

.prevent

//阻止浏览器默认行为 右键菜单
@contextmenu.prevent="fn"

//阻止提交按钮
  <input type="submit" @click.prevent="send" value="提交">

键盘事件

@keyup.left = "fn";
@keyup.65 = "fn";
@keyup.a = "fn";

   <input type="text" @keyup="fn">  
    new Vue({
        el:"#root",
        data:{

       },
        methods:{
            fn(e){
                console.log(e.keyCode);
           }
       },
        computed:{

       },
        filters:{

       }
   })

模板

  // 模板：有且只能有一个根元素。用模板，将挂载的元素替换掉。
        template:"<div>12{{userName}}</div>"
        // template:"<div>12</div><div>34</div>"

   new Vue({
        el:"#root",
        data:{
            userName:"laolitou"
       },
        // 建议如果使用直接赋值，使用反引号
        template:`
            <div>
                <a href="http://www.baidu.com">百度</a>
                <a href="http://www.baidu.com">百度</a>
                {{userName}}
            </div>
        `
   })

通过script标签

<div id="root"></div>
</body>
<script type="x/template" id="tp">
    <div>
        <h3>我买到火车票啦。哈哈{{str}}</h3>
    </div>
</script>
<script>
    new Vue({
        el:"#root",
        data:{
            str:"庆余年。"
       },
        template:`#tp`
   })
</script>

通过template标签

<div id="root"></div>
</body>
<template id="tp">
    <div>
        <h3>我买到火车票啦。哈哈{{str}}</h3>
    </div>
</template>
<script>
    new Vue({
        el:"#root",
        data:{
            str:"庆余年。"
       },
        template:`#tp`
   })
</script>

组件

组件：是对元素标签的一个扩展。component

使用组件的原因：提高代码的复用性

如何定义？如何使用？如何传值？传值：父子:通过属性传值子父非父子

必须使用连字符命名，如：my-compoent
template中的内容必须要用dom元素包裹
组件的定义中，还可以有data，methods，computed
data必须是一个方法

components

// 各个VUE实例的数据是不共享的。
    new Vue({
        el:"#root",
        data:{
            userName:"xixi"
       },
        components:{
            // 定义了一个名字为banzhang的组件。组件是一个对象。
            banzhang:{
                template:`
                    <div>我的老班长，你现在过的怎么样。</div>
                `
           },
            // 中间不要出现大写。如果定义时采用大写的话，在使用时，需要用-分隔。首字母允许大写。
            // userName
            qianFeng:{
                template:`
                    <div>众里寻你千百度，莫然回首你却在千锋蓝山处！</div>
                `
           }

       }
   })

    // 在组件当中定义data要求：
    // 1、data是一个函数。2、该函数必须要有返回值   3、返回值的类别必须要是一个对象。
                data(){
                    return {
                       userName:"laoli"
                   }
               }

组件的传值

 components:{
            My:{
                props:["age"],
                template:`
                    <div>我是一个MY组件{{age}}</div>
                `
           }
     }

使用props传递数据父向儿子传递数据

在子组件上声明属性msg，然后在子组件处用props来接收

<div id="app">
    我是爸爸
    <child-component :msg="fatherMsg"></child-component>
</div>
<script>
 new Vue({
        el: '#app',
        components: {
            'child-component': {
                // 从父组件和本身data传入的数据在methods、template中都可以使用
                props: ['msg'],
                data: function(){
                    return {
                        count:1
                   }
               },
                template: '<div id="child">{{msg}}</div>',
           }
       }
   })
</script>

动态向子组件传入信息，则用v-model

在props中定义的属性都可以在组件内使用，可以在template、computed、methods中使用

$emit的使用场景

子组件调用父组件的方法并传递数据不区分大小写“-”隔开
使用 $emit(eventName) 触发事件

$refs的使用场景

父组件调用子组件的方法，可以传递数据

$on的使用场景

兄弟组件之间相互传递数据
使用 $on(eventName) 监听事件

定义组件

组件的名字如果使用驼峰命名，需要将词组之间采用-来分隔。
通过该种方法定义的组件，只可以在自已实例当中使用。

组件的嵌套

钩子函数

在你实例从创建到销毁的过程当中，所暴露出来的函数，称为钩子函数。（在从创建到销毁的阶段当中自动运行的函数）

mounted()

对于前端来说，钩子函数就是指再所有函数执行前，我先执行了的函数，即钩住我感兴趣的函数，只要它执行，我就先执行。

对于前端来说：在这发起后端请求，拿回数据，配合路由钩子做一些事情

动态组件

is：切换不同的组件

区别：

is

可以直接传递一个组件

:is

是查找父组件中的一个赋值，然后找到相应的组件

组件的传值

向下传值

组件中不要讲接收的属性和名字与定义的data属性名字重复
向下传递的属性名不运行出现大写，词组之间用-进行分隔，接收时可以采用驼峰命名

向上传值

父子之间的数据是单向的（单向数据流），子组件不可以直接修改父组件传递的数据

ref 属性获取dom节点

    <div ref="myDiv">你好吗</div>

                this.$refs.myDiv.style.color = "red";

如果ref的值相同，通过this.refs得到的是最后一次出现的元素。

ref组件

全局组件

 const One = {
        template:`<div>One</div>`
   }
//第一个参数是组件的名字。第二个参数是组件的配置项

定义多个全局组件

 // 第一个参数是组件的名字。第二个参数是组件的配置项
    Vue.component('One',{
        template:`<div>lala</div>`
   })
    Vue.component('Two',{
        template:`<div>two</div>`
   })

    new Vue({
        el:"#root",
   })
    new Vue({
        el:"#root2"
   })

公共组件

<script type="module">
    import components from "./components/index.js";
    for(let key in components){
        Vue.component(key,components[key]);
   }
    new Vue({
        el:"#root",
        // components
   })
    new Vue({
        el:"#root2",
        // components
   })

vue入门，vue指令，vue组件，vue模板

vue

el : 选择挂载元素

同一个页面当中可以包含多个VUE实例

如果多个实例均挂载到同一元素，则只识别第一个。

输出，比较，js逻辑{{}}

指令

v-for 列表渲染

v-if 条件渲染

v-show

v-else

v-on:click 事件绑定

v-bind 属性绑定

v-modol

v-bind

demo

v-text v-html

v-once

v-pre

事件

style

class

过滤器

过滤器传值

全局过滤器

计算属性

事件修饰符

.stop

.prevent

键盘事件

模板

通过script标签

通过template标签

组件

components

组件的传值

使用props传递数据 父向儿子传递数据

$emit的使用场景

$refs的使用场景

$on的使用场景

定义组件

组件的嵌套

钩子函数

mounted()

动态组件

组件的传值

向下传值

向上传值

ref 属性获取dom节点

ref组件

全局组件

定义多个全局组件

公共组件

猜你喜欢

使用props传递数据父向儿子传递数据