自定义指令

自定义指令

1. 什么是自定义指令？

Vue官方提供了v-text, v-for, v-if, v-bind, v-slot等常用的指令。

除此以外，Vue还允许开发者自定义指令。

在Vue中，自定义指令分为两类：

• 私有自定义指令（在组件内部）
• 全局自定义指令

2. 私有自定义指令

在每个vue组件中，可以在directives节点下声明私有自定义指令。

2.1 钩子函数bind

bind只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。

directives: {

​ xxxx:{//这里是指令的名字，比如：color

​ bind(el) { // el: 指令所绑定的DOM元素对象

​ el.style.color = ‘red’;

}}}

---

问题：v-bind= “”可以动态绑定参数值，那么自定义的指令可以吗？

2.2 为自定义指令动态绑定属性值

2.3 钩子函数update

2.1中的bind函数只会在指令第一次绑定到元素上时调用，update函数会在每次DOM更新时被调用。

directives: {

​ color:{

​ bind(el,binding) {

​ el.style.color = binding.value;},

​ update(el,binding) {

​ …}

}}

2.4 钩子函数简写

在上述代码中，如果钩子函数bind和update中的逻辑完全相同，对象格式的自定义指令简化为函数格式。

directives: {

​ color(el, binding) { //所有的钩子函数都会触发相同的业务逻辑

​ el.style.color = binding.value

}}

3. 全局自定义指令

在main.js中定义和全局相关的！！

（这里可以类比全局过滤器）

3.1 声明函数格式的全局自定义指令

Vue.directive(‘color’, function(el, binding) {

​ el.style.color = binding.value})

这里和私有自定义指令相同，当钩子函数的逻辑完全相同，则可以简写成这样的函数格式。

3.2 声明对象格式的全局自定义指令

当不同的钩子函数时期会进行不同的操作，则需要改造成对象形式：

Vue.directive(‘color’, {

​ bind(el, binding) {

​ el.style.color = binding.value},

​ update(el, binding) {

​ el.style.color = binding.value}

})