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

上一篇: vue总结系列--数据驱动和响应式下一篇:前端面试系列之目录

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

发布时间：2019-05-16 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了vue2.0学习笔记（第四讲）（生命周期函数、vue实例的简单方法、自定义指令），脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

一、生命周期函数

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

beforeCreate
该函数在实例对象刚被创建，还没有绑定属性时触发执行。
created
该函数在实例对象完成创建和属性绑定，但是DOM还未生成（$el属性还不存在）时触发执行。
beforeMount
该函数在组件挂载之前触发执行。
mounted
该函数在组件挂载完成之后触发执行。（相当于于vue1.x当中的compiled和ready）
beforeUpdate
该函数在组件数据更新之前触发执行。
updated
该函数在组件数据更新完毕之后触发执行。
beforeDestroy
该函数在实例对象销毁之前触发执行。
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')的效果。页面刚完成加载渲染的效果为：

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

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

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

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>

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

可接收参数的自定义指令定义为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>

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

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

<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实例的简单方法、自定义指令）

脚本宝典总结

以上是脚本宝典为你收集整理的vue2.0学习笔记（第四讲）（生命周期函数、vue实例的简单方法、自定义指令）全部内容，希望文章能够帮你解决vue2.0学习笔记（第四讲）（生命周期函数、vue实例的简单方法、自定义指令）所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：Vue

上一篇: vue总结系列--数据驱动和响应式下一篇:前端面试系列之目录

猜你在找的Vue.js相关文章

Vue 3.0 风格指南 2024-10-19
Vue-SuperSlide(SuperSlide component for Vue) 2019-05-07
基于vue2.0的weex实践（前端视角） 2019-05-07
手把手教你写 Vue UI 组件库@vue2.0 2019-05-07
解决vue报错Failed to mount component 2019-05-07
Vue学习笔记之vue-cli项目搭建及解析 2019-05-07
Vue.js—单元测试 2019-05-07
vue2.0脚手架的安装和项目搭建 2019-05-07
Vue经典开源项目汇总demo实例github下载教程 2018-12-04
使用Vue.js构建Wordpress Gutenberg块 2018-11-17

全站导航更多

最新Vue.js教程

热门Vue.js教程