系列文章目录
Vue教程-自定义指令方法
一、自定义指令总结
1.1 定义语法
- 局部指令:
new Vue({
directives: {
指令名:配置对象
}
})
// 或者
new Vue({
directives: {
指令名:回调函数
}
})
- 全局指令:
Vue.directive(指令名,配置对象)
// 或者
Vue.directive(指令名,回调函数)
1.2 配置对象中的3个回调
- bind:指令与元素成功绑定时调用
- inserted:指令所在元素被插入页面时调用
- update:指令所在模板结构被重新解析时调用
目前有两个需求:
- 需求1:定义一个v-big指令,与v-text功能类似,但是会把绑定的数值放大10倍
- 需求2:定义一个v-fbind指令,和v-bind功能类似,但是可以让所绑定的input元素默认获取焦点;
代码如下所示:
- 回调函数中的参数element代表绑定的真实dom元素
- binding为绑定对象,值可以通过binding.value取得。
directives: {
// v-big 指令 回调函数
big(element, binding) {
element.innerText = binding.value*10
},
// v-fbind 指令 配置对象
fbind: {
bind(element,binding){
element.value = binding.value
console.log('bind')
},
inserted(element,binding) {
element.focus()
console.log('insert')
},
update(element, binding) {
element.value = binding.value
element.focus()
console.log('update')
}
}
}
1.3 命名注意事项
- 指令定义时不加v-,但是使用时需要加v-;
- 指令名如果是多个单词,要是用kabab-case命名方式,不要用camelCase命名;
总结
以上为Vue自定义指令相关的内容