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