Vue教程-自定义指令方法

系列文章目录

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自定义指令相关的内容