Vue.directive自定义指令

v-if用来判断是否加载html的DOM，比如我们模拟一个用户登录状态，在用户登录后现实用户名称。

v-show调整css中display属性，DOM已经加载，只是CSS控制没有显示出来。v-if和v-show的区别：

·      v-if：判断是否加载，可以减轻服务器的压力，在需要时加载。

·      v-show：调整css dispaly属性，可以使客户端操作更加流畅。

Vue.directive自定义指令：该指令可以写一个自定义的事件

自定义指令中传递的三个参数

el: 指令所绑定的元素，可以用来直接操作DOM。

binding: 一个对象，包含指令的很多信息。

vnode: Vue编译生成的虚拟节点。

自定义指令的生命周期

自定义指令有五个生命周期（也叫钩子函数），分别是 bind,inserted,update,componentUpdated,unbind

1.     bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。

2.     inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。

3.     update:被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。

4.     componentUpdated:被绑定元素所在模板完成一次更新周期时调用。

5.     unbind:只调用一次，指令与元素解绑时调用。

< div id= "app" >

< div id= "app" >

< div v-my= "color" id= "demo" >

{{num}}

div >

< div >

< button @ click= "add" >Add button >

div >

div >

div >

< p >

< button onclick= "unbind()" >unbind button >

p >

function unbind() {

app. $destroy(); //解除绑定

}

//el 代表divdom元素

//binding代表自定义指令

//vnode代表自定义指令

Vue. directive( 'my', {

// el.style = 'color:' + binding.value;

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( '5 - unbind');

}});

var app = new Vue({

el: '#app',

data: {

num: 10,

color: "red"

},

methods: {

add : function () {

this. num++;

}

}

})

分别点击add和unbind按钮后