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

寫好了這個(gè)功能，我們現(xiàn)在就自己定義一個(gè)全局的指令。我們這里使用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"} })

?

自定義指令中傳遞的三個(gè)參數(shù)

el: 指令所綁定的元素，可以用來(lái)直接操作DOM。binding: 一個(gè)對(duì)象，包含指令的很多信息。vnode: Vue編譯生成的虛擬節(jié)點(diǎn)。

自定義指令的生命周期

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

具體如下

1.bind:只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用，用這個(gè)鉤子函數(shù)可以定義一個(gè)綁定時(shí)執(zhí)行一次的初始化動(dòng)作。
2.inserted:被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用（父節(jié)點(diǎn)存在即可調(diào)用，不必存在于document中）。
3.update:被綁定于元素所在的模板更新時(shí)調(diào)用，而無(wú)論綁定值是否變化。通過比較更新前后的綁定值，可以忽略不必要的模板更新。
4.componentUpdated:被綁定元素所在模板完成一次更新周期時(shí)調(diào)用。
5.unbind:只調(diào)用一次，指令與元素解綁時(shí)調(diào)用。
bind:function(){//被綁定console.log('1 - bind');},inserted:function(){//綁定到節(jié)點(diǎn)console.log('2 - inserted');},update:function(){//組件更新console.log('3 - update');},componentUpdated:function(){//組件更新完成console.log('4 - componentUpdated');},unbind:function(){//解綁console.log('1 - bind');}

?

轉(zhuǎn)載于:https://www.cnblogs.com/Model-Zachary/p/6940923.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。