vue2.0学习笔记（第四讲）（生命周期函数、vue实例的简单方法、自定义指令）

时间 2019-12-05

标签 vue2.0 vue 学习笔记第四生命周期函数实例简单方法自定义指令繁體版

原文原文链接

1、生命周期函数

vue提供了几个钩子函数，用于对应由vue建立的实例对象的生命周期。下面来罗列在vue2.0当中定义的生命周期函数。html

beforeCreate
该函数在实例对象刚被建立，尚未绑定属性时触发执行。
created
该函数在实例对象完成建立和属性绑定，可是DOM还未生成（$el属性还不存在）时触发执行。
beforeMount
该函数在组件挂载以前触发执行。
mounted
该函数在组件挂载完成以后触发执行。（至关于于vue1.x当中的compiled和ready）
beforeUpdate
该函数在组件数据更新以前触发执行。
updated
该函数在组件数据更新完毕以后触发执行。
beforeDestroy
该函数在实例对象销毁以前触发执行。
destroyed
该函数在实例对象完成销毁以后触发执行。

在上述的钩子函数当中，比较经常使用的有mounted和updated。注意mounted不会承诺全部的子组件也都一块儿被挂载。若是但愿等到整个视图都渲染完毕，能够用vm.$nextTick替换掉mounted。以下所示：vue

mounted: function(){
  this.$nextTick(function(){
    // Code that will run only after the
    // entire view has been rendered
  })
}

当咱们在vue实例对象的methods当中定义了一个方法，但愿当文本节点所有插入文档当中以后先自动调用一次该方法，那么咱们就能够把对该方法的调用写在moutned函数体内部，相似于原生js当中window.onload的做用。示例代码以下所示：数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="vue.js"></script>
    <script>
        window.onload = function(){
            var vm = new Vue({
                el:'#box',
                data:{
                    
                },
                methods:{
                    show:function(){
                        alert(1);
                    }
                },
                mounted:function(){
                    this.$nextTick(function(){
                       this.show(); 
                    });
                }
            });

        };
    </script>
</head>
<body>
    <div id="box">
        <button @click="show()">按钮</button>
    </div>
</body>
</html>

则当页面加载完成，实例对象建立，组件挂载完成以后就会先调用一次该实例对象当中的show方法。注意，在该实例对象内部一样经过this来获取该方法。dom

2、vue实例的简单方法

当咱们定义var vm = new Vue({});以后代表建立了一个新的vue实例对象，vm这个实例对象在建立完成以后，在其身上就自带了一些简单的属性和方法，在实例对象外部经过vm.的方式来获取，在实例对象内部经过this.的方式来获取。函数

一、`vm.$el（this.$el）`

该实例属性能够获取到vm这个实例对象所挂载的dom元素。示例代码以下所示：this

<script>
    window.onload = function(){
        var vm = new Vue({
            el:'#box',
            data:{
                msg:"hahaxixi"
            },
            methods:{
                change:function(){
                    this.$el.style.color = 'red';
                }
            }
        });

    };
</script>
<div id="box">
    <button @click="change()">按钮</button>
    <h2>{{msg}}</h2>
</div>

在上述示例当中，由this.$el获取的dom元素相似于document.getElementById('box')的效果。页面刚完成加载渲染的效果为：spa

当咱们点击按钮后，页面呈现结果为：code

二、`vm.$data（this.$data）`

该实例属性能够获取该实例对象当中data这个数据对象。示例代码以下所示：htm

<script>
    window.onload = function(){
        var vm = new Vue({
            el:'#box',
            data:{
                msg:"hahaxixi"
            },
            methods:{
                show:function(){
                    alert(this.$data.msg);
                }
            }
        });

    };
</script>
<div id="box">
    <button @click="show()">按钮</button>
    <h2>{{msg}}</h2>
</div>

当咱们点击按钮时，便可在弹出框当中显示data这个数据对象当中msg对应的属性值"hahaxixi"。对象

三、`vm.$mount()`

该实例方法能够容许咱们手动挂载vue实例到某个指定的dom元素身上。当使用这个方法时，在实例对象内部能够不给el属性赋值。

var vm = new Vue({
            el:'#box',
            data:{},
            methods:{}
        });

       var vm = new Vue({
            data:{},
            methods:{}
        }).$mount('#box');

