Vue2自定义指令及事例

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元素设置字体颜色为红色

使用如下：