适合初学者的Vue-1.0教程（三）

计算属性

    <div id="box">
        a => {{a}}
        <br>
        b => {{b}}
    </div>
    <script>
        var vm=new Vue({
            el:'#box',
            data:{
                a:1
            },
            computed:{
                b:function(){
                 return 2;
                }
            }
        });
        console.log(vm.a);
    </script>

计算属性和data对象属性都是可以直接在DOM上直接使用的

var vm=new Vue({
            el:'#box',
            data:{
                a:1
            },
            computed:{
                b:function(){
                    //业务逻辑代码
                    return this.a+1;
                }
            }
        });
        document.onclick=function(){
            vm.a=101;
        };

但计算属性可以获取data对象属性，根据获取的data对象属性计算出想要的值
上面的写法只适用于向计算属性取值

<div id="box">
        a => {{a}}
        <br>
        b => {{b}}
    </div>
    <script>
        var vm=new Vue({
            el:'#box',
            data:{
                a:1
            },
            computed:{
                b:{
                    get:function(){
                        return this.a+2;
                    },
                    set:function(val){
                        this.a=val;
                    }
                }
            }
        });

        document.onclick=function(){
            vm.b=10;
        };
    </script>

image.png

点击之后
这种写法，无论是对计算属性取值或赋值，代码都有做相应的处理

image.png

监听数据变化

    <script>
        window.onload=function(){
            var vm=new Vue({
                el:'#box',
                data:{
                    a:111,
                    b:2
                }
            });
            vm.$watch('a',function(){
                alert('发生变化了');

                this.b=this.a+100;
                
            });
            document.onclick=function(){
                vm.a=1;
            };
        };
    </script>
    <div id="box">
        {{a}}
        <br>
        {{b}}
    </div>

image.png

点击之后
会弹出“发生变化了”的弹出框

image.png

使用钩子函数$mount

        var vm=new Vue({
            data:{
                arr:['apple','pear','orange']
            },
            methods:{
                add:function(){
                    this.arr.push('tomato');
                }
            }
        }).$mount('#box');

实例化之后再挂载目标元素

生命周期

<div id="box">
        {{msg}}
    </div>
    <script>
        var vm=new Vue({
            el:'#box',
            data:{
                msg:'well'
            },
            created:function(){
                alert('实例已经创建');
            },
            beforeCompile:function(){
                alert('编译之前');
            },
            compiled:function(){
                alert('编译之后');
            },
            ready:function(){
                alert('插入到文档中');
            },
            beforeDestroy:function(){
                alert('销毁之前');
            },
            destroyed:function(){
                alert('销毁之后');
            }
        });

        /*点击页面销毁vue对象*/
        document.onclick=function(){
            vm.$destroy();
        };
    </script>

Vue的生命周期依次为：
实例已经创建、编译之前、编译之后、插入到文档中、销毁之前、销毁之后

Vue也提供了一些便捷方式去操作绑定元素、获取数据、操作实例等

<div id="box">
        {{a}}
    </div>
    <script>
        var vm=new Vue({
            el:'#box',
            data:{
                a:1,
                b:2
            }
        });
    </script>

vm.$el.style.background='red';

对vue的实例vm挂载目标进行背景变红操作
.$el表示实例挂载的目标

console.log(vm.$data.a);

在控制台打印出vue实例vm的数据对象data的属性a
.$data表示数据对象

var vm=new Vue({
            data:{
                a:1,
                b:2
            }
        }).$mount('#box');

如果实例化时没有挂载目标，可以在实例化之后再挂载
vm.$mount('选择器')挂载目标元素

var vm=new Vue({
            aa:11, //自定义属性,
            show:function(){
                alert(1);
            },
            data:{
                a:1
            }
        }).$mount('#box');

        vm.$options.show();
        console.log(vm.$options.aa);

数据除了放在data对象里，还可以放在自定义的属性里，不过自定义属性都在options对象里
vm.$options.aa表示自定义属性对象options的aa属性

vm.$log();

是console.log(vm)的一个便捷方式
会打印出vue的实例对象

计算属性的用法

<div id="box">
        a => {{a}}
        <br>
        b => {{b}}
    </div>
    <script>
        var vm=new Vue({
            el:'#box',
            data:{
                a:1
            },
            computed:{
                b:function(){
                    //业务逻辑代码
                    return this.a+1;
                }
            }
        });
        document.onclick=function(){
            vm.a=101;
        };
    </script>

