vue学习笔记（二）

摘要：供用户在相应的阶段对其进行操作。我们像下面这样使用这个指令大多数情况下，我们只需要使用与钩子函数。里提供了函数的简写形式钩子函数有两个常用的参数和。其他用法与全局自定义指令一致。

vue实例从创建到销毁的过程，称为生命周期，共有八个阶段。

这八个阶段里分别有一个叫做钩子函数的实例选项。供用户在相应的阶段对其进行操作。

beforeCreate(){  //组件实例刚刚创建，还未进行数据观测和事件配置
                
},
created(){  //实例已经创建完成，并且已经进行数据观测和事件配置
                
},
beforeMount(){//模板编译之前，还没挂载
                
},
mounted(){ //模板编译之后，已经挂载，此时才会渲染页面，才能看到页面上数据的展示
                    
},
beforeUpdate(){//组件更新之前
                
},
updated(){//组件更新之后
                
},
beforeDestroy(){//组件销毁之前
                
},
destroyed(){  //组件销毁之后
                    
}

这几个钩子中，最常用的是created()与mounted()。

计算属性也是用来存储数据，但具有以下几个特点：

数据可以进行逻辑处理操作

对计算属性中的数据进行监视

    {{addZero}}

    
new Vue({
    el: "#app",
    data: {
        num: 8
    },
    computed: {
        //这是计算属性的get方法，用于取值
        addZero() {
            return this.num > 10 ? this.num : "0" + this.num;
        }
    }
})

这里的addZero和num一样，都是属性。不过addZero是依赖于num、进行计算后的值。一旦num的值发生变化，addZero的值也会随之变化。

 

    {{num}}----{{addZero}}
    

    点击改变num
 
    
 new Vue({
    el: "#app",
    data: {
        num: 8
    },
    methods: {
        change: () => {
            this.num++;
        }
    },
    computed: {
        addZero:() => {
            return this.num > 10 ? this.num : "0" + this.num;
        }
    }
 })

一旦我们点击按钮改变num的值，那么因为计算属性实时监测依赖项，addZero也会跟着发生变化。

将计算属性的get函数定义为一个方法也可以实现和计算属性类似的功能。那么二者之间有什么区别？

区别一：计算属性是基于它的依赖进行实时更新的，方法则是调用才更新

区别二：计算属性是有缓存的，只要相关依赖没有改变，多次访问计算属性得到的值是之前缓存的计算结果，不会多次执行。操作一个没有依赖项的值也是如此。

官方文档给出了下面这个例子：

computed: {
  now: function () {
    return Date.now()
  }
}

计算属性存在缓存，这里的now值不会发生变化。

计算属性由两部分组成：get和set，分别用来获取计算属性和设置计算属性。默认只有get，如果需要set，要自己添加。

        

        {{num}}----{{addZero}}
        

        点击改变num
    
    
   new Vue({
        el: "#app",
        data: {
            num: 8
        },
        methods: {
            change(newNumber) {
                this.addZero = newNumber;
            }
        },
        computed: {
            addZero: {
                get() {
                    return this.num > 10 ? this.num : "0" + this.num;
                },
                set(newNum) {
                    this.num = newNum
                }
            }
        }
    })

我们再change方法中改变addZero属性的值的时候会自动调用它的set方法。

vue中给实例和属性提供了若干属性和方法。

获取属性的语法：实例名.属性名
以下是常用的属性：

vm.$el: 获取vue实例关联的元素DOM，进而可以对其进行操作

vm.$data: 获取数据对象data

vm.$options：获取选项，自定义的选项也可以在这里获取。

vm.$refs：获取所有添加ref属性的元素dom对象，进而可以对其进行操作

手动挂载vue实例

var vm=new Vue({
    data:{
        msg:"Hello vue.js"
    }
 }).$mount("#app");

销毁实例

vm.$destroy();  //销毁实例所占的内存空间

在DOM更新完成后再执行回调函数，一般在修改数据之后使用该方法，以便获取更新后的DOM

var vm=new Vue({
    data:{
        msg:"Hello vue.js"
    }
 }).$mount("#app");
 
 //修改数据
 vm.msg="foo";
 
 console.log(vm.$refs.title.textContent);  //Hello vue.js
 vm.$nextTick(function(){
    console.log(vm.$refs.title.textContent); //foo
 });

DOM还没更新完，Vue实现响应式并不是数据发生改变之后DOM立即变化，需要按一定的策略进行DOM更新，需要时间！使用$nextTick方法等DOM更新完再获取数据。

通过vue实例的$set方法为对象添加属性，可以实时监视。

    {{user.name}}
 {{user.age}}
    

    添加属性

    
