一不撑、用法：注冊或獲取全局指令
Vue.directive(id,[definition])
除了核心功能默認(rèn)內(nèi)置的指令 (v-model 和 v-show)怪嫌，Vue 也允許注冊自定義指令扑毡。注意有送，在 Vue2.0 中淌喻，代碼復(fù)用和抽象的主要形式是組件。然而雀摘，有的情況下裸删，你仍然需要對普通 DOM 元素進(jìn)行底層操作，這時(shí)候就會用到自定義指令阵赠。
二涯塔、鉤子函數(shù):
一個(gè)指令定義對象可以提供如下幾個(gè)鉤子函數(shù)(均為可選)：
bind: 只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用清蚀。在這里可以進(jìn)行一次性的初始化設(shè)置匕荸。
inserted:被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用(僅保證父節(jié)點(diǎn)存在，但不一定已被插入文檔中)枷邪。
update:所在組件的vNode更新時(shí)調(diào)用榛搔，但是可能發(fā)生在其子vNode更新之前。指令的值可能發(fā)生了改變东揣，也可能沒有践惑。但是你可以通過比較更新前后的值來忽略不必要的模板更新。
componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用嘶卧。
unbind：：只調(diào)用一次尔觉，指令與元素解綁時(shí)調(diào)用。
// 注冊
Vue.directive('my-directive',{
bind: function () {},
inserted: function () {},
update: function () {},
componentUpdated: function () {},
unbind: function() {}
})
鉤子函數(shù)參數(shù):
image.png
使用property的自定義鉤子樣例：
<template>
<div class="content">
<div id="hook-arguments-example" v-demo:foo.a.b="message"></div>
</div>
</template>
<script>
export default {
name: 'Content',
data(){
return{
message: 'hello!'
}
},
directives: {
demo:{
bind: function (el, binding, vnode) {
var s = JSON.stringify
el.innerHTML =
'name: ' + s(binding.name) + '<br>' +
'value: ' + s(binding.value) + '<br>' +
'expression: ' + s(binding.expression) + '<br>' +
'argument: ' + s(binding.arg) + '<br>' +
'modifiers: ' + s(binding.modifiers) + '<br>' +
'vnode keys: ' + Object.keys(vnode).join(', ')
}
}
}
}
</script>
頁面顯示：
image.png
三脸候、快速使用-----獲取input框的焦點(diǎn)：
1.全局指令
在main.js總注冊：
Vue.directive('focus',{
// 當(dāng)綁定元素插入到 DOM 中
inserted: function(el) {
el.focus();
}
})
new Vue({
router,
store,
render: h => h(App),
}).$mount('#app')
頁面引入：
<template>
<div class="content">
<input type="text" v-focus/>
</div>
</template>
2.局部指令
<template>
<div class="content">
<input type="text" v-focus/>
</div>
</template>
<script>
export default {
name: 'Content',
directives: {
focus: {
// 指令的定義
inserted: function(el) {
el.focus();
}
}
}
}
</script>