在点击页面之后，a的值被重新赋值，b则是跟a的值有关联会跟着变动
计算属性一般用来处理业务逻辑的
所以监听数据a，数据b随着a的变化而变化

<div id="box">
        a => {{a}}
        <br>
        b => {{b}}
    </div>
    <script>
        var vm=new Vue({
            el:'#box',
            data:{a:1 },
            computed:{
                b:{  get:function(){ return this.a+2; }, set:function(val){ this.a=val; }  }
            }
        });
        document.onclick=function(){
            vm.b=10;
        };

监听数据b，数据a随着b的变化而变化
计算属性computed的b属性值是对象，get属性用于取值，set属性用于赋值

监听数据变化

            var vm=new Vue({
                el:'#box',
                data:{ a:111, b:2 }
            });
            vm.$watch('a',function(){
                alert('发生变化了');
                this.b=this.a+100;                
            });
            document.onclick=function(){vm.a=1; };

当点击页面时，data数据对象里的a属性值被重新赋值，由于监听了a属性，则a的值变化之后，b的值也随之改变
vm.$watch属性方法用来监听data数据对象里的属性

<div id="box">
        {{json | json}}
        <br>
        {{b}}
    </div>
    <script>
            var vm=new Vue({
                el:'#box',
                data:{
                    json:{name:'strive',age:16},
                    b:2
                }
            });
            vm.$watch('json',function(){
                alert('发生变化了');
            });
            document.onclick=function(){
                vm.json.name='aaa';
            };
    </script>

点击页面之后，data数据对象里json属性对象的name属性值被重新赋值，但并没有弹出“发生变化了”的提示框
因为vm.$watch监听的属性是浅度监听

vm.$watch('json',
function(){ alert('发生变化了');},
{deep:true});

.$watch方法的第三个参数是一个对象，用来设置监听程度
{deep:true}表示深度监听
所以点击页面后会弹出“发生变化了”的提示框

如果v-for指令的数组中有重复的成员该怎么办

一般情况下重复成员会被过滤掉，不会显示出来

<div id="box">
        <input type="button" value="添加" @click="add">
        <ul>
            <li v-for="val in arr" track-by="$index">
                {{val}}
            </li>
        </ul>
    </div>
    <script>
        var vm=new Vue({
            data:{  arr:['apple','pear','orange'] },
            methods:{
                add:function(){this.arr.push('tomato'); }
            }
        }).$mount('#box');
    </script>

添加track-by="index”之后使v-for指令可以打印出重复的成员

自定义过滤器

<div id="box">
        {{a | toDou}}
        {{b | toDou}}
    </div>
    <script>
        Vue.filter('toDou',function(input){
            return input<10?'0'+input:''+input;
        });
        var vm=new Vue({
            data:{a:9, b:11 }
        }).$mount('#box');
    </script>

当数据对象的属性小于10，前面加前缀‘0’，否则则不加
Vue.filter()用来自定义过滤器,
第一个参数是过滤器的标识符，第二个参数是处理函数

<div id="box">
        {{a | toDou 1 2}}
</div>
 Vue.filter('toDou',function(input,a,b){
        alert(a+','+b);
        return input<10?'0'+input:''+input;
});

会弹出“1,2”提示框
过滤器后面的1、2作为处理函数的第二参数和第三参数，第一参数是要处理的属性

    <div id="box">
        {{a | date}}
    </div>
    <script>
        Vue.filter('date',function(input){
            var oDate=new Date(input);
            return  oDate.getFullYear()+'-'+
            (oDate.getMonth()+1)+'-'+
            oDate.getDate()+' '+
            oDate.getHours()+':'+ 
            oDate.getMinutes()+':'+
            oDate.getSeconds();
        });
        var vm=new Vue({
            data:{
                a:Date.now()
            }
        }).$mount('#box');
    </script>

2017-8-13 15:29:34
会得到以上格式的一个时间
Date.now()会得到一个时间戳，然后过滤器对这个时间戳进行处理，就变成这种格式

<div id="box">
        <input type="text" v-model="msg | filterHtml">
        <br>
        {{{msg}}}
    </div>
    <script>
        Vue.filter('filterHtml',{
            read:function(input){ //model-view
                return input.replace(/<[^<]+>/g,'');
            },
            write:function(val){ //view -> model
                console.log(val);
                return val;
            }
        });
        window.onload=function(){
            var vm=new Vue({
                data:{
                    msg:'<strong>welcome</strong>'
                }
            }).$mount('#box');
        };
    </script>

