這篇文章主要介紹了vue自定義指令directive有什么用，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

具體內(nèi)容如下所示：

官網(wǎng)截圖實(shí)例

vue除了一些核心的內(nèi)部定義的指令（v-model,v-if,v-for,v-show）外，vue也允許用戶注冊(cè)自己的一些功能性的指令，有時(shí)候你實(shí)在是要對(duì)Dom操作，這個(gè)時(shí)候是自定義指令最合適的了。

來直接看例子：當(dāng)頁面加載時(shí)使得元素獲得焦點(diǎn)（autofocus 在移動(dòng)版 Safari 是不支持的），就是當(dāng)頁面加載好了，不做任何的操作使得表單自動(dòng)獲得焦點(diǎn)，光標(biāo)自動(dòng)在某個(gè)表單上代碼如下：

Vue.directive('zsqfocus',{//注冊(cè)一個(gè)全局自定義指令`v-zsqfocus`，在main.js文件里
inserted:function(el){//當(dāng)被綁定的元素插入到DOM中時(shí)自動(dòng)調(diào)用
el.focus()//聚焦元素
}
})

如果想注冊(cè)局部指令，組件中也接受一個(gè) directives 的選項(xiàng)：

<script>
exportdefault{
directives:{//指令的定義
zsqfocus:{
inserted:function(el){//獲得焦點(diǎn)
el.focus()
}
}
}
}
</script>

然后你可以在模板中任何組件上使用新的 v-zsqfocus 屬性，如下：

<template>
<inputv-zsqfocus/>//調(diào)用
</template>

舉了一個(gè)跟官網(wǎng)一樣的例子，directives跟methods，mounted等是一個(gè)級(jí)別的可以同時(shí)使用。

PS：下面看下vue之自定義指令directive的實(shí)例代碼，具體代碼如下所示：

<template>
<div>
<inputv-model="dir1"v-my-directive1="dir1"/>　　　　<inputv-model="dir2"v-my-directive2="dir2"/>
</div>
</template>
<script>
exportdefault{
data(){
return{　　　　　　　　　dir1:'',　　　　　　　　　dir2:''
　　　　　　　}
},
directives:{　　　　　　　//直接綁定函數(shù)，作用等同于update,不做準(zhǔn)備工作和掃尾工作
myDirective1(val){
console.log(val)
},　　　　　　　myDirective2:{　　　　　　　　　　bind(){　　　　　　　　　　　　　//第一次綁定到元素的準(zhǔn)備工作　　　　　　　　　　},　　　　　　　　　　update(val，old){　　　　　　　　　　　　//在綁定到元素后立即以初始值第一次調(diào)用，然后每次example2變化都會(huì)調(diào)用update　　　　　　　　　　　　console.log(val)　　　　　　　　　　},　　　　　　　　　　　　unbind(){　　　　　　　　　　　　//銷毀前的清理工作　　　　　　　　　　}　　　　　　　}
}
}
</script>

總結(jié)

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

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