前端-VUE-指令directive

标签：插入   insert   创建   upd   前端   模板   忽略   通过   style   

指令创建
Vue.directive("hello",{
//bind 只调用一次，指令第一次绑定到元素时候调用
//el : 指令所绑定的元素，可以用来直接操作DOM
//binding: 一个对象，包含指令的很多信息
//vnode: VUE编译生成的虚拟节点
bind:function(el,bingind,vnode){
el.style["color"] = bingind.value;
console.log("1-bind");
},
//inserted:被绑定的元素插入父节点的时候调用(父节点存在即可调用，不必存在document中)
inserted:function(){
console.log("2-insert");
},
//update: 被绑定与元素所在模板更新时调用，而且无论绑定值是否有变化，通过比较更新前后的绑定值，忽略不必要的模板更新
update:function(){
console.log("3-update");
},
//componentUpdate :被绑定的元素所在模板完成一次更新更新周期的时候调用
componentUpdated:function(){
console.log(‘4 - componentUpdated‘);
},
//unbind: 只调用一次，指令月元素解绑的时候调用
unbind:function(){
console.log(‘5 - unbind‘);
}
})

指令使用：
<span v-hello="color3">testdirective</span>

前端-VUE-指令directive

标签：插入   insert   创建   upd   前端   模板   忽略   通过   style   

原文地址：https://www.cnblogs.com/xcc3306/p/13300231.html