vue学习笔记9 Vue.directive 自定义指令

<div v-laohan="font">元素</div>

需要在构造器外执行

Vue.directive('my',function(el,binding,vnode){

console.log(el) //<div>元素</div>

console.log(binding) //object

console.log(binding.name) //laohan

console.log(binding.expression)  //font

console.log(binding.value)   //red

 

el.style="color:"+binding.value

 

})

 

data:{

font:'red'

}

 

自定义指令有五个生命周期（也叫钩子函数）

bind inserted update componentUpdated unbind

 

bind  只调用一次 指令绑定到元素时调用

inserted 被绑定元素插入父节点时调用

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

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

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

 Vue.directive('laohan',{

  bind:function(){}

})