什么是自定义指令?
在Vue中,Vue官方提供了一些常用的指令:v-text 、v-for、v-if、v-show、v-model 等常用的指令
这些指令能满足日常的开发,但是一些特殊的场景,就需要用到了自定义指令。
自定义指令是Vue提供的一种扩展方式,允许在你自定义内置的指令功能。通过自定义指令,可以创建自己的指令,这些指令可以在元素上去使用,并且可以定义它们的行为。
自定义指令的分类
分为两种
私有自定义指令
全局自定义指令
私有自定义指令
简单来讲,就是在组件内去创建一个只有在组件内才能使用的指令
那么如何去声明呢?
这个就需要在 directives 节点下去声明私有自定义指令
代码如下:
// 私有自定义指令放在 deactivated 节点下
directives: {
// 定义 big 自定义指令
// 后面写配置对象
big(el, binding, vnode, oldVnode) {
console.log(el, binding, vnode, oldVnode)
el.innerText = binding.value * 10
}
}
接收的四个钩子函数分别为:
- el:指令所绑定的元素,是真实 DOM节点,可以通过该元素来操作 DOM
- binding:一个对象,里面包括很多属性,但是基本上只关注 value 属性,因为这是 指令绑定的值
- vnode:Vue 编译生成的虚拟节点
- oldVnode:Vue 编译生成的上一个虚拟节点(仅在 update 和 componentUpdated 使用)
我们也可以得知:
可以写成函数式也可以写成对象式
注册的自定义指令是并不需要返回值的,而是通过直接操作 DOM 元素,来更改页面展示
一旦自定义指令绑定的数据发生了变化,那么自定义指令就会被调用
全局自定义指令
通过 Vue.directive()方法在 main.js 文件内去定义全局自定义指令
代码如下:
// 函数式的全局自定义指令
Vue.directive('big', (el, binding) => {
el.value = binding.value
})
// 对象式的全局自定义指令
Vue.directive('big', {
bind(el, binding) {
el.value = binding.value
},
inserted(el, binding) {
el.focus()
},
update(el, binding) {
el.value = binding.value
}
}
)
接收两个参数:
第一个是字符串形式的指令名称
第二个是指令处理方式( 可以是函数式,也可以是对象式,具体就是把局部的处理函数或处理对象完整粘贴过来就行)