vue学习笔记

v-on:绑定事件（简写：也可将v-on:替换为@）

v-for:循环（相当于js中的for in循环）

v-if：判断（v-else-if,v-else）

v-model:双向绑定数据，用于表单元素

v-bind:主要用于属性绑定（简写：也可将v-bind:替换为：  如v-bind:href,简写为:href）

v-once:只渲染元素或组件1次，后期数据改变时不重新渲染

v-html:相当于html

修饰符 (Modifiers) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
例：<form v-on:submit.prevent="onSubmit">...</form>
注：当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

项目参考：https://segmentfault.com/p/1210000008583242/read?from=timeline#Demo%E7%A4%BA%E4%BE%8B

<div class="c1">
    <p>
        {{counter}}
    </p>
    <button v-on:click="counter+=1">点击</button>
</div>
<script>

var app=new Vue({

        el:".c1",
        data:{
            counter:1
        }
    });

</script>

<div class="c2">
    <!--执行的时候，如需传入e，则用$event代替-->
    <button v-on:click="reserve('8888888888888888',$event)">diandian</button>
</div>
<script>
    var app2=new Vue({
        el:".c2",
        data:{
            name:"aaa"
        },
        methods:{
            reserve:function(para,e){
                console.log(para);
                e.target.innerHTML=this.name;//如果想调用data中的值要通过this查找  不能通过data
            }
        }
    })
</script>

<div class="app1">
    <p v-if="seen" v-bind:title="message">
        {{message}}
    </p>
</div>
<script>
    var app1=new Vue({
        el:'.app1',
        data:{
            seen:true,
            message:"66666666666666666666666666"
        }
    });
</script>
<div class="app2">
    <ul>
        <li v-for="item in items">
            {{item.text}}
        </li>
    </ul>
</div>
<script>
    var app2=new Vue({
        el:'.app2',
        data:{
            items:[
                {'text':"11111"},
                {'text':"222222"},
                {'text':"333333"},
                {'text':"444444"},
                {'text':"555555"}]
        }
    });
</script>
<div class="app3">
    <p>
        {{message}}
    </p>
    <input type="text" v-model="message"/>
</div>
<script>
    var app3=new Vue({
        el:'.app3',
        data:{
            message:"12"
        }
    });
</script>
<div class="app4">
    <p>
        {{message}}
    </p>
</div>
<script> 
    var app4=new Vue({
        el:".app4",
        data:{
            message:"页面加在于"+new Date()
        }
    })
</script>

列表渲染：

    <div class="app1">
        <p v-for="(value,key,index) in items">
            {{key}}:  {{value}}---{{index+2}}
        </p>
    </div>
    <script>
        var app1=new Vue({
            el:'.app1',
            data:{
                items:
                    {
                        name:"zyl",
                        age:"18",
                        sex:'male'
                    }
            }
        })
    </script>
    <div class="app2">
        <p v-for="item in 10">
            {{item}}
        </p>
    </div>
    <script>
        var app2=new Vue({
            el:'.app2',
            data:{}
        })
    </script>
    <div class="app3">
        <p v-for='item in items'>
            {{item.name}}
        </p>
    </div>
    <script>
        var app3=new Vue({
            el:'.app3',
            data:{
                items:[
                    {name:1},
                    {name:2},
                    {name:3}
                ]
            }
        })
    </script>

实例：

<script>
    var dd={
        a:123
    };
    var vm=new Vue({
        data:dd,
        created:function(){
            console.log(this.a);
        }
    });
    console.log(vm.a);
    vm.a=222;
    console.log(dd.a);
    console.log(vm.a);
    vm.a=111;
    console.log(dd.a);
    console.log(vm.$data == dd);
    console.log(vm.a==vm.$data.a);
    vm.$watch('a',function(newVal,oldVal){
        console.log(newVal,oldVal)
    })
</script>

条件渲染：

<div class="app1">
    <span v-if="aa">111</span>
    <span v-else>222</span>
</div>
<script>
    var app1=new Vue({
        el:".app1",
        data:{
            aa:true
        }
    })
</script>
<div class="app2">
    <span v-if="type == 0">111</span>
    <span v-else-if="type == 1">222</span>
    <span v-else-if="type == 2">000</span>
    <span v-else>aaa</span>
</div>
<script>
    var app2=new Vue({
        el:".app2",
        data:{
            type:0
        }
    })
</script>
<div class="app3">
    <span v-show="aa">12121212121212</span>
</div>
<script>
    var app3=new Vue({
        el:".app3",
        data:{
            aa:false
        }
    })
</script>

模板语法（指令、插值、过滤器）：

<div class="app1">
    <a v-bind:name="aa" v-on:click="cc()" v-bind:title="bb" v-bind:href="url" id="item">多点点--{{ok? 12:21}}</a>
    <span>
        {{cc.split("").reverse().join("")}}
    </span>
    <span>
        <!--{{cc | capitalize}}-->
    </span>
