Vue除了內部指令，我們也可以定義一些屬于自己的指令，比如我們要定義一個v-diy的指令，作用就是讓文字變成紅色。

寫好了這個功能，我們現在就自己定義一個全局的指令。我們這里使用Vue.directive( );

html

<div v-diy="color">{{message}}</div>

js

Vue.directive('diy',function(el,binding,vnode){ el.style='color:'+binding.value;}); var vm = new Vue({el:"#app",data:{message:1,color:"red"} })

?

自定義指令中傳遞的三個參數

el: 指令所綁定的元素，可以用來直接操作DOM。binding: 一個對象，包含指令的很多信息。vnode: Vue編譯生成的虛擬節點。

自定義指令的生命周期

自定義指令有五個生命周期（也叫鉤子函數），分別是 bind,inserted,update,componentUpdated,unbind

具體如下

1.bind:只調用一次，指令第一次綁定到元素時調用，用這個鉤子函數可以定義一個綁定時執行一次的初始化動作。
2.inserted:被綁定元素插入父節點時調用（父節點存在即可調用，不必存在于document中）。
3.update:被綁定于元素所在的模板更新時調用，而無論綁定值是否變化。通過比較更新前后的綁定值，可以忽略不必要的模板更新。
4.componentUpdated:被綁定元素所在模板完成一次更新周期時調用。
5.unbind:只調用一次，指令與元素解綁時調用。
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('1 - bind');}

?

轉載于:https://www.cnblogs.com/Model-Zachary/p/6940923.html

總結

以上是生活随笔為你收集整理的Vue.directive自定义指令的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。