Vue.directive指令(自定义指令) 生命周期

7 min read

Vue.directive指令(自定义指令) 生命周期

bind 只调用一次,指令第一次绑定到元素时候调用,用这个钩子可以定义一个绑定时执行一次的初始化动作。
 
inserted:被绑定的元素插入父节点的时候调用(父节点存在即可调用,不必存在document中)
 
update: 被绑定于元素所在模板更新时调用,而且无论绑定值是否有变化,通过比较更新前后的绑定值,忽略不必要的模板更新
 
componentUpdate :被绑定的元素所在模板完成一次更新更新周期的时候调用
 
unbind: 只调用一次,指令与元素解绑的时候调用
Vue.directive("hello",{
        bind:function(el,bingind,vnode){
            //只调用一次,指令第一次绑定到元素时候调用,                  
            //用这个钩子可以定义一个绑定时执行一次的初始化动作。
            el.style["color"] = bingind.value;
            console.log("1-bind");
        },
        inserted:function(){
            //被绑定的元素插入父节点的时候调用(父节点存在即可调用,不必存在document中)
            console.log("2-inserted");
        },
        update:function(){
            //被绑定于元素所在模板更新时调用,而且无论绑定值是否有变化
            //通过比较更新前后的绑定值,忽略不必要的模板更新
            console.log("3-update");
        },
        componentUpdated:function(){
            //被绑定元素所在模板完成一次更新周期时调用
            console.log('4 - componentUpdated');
        },
        unbind:function(){
            //只调用一次,指令与元素解绑时调用。
            console.log('5 - unbind');
        }
    })

vue 如何在自定义指令中调用this

函数里面第三个参数vnode 它的vnode.context就是当前的vm实例,你可以访问它