可以使用Vue.directive( dir_name , {} ) 來定義全局自定義指令
也可以使用 directives{ dir_name : {} } 來定義局部自定義指令
鈎子函數 :
bind
只調用一次, 當指令第一次綁定在元素上時.
用來做一次性初始化操作.
inserted
當綁定元素已插入到父節點時調用.
也就是說 必定存在父節點.
但是 它 及它的父節點 未必存在文檔中.
update
在包含該組件的VNode更新后調用該函數.
可能在其子級更新前調用.
指令的值可能已更改,可能未更改.最好通過判斷新舊值來過濾掉不必要的操作.
componentUpdated
在包含該組件的VNode 以及 其子節點的VNodes已更新之后 調用.
unbind
指定從元素上解綁時,調用一次.
鈎子函數參數 :
- el
綁定了該指令的元素.
可以直接操作DOM元素.
- binding ( 包含以下屬性 )
-
- name
刨除’v-'前綴的指令名
- value
傳遞給指令的值. e.g. v-s="1+1", value就是2
- oldValue
舊值 , 只在 鈎子函數 update 以及 componentUpdated 中可用.
無論值是否改變都可用
- expression
表達式的字符串形式.
- arg
傳遞給指令的參數 . e.g. v-s:foo , arg就是 foo
- modifiers
包含修飾符的對象.e.g. v-s.a.b 意味着 modifiers 為 {a : true , b:true}
- vnode
vue編譯器提供的虛擬節點對象. 詳見 VNode API
- oldVnode
之前的虛擬節點對象. 只在鈎子函數 update 和 componentUpdated 中可用.
注意 :
這些參數中, 除了 el 以外 , 其他參數都看做是只讀參數.即不要修改它們.
如果 需要跨鈎子 使用它們, 建議使用 dataset 來實現.
指令的參數的值 可以是動態的:
<p v-track:left="[dyLeft]"> some text </p>
data(){
return {
dyLeft : 500
}
}
函數簡寫:
由於我們多數情況下 只關注 bind 以及 update , 因此可以這樣簡寫 :
Vue.directive('xxx-xxx' , function( el , binding ) {
el.style.backgroundColor = binding.value ;
})
對象字面量:
當指令需要多個值的時候 , 可以傳入一個 javascript 對象字面量 .
當然 , 指令可以接受任何合法的 javascript 表達式.
<div v-demo="{color:’white’ , text : 'hello!'}"
Vue.directive('demo' , function (el , binding){
console.log(binding.value.color , binding.value.text);
})