vue自定義指令directive實(shí)例詳解
下面給大家介紹vue自定義指令directive，具體內(nèi)容如下所示：
官網(wǎng)截圖實(shí)例
vue除了一些核心的內(nèi)部定義的指令（v-model,v-if,v-for,v-show）外，vue也允許用戶注冊(cè)自己的一些功能性的指令，有時(shí)候你實(shí)在是要對(duì)Dom操作，這個(gè)時(shí)候是自定義指令最合適的了。
來(lái)直接看例子：當(dāng)頁(yè)面加載時(shí)使得元素獲得焦點(diǎn)（autofocus 在移動(dòng)版 Safari 是不支持的），就是當(dāng)頁(yè)面加載好了，不做任何的操作使得表單自動(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>
export default {
directives: { // 指令的定義
zsqfocus: {
inserted: function (el) { // 獲得焦點(diǎn)
el.focus()
}
}
}
}
</script>
然后你可以在模板中任何組件上使用新的 v-zsqfocus 屬性，如下：
<template> <input v-zsqfocus /> //調(diào)用 </template>
舉了一個(gè)跟官網(wǎng)一樣的例子，directives跟methods，mounted等是一個(gè)級(jí)別的可以同時(shí)使用。
PS：下面看下vue之自定義指令directive的實(shí)例代碼，具體代碼如下所示：
<template>
<div>
<input v-model="dir1" v-my-directive1="dir1"/> <input v-model="dir2" v-my-directive2="dir2"/>
</div>
</template>
<script>
export default {
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實(shí)例詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了vue中為何方法要寫(xiě)在methods的里面，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue項(xiàng)目刷新當(dāng)前頁(yè)面的三種方法
這篇文章主要介紹了vue項(xiàng)目刷新當(dāng)前頁(yè)面的三種方法，本文圖文并茂給大家介紹的非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-12-12
Babel是一個(gè)JS編譯器,主要作用是將ECMAScript2015+ 版本的代碼,轉(zhuǎn)換為向后兼容的JS語(yǔ)法,以便能夠運(yùn)行在當(dāng)前和舊版本的瀏覽器或其它環(huán)境中,下面這篇文章主要給大家介紹了關(guān)于Vue中babel.config.js配置詳解的相關(guān)資料,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了vue3中ref綁定dom或者組件失敗的原因及分析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了Vue中Quill富文本編輯器的使用教程，包括自定義工具欄、自定義字體選項(xiàng)、圖片拖拽上傳、圖片改變大小等使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-09-09
Vue 應(yīng)用中結(jié)合vux使用微信 jssdk的方法
今天小編就為大家分享一篇Vue 應(yīng)用中結(jié)合vux使用微信 jssdk的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
前端vue如何監(jiān)聽(tīng)對(duì)象或者數(shù)組某個(gè)屬性的變化詳解
這篇文章主要給大家介紹了關(guān)于前端vue如何監(jiān)聽(tīng)對(duì)象或者數(shù)組某個(gè)屬性的變化的相關(guān)資料,在Vue中你可以使用watch或者computed來(lái)監(jiān)聽(tīng)對(duì)象或數(shù)組某個(gè)屬性的變化,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03
使用vuex較為優(yōu)雅的實(shí)現(xiàn)一個(gè)購(gòu)物車功能的示例代碼
這篇文章主要介紹了使用vuex較為優(yōu)雅的實(shí)現(xiàn)一個(gè)購(gòu)物車功能的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
vue使用keep-alive保持滾動(dòng)條位置的實(shí)現(xiàn)方法
這篇文章主要介紹了vue使用keep-alive保持滾動(dòng)條位置的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Vue自定義指令實(shí)現(xiàn)彈窗拖拽四邊拉伸及對(duì)角線拉伸效果
小編最近在做一個(gè)vue前端項(xiàng)目，需要實(shí)現(xiàn)彈窗的拖拽，四邊拉伸及對(duì)角線拉伸，以及彈窗邊界處理功能，本文通過(guò)實(shí)例代碼給大家分享我的實(shí)現(xiàn)過(guò)程及遇到問(wèn)題解決方法，感興趣的朋友一起看看吧2021-08-08