ue自定义指令
自定义全局指定
自定义可以让表单元素自动获取光标的元素
import Vue from 'vue'
// 全局指令
Vue.directive('focus', {
inserted(el) { // 被添加进去之后
el.focus() // 获取光标
}
})
使用
<input type="text" v-foucs />
自定义局部指令
// 实例或者组件接受一个directives的属性，内部可以添加自定义属性，则为局部指令
directives: {
focus2: {
inserted(el) {
el.focus()
}
}
}
使用
<input type="text" v-focus2 />
钩子函数
directives: {
focus2: {
bind(el, binding, vnode) {
// 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
console.log(el);
console.log(binding);
console.log(vnode);
console.log('bind');
},
inserted(el) {
// 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
el.focus()
console.log('inserted');
},
update() {
// 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。
console.log('update');
},
componentUpdated() {
// 被绑定元素所在模板完成一次更新周期时调用。
console.log('componentUpdated');
},
unbind() {
// 只调用一次， 指令与元素解绑时调用。
console.log('unbind');
}
}
}
对象字面量
directives: {
demoo(el, binding) {
console.log(el); // 获取当前元素 <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>
