Vue進階（九十一）：自定義指令
除了核心功能默認內置的指令 (v-model 和 v-show)，Vue 也允許注冊自定義指令。有的情況下，對普通 DOM 元素進行底層操作，這時候就會用到自定義指令。
如何聲明自定義指令？
就像vue中有全局組件和局部組件一樣，他也分全局自定義指令和局部自定義指令。
let Opt = { bind:function(el,binding,vnode){ }, inserted:function(el,binding,vnode){ }, update:function(el,binding,vnode){ }, componentUpdated:function(el,binding,vnode){ }, unbind:function(el,binding,vnode){ }, }
1
2
3
4
5
6
7
對于全局自定義指令的創建，我們需要使用 Vue.directive接口
Vue.directive('demo', Opt)
1
在單獨JS文件demoDirective.js中定義好以上自定義指令后，然后在main.js入口文件中加以引入即可，
import './directive/demoDirective.js'
1
接下來即可在需要應用的組件中應用，應用示例如下所示：
1
對于局部組件，我們需要在組件的鉤子函數directives中進行聲明
Directives: { Demo:Opt }
1
2
3
Vue中的指令可以簡寫，上面Opt是一個對象，包含了5個鉤子函數，我們可以根據需要只寫其中幾個函數。如果你想在 bind 和 update 時觸發相同行為，而不關心其它的鉤子，那么你可以將Opt改為一個函數。
let Opt = function(el,binding,vnode){ }
1
下面定義了一個v-test指令綁定數據name。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
我們可以全局自定義一個指令v-red，來修改HTML元素的背景色為紅色:
hello welcome
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
鉤子函數
一個指令定義對象可以提供如下幾個鉤子函數 (均為可選)：
inserted：被綁定元素插入父節點時調用 (僅保證父節點存在，但不一定已被插入文檔中)。
bind：只調用一次，指令第一次綁定到元素時調用。在這里可以進行一次性的初始化設置。
update：所在組件的 VNode 更新時調用，但是可能發生在其子 VNode 更新之前。指令的值可能發生了改變，也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新 (詳細的鉤子函數參數見下)。
componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調用。
unbind：只調用一次，指令與元素解綁時調用。
指令鉤子函數會被傳入以下參數：
el：指令所綁定的元素，可以用來直接操作 DOM 。
binding：一個對象，包含以下屬性：
name：指令名，不包括 v- 前綴。
value：指令的綁定值，例如：v-my-directive=“1 + 1” 中，綁定值為 2。
oldValue：指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。
expression：字符串形式的指令表達式。例如 v-my-directive=“1 + 1” 中，表達式為 “1 + 1”。
arg：傳給指令的參數，可選。例如 v-my-directive:foo 中，參數為 “foo”。
modifiers：一個包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象為 { foo: true, bar: true }。
vnode： Vue編譯生成的虛擬節點。移步 VNode API 來了解更多詳情。
oldVnode：上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用。
Vue
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
相關文章