带有html标签的内容写入输入框中，会改变data对象中msg属性的值，由于过滤器写入时不会对内容操作，所以msg的值就是写入时的值，但是在使用过滤器的输入框中输出的值被过滤器将html标签替换成空字符，
所以输入框中值的html标签会消失，
而{{msg}}的值则是带有标签的输入框的值

自定义键盘信息

window.onload=function(){
            var vm=new Vue({
                el:'#box',
                data:{  a:'blue' },
                methods:{ show:function(){  alert(1); }  }
            });
        };

<div id="box">
        <input type="text" @keydown.c="show"></div>

当键盘按下c键时触发show，弹出“1”提示框

<input type="text" @keydown.17="show">

ctrl的键码是17，按下ctrl键会弹出“1”的提示框

Vue.directive('on').keyCodes.ctrl=17;

<input type="text" @keydown.ctrl="show">

常用的字母Vue都已经定义好了，
但是ctrl、Alt等按键则没有定义好，
将ctrl的键码17赋值给ctrl这个标识符，
则可以语义化的设置keydown的参数

Vue.directive('on').keyCodes.myenter=13;

<input type="text" @keydown.myenter="show">

按下Enter键，会弹出“1”的提示框
参数名可以自定义

自定义指令

    <script>
        Vue.directive('red',function(){
            this.el.style.background='red';
        });

        window.onload=function(){
            var vm=new Vue({
                el:'#box',
                data:{ msg:'welcome'}
            });
        };
    </script>
    <div id="box">
        <span v-red>
            redBackground
        </span>
    </div>

image.png

使用了v-red指令的标签，背景颜色变成红色
要在自定义的指令标识符前面加上前缀“v-”

<script>
        Vue.directive('red',function(color){
            this.el.style.background=color;
        });
        window.onload=function(){
            var vm=new Vue({
                el:'#box',
                data:{ backgroundColor:'red'}
            });
        };
    </script>
    <div id="box">
        <span v-red="backgroundColor">
            redBackground
        </span>
    </div>

也会显示红色背景的”redBackground”
指令v-red的参数从data数据对象里的backgroundColor属性获取，
自定义指令directive中的函数则将参数传入给
相应元素的样式属性中

        <span v-red="'red'">
            redBackground
        </span>

之间传入字符串参数也可以，需要用单引号' '包裹

<style>
    #box{
        border:1px solid;
        width:300px;
        height:300px;
        margin-top:100px;
        position: relative;;
    }
    </style>
    <script>
        Vue.directive('drag',function(){
            var oDiv=this.el;
            oDiv.onmousedown=function(ev){
                var disX=ev.clientX-oDiv.offsetLeft;
                var disY=ev.clientY-oDiv.offsetTop;
                console.log('ev.clientY',ev.clientY);
                console.log('oDiv.offsetTop',oDiv.offsetTop);
                oDiv.onmousemove=function(ev){
                    var l=ev.clientX-disX;
                    var t=ev.clientY-disY;
                    oDiv.style.left=l+'px';
                    oDiv.style.top=t+'px';
                };
                oDiv.onmouseup=function(){
                    oDiv.onmousemove=null;
                    oDiv.onmouseup=null;
                };
            };
        });
        window.onload=function(){
            var vm=new Vue({
                el:'#box',
                data:{
                    msg:'welcome'
                }
            });
        };
    </script>
    <div id="box">
        <div v-drag :style="{width:'100px', height:'100px', background:'blue', position:'absolute', right:0, top:0}"></div>
        <div v-drag :style="{width:'100px', height:'100px', background:'red', position:'absolute', left:0, top:0}"></div>
    </div>

利用上面的原理，可以做一个拼图

自定义元素指令（标签）

<style>
        zns-red{
            background: gray;
            display: inline;
        }
    </style>
    <script>
        Vue.elementDirective('zns-red',{
            bind:function(){
                this.el.style.background='red';
            }
        });
        window.onload=function(){
            var vm=new Vue({
                el:'#box',
                data:{}
            });
        };
    </script>
    <div id="box">
        <zns-red>red-bakground</zns-red>
   </div>

image.png