vue自定義指令directives使用及生命週期

生命週期

1. bind:只調用一次，指令第一次綁定到元素時調用，用這個鉤子函數能夠定義一個綁定時執行一次的初始化動做。
2. inserted:被綁定元素插入父節點時調用（父節點存在便可調用，沒必要存在於document中）。
3. update:被綁定於元素所在的模板更新時調用，而不管綁定值是否變化。經過比較更新先後的綁定值，能夠忽略沒必要要的模板更新。
4. componentUpdated:被綁定元素所在模板完成一次更新週期時調用。
5. 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>