</div>
<script>
    var app1=new Vue({
        el:".app1",
        data:{
            aa:"a123",
            bb:"nnnn",
            ok:true,
            cc:"abcdefh",
            url:"cnmstl.net"
        },
        methods:{
            cc:function(){
                alert(1)
            }
        }
    })
</script>
<h6>插值</h6>
<div class="app2">
    <span>{{message}}</span>
    <input type="text" v-model="message"/>
</div>
<script>
    var app2=new Vue({
        el:".app2",
        data:{
            message:123321
        }
    })
</script>
<div class="app3">
    <span v-once>{{message}}</span><!--v-once:只绑定一次值，当message值再发生变化时，span中的内容不跟随变化-->
    <input type="text" v-model="message"/>
</div>
<script>
    var app3=new Vue({
        el:".app3",
        data:{
            message:123
        }
    })
</script>
<div class="app4">
    <span v-html="message"></span><!--v-html表示插入html代码-->
</div>
<script>
    var app4=new Vue({
        el:'.app4',
        data:{
            message:"<em>111</em>"
        }
    })
</script>
<div class="app5">
    <p>{{number+1}}</p>
    <p>{{!number?'yes':'no'}}</p>
    <p>{{new Date()}}</p>
    <p>{{Math.random()}}</p>
    <p>{{str.split("").reverse().join("")}}</p>
    <p v-if="aa">显示内容</p>
    <button v-bind:disabled="bb">按钮</button>
</div>
<script>
    var app5=new Vue({
        el:".app5",
        data:{
            number:10,
            str:"abcdefgh",
            aa:true,
            bb:true
        }
    })
</script>
<h6>过滤器</h6>
<div class="app6">
    <span :title="message">
        {{message|flag}}
    </span>
</div>
<script>
    var app6=new Vue({
        el:".app6",
        data:{
            message:"abc",
            title:"app-name"
        },
        filters:{
            flag:function(value){
               if(!value){
                   return '';
               }
                return value.charAt(0).toUpperCase()+value.slice(1);
            }
        }
    })
</script>

改变class和内联样式：

<div class="app1">
    <span v-bind:class="{active:disActive}">111</span>
</div>
<script>
    var app1=new Vue({
        el:'.app1',
        data:{
            disActive:true
        }
    })
</script>
<div class="app2">
    <span v-bind:class="{active:a1,bold:a2}">222</span>
</div>
<script>
    var app2=new Vue({
        el:'.app2',
        data:{
            a1:false,
            a2:true
        }
    })
</script>
<div class="app3">
    <span v-bind:class="[a,b]">111</span>
</div>
<script>
    var app3=new Vue({
        el:'.app3',
        data:{
            a:'active',
            b:'bold'
        }
    })
</script>
<div class="app0">
    <span v-bind:class="obj">111122222</span>
</div>
<script>
    var app0=new Vue({
        el:'.app0',
        data:{
            obj:['act','bod','cc']
        }
    })
</script>
<h6>改变内联样式</h6>
<div class="app4">
    <span  v-bind:style="{color:co,fontSize:font+'px'}">11111</span>
</div>
<script>
    var app4=new Vue({
        el:'.app4',
        data:{
            co:'green',
            font:32
        }
    })
</script>
<div class="app5">
    <span v-bind:style="obj">6666666666666666</span>
</div>
<script>
    var app5=new Vue({
        el:'.app5',
        data:{
            obj:{
                color:"red",
                fontSize:"60px",
                fontWeight:"bold",
                fontStyle:"normal"
            }
        }
    })
</script>

组件：

<h6>dom解析</h6>
<div class="app1">
    <div is="aa"></div>
</div>
<script>
    var app1=new Vue({
        el:'.app1',
        components:{
            "aa":{
                template:"<div><span>111</span><br/><span>000</span></div>"
            }
        }
    })
</script>
<div class="app2">
    <my-component></my-component>
</div>
<script>
    Vue.component('my-component',{
        template:"<div v-on:click='message+=1'>{{message}}</div>",
        data:function(){
            return {message:111}
        }
    });
    var app2=new Vue({
        el:".app2"
    });
</script>
<div class="app3">
    <child a0="hello" a1="nihao" a2="nisha"></child>
</div>
<script>
    Vue.component("child",{
        props:["a0","a1",'a2'],
        template:"<span>{{a0}},{{a1}},{{a2}}232</span>"
    });
    var app3=new Vue({
        el:".app3"
    })
</script>
<div class="app4">
    <child a0="hello"></child>
    <child a1="world"></child>
    <child a2="nihao"></child>
</div>
<script>
    Vue.component("child",{
        props:['a0','a1','a2'],
        template:'<span>{{a0}}{{a1}}{{a2}}</span>'
    });
    var app4=new Vue({
        el:'.app4'
    })
</script>
<div class="app5">
    <child></child>
</div>
<div class="app6">
    <child></child>
