vue中自定義指令(directive)的基本使用方法
前言
在vue項目中我們經常使用到 v-show ,v-if,v-for等內置的指令,除此之外vue還提供了非常方便的自定義指令,供我們對普通的dom元素進行底層的操作。使我們的日常開發(fā)變得更加方便快捷。本文就來總結一下自定義指令的使用方法及常用的場景。
正文
1.全局注冊
這里全局注冊一個指令,用于使用該指令的元素加一個紅色邊框,通過指令操作樣式。
<div id="app"> <h1 type="text" v-red>我是h1元素</h1> <div v-red>我是div元素</div> <p v-red>我是p元素</p><br> <input type="text" v-red><br> </div> <script> Vue.directive("red", { // 指令的定義 inserted: function (el) { console.log(111); el.style.border = "1px solid red" } }) new Vue({ el: "#app", data() { return { } }, methods: { } }) </script>
運行結果如下:
上面的代碼中通過 Vue.directive 方法注冊了一個全局的指令,該函數接收兩個參數,第一個參數為指令名稱,在元素中通過 " v-名稱 " 綁定元素,第二個參數為對綁定元素進行處理的鉤子函數,后面會有詳細介紹。
2.局部注冊
和全局注冊指令基本一樣,只是作用范圍不同而已,這里在組件內部注冊一個自定義指令用于給組件內部的綁定元素設置藍色邊框。
<div id="app"> <border-item></border-item> </div> <script> Vue.directive("red", { // 指令的定義 inserted: function (el) { console.log(111); el.style.border = "1px solid red" } }) // 定義子組件 Vue.component("border-item", { directives: { blue: { // 指令的定義 inserted: function (el) { el.style.border = "1px solid blue" } } }, template: `<div> <h1 v-blue>我是子組件h1元素</h1> <div v-blue>我是子組件div元素</div> <p v-blue>我是子組件p元素</p><br> 子組件<input type="text" v-blue><br> <p v-blue>我是子組件h1元素,我同時使用了全局和局部自定義指令</p> </div>` }) new Vue({ el: "#app", data() { return { } }, methods: { } }) </script>
運行結果如下:
通過上面的代碼,在子組件內部通過 directives 對象注冊了一個給綁定元素設置藍色邊框的組件,該對象中傳入鍵值對,其中鍵表示指令名稱,通過" v-名稱 "使用,其值對應一個對象,對象內部為指令的相關鉤子函數。后面詳解鉤子函數。
注意:當同一個元素及使用了全局指令和局部指令對統(tǒng)一屬性進行操作的時候,會優(yōu)先使用局部自定義指令,這里采用就近原則,局部指令會優(yōu)先于全局指令對統(tǒng)一屬性操作的調用。
3.鉤子函數及參數設置
看了上面的介紹我們值都了directive的用法,但是里面的鉤子函數還需要清楚,只有明白了鉤子函數的調用時機,才能定義出更加完美的指令。
一個指令定義對象可以提供如下幾個鉤子函數(均為可選):
* bind:只調用一次,指令第一次綁定到元素時調用。在這里可以進行一次性的初始化設置。
* inserted:被綁定元素插入父節(jié)點時調用(僅保證父節(jié)點存在,但不一定已被插入文檔中)。
* update:所在組件的VNode更新時調用,但是可能發(fā)生在其子VNode更新之前。指令的值可能發(fā)生了改變,也可能沒有。但是你可以通過比較更新前后 的值來忽略不必要的模板更新(詳細的鉤子函數參數見下)。
* componentUpdated:指令所在組件的VNode及其子VNode全部更新后調用。
* unbind:只調用一次,指令與元素解綁時調用。
鉤子函數參數指令鉤子函數會被傳入以下參數:
* el:指令所綁定的元素,可以用來直接操作DOM?! ?/p>
* binding:一個對象,包含以下property:
* name:指令名,不包括v-前綴?! ?/p>
* value:指令的綁定值,例如:v-my-directive="1+1"中,綁定值為2。
* oldValue:指令綁定的前一個值,僅在update和componentUpdated鉤子中可用。無論值是否改變都可用?! ?/p>
* expression:字符串形式的指令表達式。例如v-my-directive="1+1"中,表達式為"1+1"?! ?/p>
* arg:傳給指令的參數,可選。例如v-my-directive:foo中,參數為"foo"。
* modifiers:一個包含修飾符的對象。例如:v-my-directive.foo.bar中,修飾符對象為{foo:true,bar:true}?! ?/p>
* vnode:Vue編譯生成的虛擬節(jié)點?! ?/p>
* oldVnode:上一個虛擬節(jié)點,僅在update和componentUpdated鉤子中可用。
4.靈活用法
(1)動態(tài)指令參數
指令的參數可以是動態(tài)的。例如,在v-mydirective:[argument]="value"中,argument參數可以根據組件實例數據進行更新!這使得自定義指令可以在應用中被靈活使用。下面例子中分別設置指令實現(xiàn)元素的邊框綁定和元素的背景屬性綁定。
<div id="app"> <h1 v-border="redBorder">我是動態(tài)指令參數的元素1</h1> <h1 v-color:[pro]="redBg">我是動態(tài)指令參數的元素2</h1> </div> <script> Vue.directive("border", { bind: function (el, binding, vnode) { console.log("el", el); console.log("binding", binding); console.log("vnode", vnode); el.style.border = binding.value } }) Vue.directive("color", { bind: function (el, binding, vnode) { console.log("el", el); console.log("binding", binding); console.log("vnode", vnode); el.style[binding.arg] = binding.value } }) new Vue({ el: "#app", data() { return { redBorder: "1px solid red", pro: "backgroundColor", redBg: "green" } }, methods: { } }) </script>
運行結果如下:
順便看下打印的參數:
上面的代碼中通過兩種方式介紹了動態(tài)參數自定義指令的方法,使用十分靈活,根據實際需要選擇合適的方式。
(2)函數簡寫方式
在很多時候,你可能想在bind和update時觸發(fā)相同行為,而不關心其它的鉤子。比如這樣寫:
Vue.directive("border", function (el, binding, vnode) { el.style.border = binding.value } )
(3)對象字面量方式
在綁定自定義指令的元素紅傳入一個對象的格式的數據,然后在函數簡寫方式中使用。
<div id="app"> <h1 v-color="{ color: 'red', text: 'hello!' }">我是對象字面量形式</h1> </div> <script> // 對象字面量 Vue.directive('color', function (el, binding) { console.log(binding.value.color) // => "red" console.log(binding.value.text) // => "hello!" el.style.color = binding.value.color el.innerHTML = binding.value.text }) new Vue({ el: "#app", data() { return { } }, methods: { } }) </script>
運行結果如下:
5.使用場景
除了上面的使用場景外,比如我們在項目中通過自定義指令來控制一個前端頁面的權限問題,在指令中設置一個參數,當頁面加載或者提交事件觸發(fā)的時候,首先執(zhí)行該自定義指令的事件,去請求校驗是否有這個權限,做出相應的操作。使用的地方還有好多,需要在項目中不斷練習,可能有別的替代的方法而不被運用,這就需要我們不斷去學習鞏固這些基礎知識,應用最優(yōu)的解決方法去完成項目。
寫在最后
到此這篇關于vue中自定義指令(directive)的基本使用方法的文章就介紹到這了,更多相關vue自定義指令directive使用內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
Vue v2.4中新增的$attrs及$listeners屬性使用教程
這篇文章主要給大家介紹了關于Vue v2.4中新增的$attrs及$listeners屬性的使用方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧。2018-01-01vue.js 1.x與2.0中js實時監(jiān)聽input值的變化
這篇文章主要介紹了vue.js 1.x與vue.js2.0中js實時監(jiān)聽input值的變化的相關資料,文中介紹的非常詳細,對大家具有一定的參考價值,需要的朋友們下面來一起看看吧。2017-03-03vue-router實現(xiàn)簡單vue多頁切換、嵌套路由、路由跳轉的步驟和報錯
最近學習到VUE路由這塊,發(fā)現(xiàn)這塊知識點有點多,好容易混亂,這篇文章主要介紹了vue-router實現(xiàn)簡單vue多頁切換、嵌套路由、路由跳轉的步驟和報錯的相關資料,需要的朋友可以參考下2024-05-05vue實現(xiàn)導出word文檔功能實例(含多張圖片)
項目需要導出word,于是乎又是查閱資料,然后自己寫,下面這篇文章主要給大家介紹了關于vue實現(xiàn)導出word文檔功能(含多張圖片)的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-09-09