ue自定義指令
自定義全局指定
自定義可以讓表單元素自動(dòng)獲取光標(biāo)的元素
import Vue from 'vue'
// 全局指令
Vue.directive('focus', {
inserted(el) { // 被添加進(jìn)去之后
el.focus() // 獲取光標(biāo)
}
})
使用
<input type="text" v-foucs />
自定義局部指令
// 實(shí)例或者組件接受一個(gè)directives的屬性驰坊，內(nèi)部可以添加自定義屬性匾二，則為局部指令
directives: {
focus2: {
inserted(el) {
el.focus()
}
}
}
使用
<input type="text" v-focus2 />
鉤子函數(shù)
directives: {
focus2: {
bind(el, binding, vnode) {
// 只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用拳芙，用這個(gè)鉤子函數(shù)可以定義一個(gè)在綁定時(shí)執(zhí)行一次的初始化動(dòng)作察藐。
console.log(el);
console.log(binding);
console.log(vnode);
console.log('bind');
},
inserted(el) {
// 被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用（父節(jié)點(diǎn)存在即可調(diào)用，不必存在于 document 中）舟扎。
el.focus()
console.log('inserted');
},
update() {
// 被綁定元素所在的模板更新時(shí)調(diào)用分飞，而不論綁定值是否變化。
console.log('update');
},
componentUpdated() {
// 被綁定元素所在模板完成一次更新周期時(shí)調(diào)用睹限。
console.log('componentUpdated');
},
unbind() {
// 只調(diào)用一次譬猫， 指令與元素解綁時(shí)調(diào)用。
console.log('unbind');
}
}
}
對(duì)象字面量
directives: {
demoo(el, binding) {
console.log(el); // 獲取當(dāng)前元素 <div></div>
console.log(binding.value.name); // 獲取傳遞的值 xiaoming
console.log(binding.value.age); // 獲取傳遞的值 18
binding.value.a
},
}
使用
<div v-demoo="{ name: 'xiaoming', age: 18, a: 33 }"></div>
