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>