vue的自定义指令

1.自定义指令

1.1 什么是自定义指令

vue官方提供了v-text、v-html、v-model、v-if等一些常用的指令。除此之外vue还允许开发者自定义指令。

1.2 自定义指令的分类

vue将自定义指令分为 两类

• 私有自定义指令
• 全局自定义指令

1.3 私有自定义指令

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

• 私有自定义指令只在这个组件中生效

示例代码如下：

 directives: {
    color: {
      bind(el) {
        el.style.color = "red";
      },
    },
  },

• color:指定的是指令的名称，使用的时候要加前面加个v-,v-color
• bind:只会调用一次，是指 指令第一次绑定到元素时会调用 （bind函数触发的时机是指令第一次绑定到元素身上时触发）
• el：是指绑定的这个dom元素本身
• v-color这个指令的作用就是给指定dom元素设置字体颜色为红色

使用如下：

90.png

实现效果：

91.png

1.3.1 获取指令绑定的值 binding

92.png

控制台输出

93.png

• name:指令的名称
• rawName:指令的全称
• value:指定绑定的值

所以我们可以通过第二个参数的属性value（参数名随便取，只要符合标识符的规则）来动态设置值，而设置一个固定的值。

所以可以将指令修改为：

 directives: {
    color: {
      bind(el, binding) {
        el.style.color = binding.value;
      },
    },
  },

具体实现效果如下：

94.png

1.3.2 update函数（页面数据发生更新，会触发这个函数）

• 但第一次指令绑定到元素身上时不会触发update函数，只有后续更新才会触发这个update函数，bind函数和update函数的参数列表是一样的。

95.png

1.3.3 函数简写

如果bind函数和update函数中的逻辑完全相同，则对象格式的自定义指令可以简写为函数格式：

96.png

等价于下面的这些代码：

97.png

1.4 全局自定义指令

全局共享的自定义指令需要通过 Vue.directive()进行声明

// 第一个参数为字符串，指令的名称
// 第二个参数是一个对象，用于接收指令的参数值
Vue.directive("color",{
  bind(el,binding){
    el.style.color=binding.value;
  },
  update(el,binding){
    el.style.color=binding.value;
  }
})

以下是上面的代码简写的形式（因为bind和update的逻辑处理是一致的）：将bind函数和update函数写在一块了

// 第一个参数为字符串，指令的名称
// 第二个参数是一个对象，用于接收指令的参数值
Vue.directive("color",function(el,binding){
  el.style.color=binding.value;
})

2. 总结

自定义指令.png