生命周期
- 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>