</div>
<script>
    Vue.component("child",{
        template:"<p>111</p>"
    });
    var app5=new Vue({
        el:'.app5'
    });
    var app6=new Vue({
        el:'.app6',
        template:"<p>123231</p>"
    })
</script>
<div class="app6">
    <input v-model='msg'/>
    <child v-bind:message="msg"></child>
</div>
<script>
    Vue.component("child",{
        props:['message'],
        template:"<span>{{message}}</span>"
    });
    var app6=new Vue({
        el:'.app6',
        data:{
            msg:111
        }
    })
</script>

表单元素：

<div class="app1">
    <input type="text" v-model="msg"/>
    <span>{{msg}}</span>
</div>
<script>
    var app1=new Vue({
        el:'.app1',
        data:{
            msg: 'a123'
        }
    })
</script>
<div class="app2">
    <input type="radio"  value="男" name="sex" v-model="picked"/>男
    <input type="radio"  name="sex" value="女" v-model="picked"/>女
    <span>
        checked:{{picked}}
    </span>
</div>

<script>
    var app2=new Vue({
        el:'.app2',
        data:{
            picked:"男"//radio:此处字符串中显示的是默认选中的单选框中的value值
        }
    })
</script>
<div class="app3">
    <select v-model="opt">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
    </select>
    <span>
        selected:[{{opt}}]
    </span>
</div>
<script>
    var app3=new Vue({
        el:'.app3',
        data:{
            opt:"1"//此处值为1，则表示默认选中1
        }
    })
</script>
<div class="app4">
    <input type="checkbox" value="香蕉" v-model="picked"/>香蕉
    <input type="checkbox" value="柚子" v-model="picked"/>柚子
    <span>已选择：{{picked}}</span>
</div>
<script>
    var app4=new Vue({
        el:'.app4',
        data:{
            picked:[]//复选框：此处是数组则默认把选中的value值显示在数组中，如果为字符串，则选中为true，不选为false
        }
    })
</script>
<div class="app5">
    <select multiple v-model="picked" style=" 50px">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
    </select>
    <span>
        selected:{{picked}}
    </span>
</div>
<script>
    var app5=new Vue({
        el:'.app5',
        data:{
            picked:[]
        }
    })
</script>
<div class="app6">
    <select v-model="picked">
        <option v-for="item in opts" v-bind:value="item.name">
            {{item.name}}
        </option>
    </select>
    <span>
        已选择：{{picked}}
    </span>
</div>
<script>
    var app6=new Vue({
        el:'.app6',
        data:{
            picked:'',
            opts:[
                {name:11},
                {name:22},
                {name:33}
            ]
        }
    })
</script>
<div class="app7">
    <input type="checkbox" v-model="picked"/>aaa
    <span>{{picked}}</span>
</div>
<script>
    var app7=new Vue({
        el:'.app7',
        data:{
            picked:''
        }
    })
</script>
<div class="app8">
    <input type="checkbox" v-model="aa" v-bind:true-value="a" v-bind:false-value="b"/>选择
    <span>{{aa}}</span>
</div>
<script>
    var app8=new Vue({
        el:'.app8',
        data:{
            aa:'',
            a:12,
            b:1221
        }
    })
</script>

 计算属性：

<div class="app1">
    <p>
        内容内容    {{message}}
    </p>
    <p>
        neirongneirong   {{reverseMsg}}
    </p>
    <p>
        我是缓冲数据{{reverse()}}
    </p>
</div>
<script>
    var app1=new Vue({
        el:'.app1',
        data:{
            message:'abcdb869021'
        },
        computed:{
            reverseMsg:function(){
                return this.message.split("").reverse().join("")
            }
        },
        methods:{
            reverse:function(){
                var arr=this.message.split("");
                arr.splice(2,0,"666");
                return arr;
            }
        }
    })
</script>

 数组更新检测:

当data中的值为数组时，可直接调用下边的方法  如：example1.items.push({ message: 'Baz' }) 。

• push()  pop()  shift()  unshift()  splice() sort() reverse()

        app3.items.reverse();//倒序
        app3.items.splice(0,0,{name:12});//新增
        app3.items[1].name=11;//改变某一项值

 修饰符：

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处处理，然后才交由内部元素自身进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

 混合：

var myMixin={
        created:function(){
            this.hello();
            this.world();

        },
        methods:{
            hello:function(){
                console.log('hello')
            },
            world:function(){
                console.log('world')
            }
        }
    };
    var components=Vue.extend({//定义一个实用混合对象的组件
        mixins:[myMixin]
    });
    myComponents=new components();

var mixin={
       methods:{//选项合并
           hello:function(){
               console.log("hello")
           },
           world:function(){
               console.log("world");
           }
       }
    };
    var vm=new Vue({
        mixins:[mixin],
        methods:{
            a:function(){
                console.log(1)
            },
            b:function(){
                console.log(2)
            }
        }
    });
    vm.hello();
    vm.world();
    vm.a();
    vm.b();