簡介
除了核心功能中我們可以直接使用的 v-show和v-model等，我們還可以進(jìn)行注冊自定義指令。
在vue2.0中躏救，代碼的復(fù)用和抽象的主要形式就是組件苛秕。
然而有的時(shí)候肌访，我們還是需要對底層的dom元素進(jìn)行操作。這時(shí)候就會(huì)需要用到自定義指令艇劫。
舉例如下：
當(dāng)頁面加載完畢時(shí)吼驶，輸入框自動(dòng)獲得焦點(diǎn)，注意：autofocus在移動(dòng)版的safari上不工作店煞。事實(shí)上蟹演，只要在你打開頁面后還沒有點(diǎn)擊任何內(nèi)容的情況下，這個(gè)輸入框就應(yīng)該是處于聚焦?fàn)顟B(tài)的顷蟀。我們現(xiàn)在嘗試使用指令來實(shí)現(xiàn)這個(gè)功能酒请。
// 注冊一個(gè)全局自定義指令 `v-focus`
Vue.directive('focus', {
// 當(dāng)被綁定的元素插入到 DOM 中時(shí)……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
如果想注冊局部指令，也可以在vue 的選項(xiàng)中新添加一項(xiàng) directives：
<template>
<div class="test">
<h2>vue practise</h2>
<input v-focus type="text" placeholder="hahahha">
</div>
</template>
<script>
export default{
data(){
return{
}
},
directives:{
focus:{
inserted(el){
el.focus();
}
}
}
}
</script>
這里是在指令 directives選項(xiàng)中設(shè)置指令的名稱鸣个，我們這里語義化的設(shè)置為focus羞反，在focus中執(zhí)行方法哮兰。所傳入的el參數(shù)就是當(dāng)前的元素。
然后你可以在模板中任何元素上使用新的 v-focus 屬性苟弛，如下：
<input v-focus>
鉤子函數(shù)
在 directives 指令選項(xiàng)中喝滞，可以定義如下幾個(gè)鉤子函數(shù)：
1.bind:只能夠調(diào)用一次，在指令剛被綁定到元素上的時(shí)候開始滴啊用膏秫，我們也可以用它在進(jìn)行一次性的初始化設(shè)置右遭。
2.inserted:被綁定的元素插入父節(jié)點(diǎn)的時(shí)候調(diào)用，只是保證父節(jié)點(diǎn)還存在缤削，但是不一定已經(jīng)被插入文檔中了窘哈。
3.update:所在的組件vnode更新時(shí)調(diào)用，但是可能發(fā)現(xiàn)在其子vnode更新之前亭敢，指令的值可能發(fā)生改變滚婉，但是你可以通過比較更新前后的值來忽略不必要的模板更新 (詳細(xì)的鉤子函數(shù)參數(shù)見下)。
4.componentUpdate:指令所在的組件和他的子組件全部更新之后執(zhí)行帅刀。
5.unbind:指定也只會(huì)執(zhí)行一次让腹，指令和他的元素解綁的時(shí)候調(diào)用。
接下來我們來看一下鉤子函數(shù)的參數(shù) (即 el扣溺、binding骇窍、vnode 和 oldVnode)。
鉤子函數(shù)的參數(shù)
指令的鉤子函數(shù)會(huì)被傳入以下的參數(shù)：
-
el：指令所綁定的元素锥余，可以用來直接操作 DOM 腹纳。 -
binding：一個(gè)對象，包含以下屬性：-
name：指令名驱犹，不包括v-前綴嘲恍。 -
value：指令的綁定值，例如：v-my-directive="1 + 1"中雄驹，綁定值為2佃牛。 -
oldValue：指令綁定的前一個(gè)值，僅在update和componentUpdated鉤子中可用荠医。無論值是否改變都可用吁脱。 -
expression：字符串形式的指令表達(dá)式桑涎。例如v-my-directive="1 + 1"中彬向，表達(dá)式為"1 + 1"。 -
arg：傳給指令的參數(shù)攻冷，可選娃胆。例如v-my-directive:foo中，參數(shù)為"foo"等曼。 -
modifiers：一個(gè)包含修飾符的對象里烦。例如：v-my-directive.foo.bar中凿蒜，修飾符對象為{ foo: true, bar: true }。
-
-
vnode：Vue 編譯生成的虛擬節(jié)點(diǎn)胁黑。移步 VNode API 來了解更多詳情废封。 -
oldVnode：上一個(gè)虛擬節(jié)點(diǎn)，僅在update和componentUpdated鉤子中可用丧蘸。
除了el之外漂洋，其他參數(shù)都是只讀的，一般不建議修改力喷。如果需要在鉤子函數(shù)之間共享數(shù)據(jù)刽漂，建議通過 dataset 來修改。