var vm = new Vue({
    data: {
        msg: "Hello vue.js",
        user: {
            name: "hedawei",
            gender: "man"
        }
    },
    methods: {
        addAge() {
            /* this.user.age = 22; */
            this.$set(this.user, "age", 22);
        }
    }
}).$mount("#app");

方法中使用原始的添加属性方法的话不会在模板中显示。使用$set方法会实时监控数据，然后添加。

监控vue实例的变化

 vm.$watch("msg", (newValue, oldValue) => {
    console.log("msg被修改啦，原值：" + oldValue + "，新值：" + newValue);
 });

如果需要监控深度数据变化（例如监控一个对象中的某个属性），则需要在选项中添加{deep:true}

自定义指令分为自定义全局指令和自定义局部指令。

使用全局方法Vue.directive(指令ID,定义对象)。注：使用指令时必须在指名名称前加前缀v-，即v-指令名称。

简单示例：

Vue.directive("hello",{
    bind(){ //常用！！
        alert("指令第一次绑定到元素上时调用，只调用一次，可执行初始化操作");
    },
    inserted(){
        alert("被绑定元素插入到DOM中时调用");
    },
    update(){
        alert("被绑定元素所在模板更新时调用");
    },
    componentUpdated(){
        alert("被绑定元素所在模板完成一次更新周期时调用");
    },
    unbind(){
        alert("指令与元素解绑时调用，只调用一次");
    }
 });

这里定义了一个名为hello的指令，指令定义函数提供了几个钩子函数，分别在不同的时期生效。我们像下面这样使用这个指令:

hello vue.js

大多数情况下，我们只需要使用bind与update钩子函数。vue里提供了函数的简写形式：

Vue.directive("hello", function () {
    alert("hello vue.js");
})  

钩子函数有两个常用的参数el和binding。el是绑定的DOM对象，binding是一个对象，包含若干属性。

拿到DOM对象，我们就可以对DOM进行一些操作。

hello vue.js

Vue.directive("hello", function (el,binding) {
    el.style.color = "red";
    
    //属性name是指令的名字（不带v-）
    console.log(binding.name);     //hello
    //属性value是传递给指令的值
    console.log(binding.value);   //alice
    //属性expression是指令值的字符串形式（个人感觉就是类似变量名）
    console.log(binding.expression);  //msg
    //属性arg是传递给指令的参数(和传值写在一起容易令初学者困惑，下面分开写  
    //合在一起写的写法是
hello vue.js
)
    //
hello vue.js
    console.log(binding.arg);       //123
    //属性modifiers是一个包含修饰符的对象。
    //与传参传值合在一起的写法是 
hedawei
    //
hello vue.js
    console.log(binding.modifiers);    //{bar:true}
})  

 var vm = new Vue({
    el: "#app",
    data: {
        msg: "alice"
    }
 })

局部自定义指令写在实例的directives选项中。

  var vm = new Vue({
    el: "#app",
    data: {
        msg: "alice"
    },
    methods: {
    },
    directives: {
        word: function(el, binding) {
            console.log(binding.name);
        }
    }
 })

其他用法与全局自定义指令一致。

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。本质上还是使用CSS3动画：transition、animation属性。

使用transition组件，将要执行动画的元素包含在该组件内：

    
        运动的元素
   

我们需要为其定义一个name属性，以便后面为其添加css样式。

动画有6个CSS类名，下面结合例子说明：

    
    

        点 击
        
            

            
        
    
    
    

vue中给过渡的不同时期提供了不同的钩子函数。

        

        

        
 new Vue({
        ...
    methods: {
        beforeEnter(el) {
            alert("动画进入之前");
        },
        enter(el) {
            alert("动画进入");
        },
        afterEnter(el) {
            alert("动画进入之后");
        },
        beforeLeave(el) {
            alert("动画离开之前");
        },
        leave(el) {
            alert("动画离开");
        },
        afterLeave(el) {
            alert("动画离开之后");
        }
    }
 });

在这不同的时期，我们可以取到过渡元素的DOM对象，从而对其进行操作。

上面的标签只适用于单元素过渡。若要对多元素进行过渡，则需要使用标签，并且绑定key属性，设置不同的值。

    点 击
    
        

        
        

        
    

我们可以使用vue的自定义过渡类名结合第三方动画库实现自定义动画效果。这六个自定义类名和vue内置的类名类似:

enter-class

enter-active-class

enter-to-class

leave-class

leave-active-class

leave-to-class
示例：

 p {
    width: 300px;
    height: 300px;
    background-color: red;
    margin: 0 auto;
 }

 

    点 击
    
        

        
    


 

未完待续。。。