上述两段代码的做用效果是同样的。

四、`vm.$destroy()（this.$destroy()）`

该实例方法用于销毁实例对象。

五、`vm.$options（this.$options）`

该实例属性用于获取咱们在vm这个实例对象内部自定义的属性或方法。示例代码以下所示：

<script>
    window.onload = function(){
        var vm = new Vue({
            data:{
            },
            methods:{
                change:function(){
                    alert(this.$options.aa);
                    this.$options.show();
                }
            },
            aa:'haha',
            show:function(){
                alert('xixi');
            }
        }).$mount('#box');
    };
</script>
<div id="box">
    <button @click="change()">按钮</button>
</div>

从上述代码当中能够知道，咱们能够给vm这个实例对象加上自定义的属性和方法。aa为自定义的属性，在实例内部经过this.$options.aa来获取，show为自定义的方法，在实例内部能够经过this.$options.show()来调用。故当点击按钮以后，先弹出'haha'，再弹出'xixi'。

六、`vm.$watch('数据属性名',function(newVal,oldVal){})`

该实例方法能够用于监听实例对象当中数据的变化。该方法的第一个参数写vm这个实例对象当中所要监听的数据属性名，当被监听的数据发生变化时执行其回调函数，该回调函数当中默认接收两个参数，形参名能够任取，回调函数当中第一个参数表示数据变化以后的值，第二个参数表示数据变化以前的值。示例代码以下所示：

<script>
    window.onload = function(){
        var vm = new Vue({
            el:'#box',
            data:{
                msg:'haha'
            },
            methods:{
                change:function(){
                    this.msg  = 'xixi';
                }
            }
        });
        vm.$watch('msg',function(newVal,oldVal){
            alert(newVal);
            alert(oldVal);
        });
    };
</script>
<div id="box">
    <button @click="change()">按钮</button>
    <h2>{{msg}}</h2>
</div>

当咱们点击按钮时，数据发生变化，即会调用$watch当中的回调函数，先弹出"xixi"，而后再弹出"haha"。
上述这种vm.$watch(name,fnCb)的方式调用只是对数据进行浅度的监视，当要监视的数据为一个对象是，当该对象内部的属性值发生变化时，使用浅度监视没法监测到这个变化，此时须要使用深度监视，调用方式为vm.$watch(name,fnCb,{deep:true})。但咱们若是监视的是一个数组对象，则只需使用浅度监视便可监视到数组内部的元素数据是否发生了变化。

3、自定义指令

vue当中的自定义指令名称必须以v-开头，不过咱们在定义这个自定义指令时，名称省略v-的前缀。如
自定义指令的名称为v-red，则定义为Vue.directive('red',function(el){});该函数当中的形参el表明使用了这个v-red指令的dom元素。示例代码以下所示：

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

可接收参数的自定义指令定义为Vue.directive('red',function(el,binding){});该函数当中的形参el表明使用了这个v-red指令的dom元素，在函数体内部使用binding.value来表明该自定义指令所接收到的参数。示例代码以下所示：

<script>
    window.onload = function(){
        Vue.directive('red',function(el,binding){
            el.style.color = binding.value;
        });
        var vm = new Vue({
            el:'#box',
            data:{
                msg:'qianqian',
                b:'skyblue'
            }
        });
    };
</script>
<div id="box">
    <h2 v-red="b">{{msg}}</h2>
</div>

当自定义指令接收的参数为一个对象时，示例代码以下所示：

<script>
    window.onload = function(){
        Vue.directive('red',function(el,binding){
            el.style.color = binding.value.color;
            el.style.backgroundColor = binding.value.background;
        });
        var vm = new Vue({
            el:'#box',
            data:{
                msg:'qianqian',
                b:'skyblue',
                c:'yellow'
            }
        });
    };
</script>
<div id="box">
    <h2 v-red="{color:b,background:c}">{{msg}}</h2>
</div>

vue2.0学习笔记（第四讲）（生命周期函数、vue实例的简单方法、自定义指令）

1、生命周期函数

2、vue实例的简单方法

一、vm.$el（this.$el）

二、vm.$data（this.$data）

三、vm.$mount()

四、vm.$destroy()（this.$destroy()）

五、vm.$options（this.$options）