立即学习:https://edu.csdn.net/course/play/6823/135321?utm_source=blogtoedu
vue.directive自定义指令
先写一个简单的功能：
每点击一次按钮，则加一。
<div id="app">
<div v-Js="color">{{msg}}</div>
<button @click="add">ADD</button>
</div>
<script>
var app=new Vue({
el:'#app',
data:{
msg:1,
color:'red'
},
methods:{
add:function () {
this.msg++;
}
}
})
</script>现在自定义一个全局的指令，我们使用到Vue.directive();
<div v-Js="color">{{msg}}</div>
<button @click="add">ADD</button>Vue.directive('Js',function(el,binding,vnode){
el.style='color:'+binding.value;
})
var app=new Vue({
el:'#app',
data:{
msg:1,
color:'red'
},
methods:{
add:function () {
this.msg++;
}
}
})上述自定义指令的功能可以改变数字的颜色。
function中三个参数：
el:指令所绑定的元素，可以用来直接操作DOM。
binding:一个对象，包含指令的很多信息。(value,name,expression)
vnode:Vue编译生成的虚拟节点。
自定义指令的五个生命周期(钩子函数)：
bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作；
inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。
update:被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新;
componentUpdated:被绑定元素所在模板完成一次更新周期时调用;
unbind:只调用一次，指令与元素解绑时调用。
<div id="app">
<div v-Js="color">{{msg}}</div>
<button @click="add">ADD</button>
<button οnclick="unbind()">解绑</button>
</div>function unbind(){
app.$destroy();//解绑
}
Vue.directive('Js',{
bind:function(){//被绑定
console.log('1 - bind');
},
inserted:function(){//绑定到节点
console.log('2 - inserted');
},
update:function(){//组件更新
console.log('3 - update');
},
componentUpdated:function(){//组件更新完成
console.log('4 - componentUpdated');
},
unbind:function(){//解绑
console.log('1 - bind');
}
});
var app=new Vue({
el:'#app',
data:{
msg:1,
color:'red'
},
methods:{
add:function () {
this.msg++;
}
}
})新手一枚，若有不足，请指正！
