Vue 自定义指令
函数式、对象式,都可以设置为全局指令/局部指令
函数式
需求:定义一个 v-big 指令,和 v-text 类似,但是会把绑定的值放大 10 倍
局部指令
// 函数式局部指令
directives: {
big(element, binding) {
element.innerText = binding.value * 10
},
}
big 何时被调用
- 指令与元素成功绑定时
- 指令所在的模板被重新解析时
全局指令
// 函数式全局指令
Vue.directive('big', function (element, binding) {
element.innerText = binding.value * 10
})
对象式
需求:定义一个 v-fbind 指令,和 v-bind 功能类似,但可以让其绑定的 input 元素默认获取焦点
配置对象中的常用的三个回调:
- bind:指令与元素成功绑定时调用
- inserted:指令所咋元素被插入页面时调用
- update:指令所在的模板被重新解析时调用
局部指令
// 对象式局部指令
directives: {
fbind: {
// 指令与元素成功绑定时调用
bind(element, binding) {
// 此处 this 是 windows
element.value = binding.value
},
// 指令所咋元素被插入页面时调用
inserted(element, binding) {
element.focus()
},
// 指令所在的模板被重新解析时调用
update(element, binding) {
element.value = binding.value
}
}
}
全局指令
// 对象式全局指令
Vue.directive('fbind', {
// 指令与元素成功绑定时
bind(element, binding) {
element.value = binding.value
},
// 指令所咋元素被插入页面时
inserted(element, binding) {
element.focus()
},
// 指令所在的模板被重新解析时
update(element, binding) {
element.value = binding.value
}
})
自定义指令的命名
- 指令定义时不加
v-
,但使用的时候要加v-
- 指令名如果时多个单词,要使用 kebab-case 的命名方式,不要使用 camelCase 的命名方式