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

头像
倩儿爱甜食
    阅读 6 分钟
    3

    一、生命周期函数

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

    1. beforeCreate
      该函数在实例对象刚被创建，还没有绑定属性时触发执行。
    2. created
      该函数在实例对象完成创建和属性绑定，但是DOM还未生成（$el属性还不存在）时触发执行。
    3. beforeMount
      该函数在组件挂载之前触发执行。
    4. mounted
      该函数在组件挂载完成之后触发执行。（相当于于vue1.x当中的compiled和ready）
    5. beforeUpdate
      该函数在组件数据更新之前触发执行。
    6. updated
      该函数在组件数据更新完毕之后触发执行。
    7. beforeDestroy
      该函数在实例对象销毁之前触发执行。
    8. destroyed
      该函数在实例对象完成销毁之后触发执行。

    在上述的钩子函数当中，比较常用的有mounted和updated。注意mounted不会承诺所有的子组件也都一起被挂载。如果希望等到整个视图都渲染完毕，可以用vm.$nextTick替换掉mounted。如下所示：

    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来获取该方法。

    二、vue实例的简单方法

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

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

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

    <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')的效果。页面刚完成加载渲染的效果为：

    图片描述

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

    图片描述

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

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

    <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"。

    3、vm.$mount()

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

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

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

    上述两段代码的作用效果是一样的。

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

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

    5、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'。

    6、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})。但我们如果监视的是一个数组对象，则只需使用浅度监视即可监视到数组内部的元素数据是否发生了变化。

    三、自定义指令

    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>

    图片描述

    vue.js
    倩儿爱甜食
    477 声望62 粉丝

    一切都是最好的安排 ^-^ !

    « 上一篇
    vue2.0学习笔记（第三讲）（计算属性、过滤器）
    下一篇 »
    vue2.0学习笔记（第五讲）（vue-resource实现交互、基于vue制作仿百度智能提示搜索框）

    引用和评论

    推荐阅读
    头像
    前端自动化构建之Gulp的使用（学习笔记）

    倩儿爱甜食阅读 2.2k

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    头像
    Vue.js-方法与事件

    寒青赞 6阅读 3.2k

    头像
    Vue使用mixins

    一念赞 4阅读 2.7k

    头像
    这个前端神器，竟让滴滴、美团都爱不释手？！

    白水赞 4阅读 494评论 1

    头像
    使用基于 WebRTC 的 JavaScript API 在浏览器环境里调用本机摄像头

    注销赞 1阅读 1.7k评论 1

    头像
    推荐一个国产的 vue 中最好用的高性能表格 vxe-table grid 在线编辑表格，流畅渲染上万条数据

    激动个球赞 1阅读 892

    0 条评论
    得票最新