vue自定义指令directives使用及生命周期
生命周期
- bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
- inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。
- update:被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
- componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
- unbind:只调用一次，指令与元素解绑时调用。
<div>
<button @click="handleClick">clickMe</button>
<h1 v-if="count < 6" v-change="count">it is a custom directive</h1>
<div>
<script>
new Vue({
el: '#app',
data: {
msg: 'Hello Vue',
name: 'Michael',
count: 0
},
directives: {
change: {
componentUpdated: function (el, bindings) {
console.log('指令已经绑定到元素了');
console.log(el);
console.log(bindings);
//准备将传递来的参数
// 显示在调用该指令的元素的innerHTML
el.innerHTML = bindings.value;
if (bindings.value > 3) {
el.style.color = 'red'
}
},
update: function (el, bindings) {
console.log('指令的数据有所变化');
console.log(el);
console.log(bindings);
el.innerHTML = bindings.value;
if (bindings.value == 5) {
console.log(' it is a test');
}
},
// unbind: function () {
// console.log('解除绑定了');
// }
}
});
</script>