一、自定義指令基本用法
Vue 中已有的指令往往不能滿足我們開發(fā)過程中的全部要求雾棺，因此有時(shí)我們需要自定義一些指令來實(shí)現(xiàn)某些特有的功能伐坏。
和組件類似掠廓，自定義指令也分為全局注冊(cè)和局部注冊(cè)，二者區(qū)別就是把component 換成了 directive苔严。例：
Vue.directive('指令名稱', {
// 指令的選項(xiàng)
});
二定枷、鉤子函數(shù)
Vue 提供了幾個(gè)鉤子函數(shù)作為自定義指令的選項(xiàng)：
-
bind：只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用届氢。用這個(gè)鉤子函數(shù)可以定義一個(gè)在綁定時(shí)執(zhí)行一次的初始化動(dòng)作欠窒。 -
inserted：被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用（父節(jié)點(diǎn)存在即可調(diào)用，不必存在于document中）退子。 -
update：被綁定元素所在的模板更新時(shí)調(diào)用岖妄，而不論綁定值是否變化。通過比較更新前后的綁定值絮供，可以忽略不必要的模板更新（詳細(xì)的鉤子函數(shù)參數(shù)見下）衣吠。 -
componentUpdated：被綁定元素所在模板完成一次更新周期時(shí)調(diào)用。 -
unbind：只調(diào)用一次壤靶， 指令與元素解綁時(shí)調(diào)用缚俏。
三、鉤子函數(shù)的參數(shù)
-
el：指令所綁定的元素贮乳，可以用來直接操作 DOM 忧换。
<div id="app">
獲取焦點(diǎn)：<input type="text" v-focus> <br>
</div>
<script>
// 需求：input 框在初始化時(shí)就獲取焦點(diǎn)
Vue.directive('focus', {
// 指令的選項(xiàng)
inserted: function(el){ // 插入到父節(jié)點(diǎn)時(shí)就調(diào)用
el.focus()
}
});
var app = new Vue({
el: "#app",
})
</script>
-
binding：一個(gè)對(duì)象，包含以下屬性：
---name：指令名向拆，不包括v-- 前綴亚茬。
---value：指令的綁定值， 例如v-apple="1 + 1",value的值是2浓恳。
---oldValue：指令綁定的前一個(gè)值刹缝，僅在update和componentUpdated鉤子中可用，無論值是否改變都可用颈将。
---expression：綁定值的字符串形式梢夯。 例如v-apple="1 + 1"，expression的值是1 + 1晴圾。
---arg：傳遞給指令的參數(shù)颂砸。例如v-apple:pear，arg的值是pear。
---modifiers：一個(gè)包含修飾符的對(duì)象人乓。 例如v-apple:pear.a.b.c勤篮，修飾符對(duì)象modifiers的值是{"a":true,"b":true,"c":true}。
<div id="app">
<!-- 自定義指令 -->
<div v-apple:pear.a.b.c="red"></div>
</div>
<script>
Vue.directive('apple', {
bind: function(el, binding){
el.innerHTML =
'name' + ' --- ' + binding.name + '<br>' +
'value' + ' --- ' + binding.value + '<br>' +
'expression' + ' --- ' + binding.expression + '<br>' +
'argument' + ' --- ' + binding.arg + '<br>' +
'modifiers' + ' --- ' + JSON.stringify(binding.modifiers) + '<br>'
}
});
var app = new Vue({
el: "#app",
data: {
red: '我是自定義指令所綁定的值'
}
})
</script>
自定義指令 --- binding
-
vnode：Vue 編譯生成的虛擬節(jié)點(diǎn)色罚。
<div id="app">
<div v-apple:pear.a.b.c="red"></div>
</div>
<script>
Vue.directive('apple', {
bind: function(el, binding, vnode){
var keys = [];
for(var key in vnode){
keys.push(key)
};
el.innerHTML =
'vnode 中的 keys：' + keys.join("--") + '<br>'
}
});
var app = new Vue({
el: "#app",
data: {
red: '我是自定義指令所綁定的值'
}
})
</script>
自定義指令 --- vnode
-
oldVnode: 上一個(gè)虛擬節(jié)點(diǎn)碰缔，僅在update和componentUpdated鉤子中可用。
