一、全局指令:
v-model 和 v-show 是系統默認的指令,除此外,我們還可以使用 Vue.directive 註冊一個全局指令 v-myfocus, 使input元素自動獲得焦點:
<template>
<div id="hello">
<p>使 input 元素默認獲取焦點:</p>
<input v-myfocus>
</div>
</template>
<script>
import Vue from "vue";
Vue.directive('myfocus',{
inserted:function (ele) {
ele.focus();
}
})
export default {
ele: 'hello',
data(){
return{
total:0
}
}
}
</script>
二、局部指令:
還可以使用如下方式註冊局部指令(複數形式 directives):
export default {
ele: 'hello',
directives:{
myfocus:{
inserted:function (ele) {
ele.focus();
}
}
}
}
三、鉤子函數:
指令定義函數提供了幾個可選的鉤子函數以及相關參數:
鉤子函數:
bind: 只調用一次,指令第一次綁定到元素時調用,用這個鉤子函數可以定義一個在綁定時執行一次的初始化動作。
inserted: 被綁定元素插入父節點時調用(父節點存在即可調用,不必存在於 document 中)。
update: 被綁定元素所在的模板更新時調用,而不論綁定值是否變化。通過比較更新前後的綁定值,可以忽略不必要的模板更新(詳細的鉤子函數參數見下)。
componentUpdated: 被綁定元素所在模板完成一次更新週期時調用。
unbind: 只調用一次, 指令與元素解綁時調用。
鉤子函數參數:
el: 指令所綁定的元素,可以用來直接操作 DOM 。
binding: 一個對象,包含以下屬性:
name: 指令名,不包括 v- 前綴。
value: 指令的綁定值, 例如: v-my-directive="1 + 1", value 的值是 2。
oldValue: 指令綁定的前一個值,僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。
expression: 綁定值的表達式或變量名。 例如 v-my-directive="1 + 1" , expression 的值是 "1 + 1"。
arg: 傳給指令的參數。例如 v-my-directive:foo, arg 的值是 "foo"。
modifiers: 一個包含修飾符的對象。 例如: v-my-directive.foo.bar, 修飾符對象 modifiers 的值是 { foo: true, bar: true }。
vnode: Vue 編譯生成的虛擬節點。
oldVnode: 上一個虛擬節點,僅在 update 和 componentUpdated 鉤子中可用。
<template>
<div id="hello" v-myhello:helloboy.ab.cd="msg">
</div>
</template>
<script>
import Vue from "vue";
Vue.directive('myhello',{
bind:function(ele,binding,vnode){
var s = JSON.stringify
ele.innerHTML =
'name='+s(binding.name)+'<br>'+
'value='+s(binding.value)+'<br>'+
'expression='+s(binding.expression)+'<br>'+
'arg='+s(binding.arg)+'<br>'+
'modifiers='+s(binding.modifiers)+'<br>'+
'vnode='+Object.keys(vnode).join(', ')
}
})
export default {
ele: 'hello',
data(){
return{
msg:'helloWorld'
}
}
}
</script>
END.