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

使用如下：

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()进行声明

使用规则

1.先建立一个directive的文件,在地下建立子文件,例如focus.focus底下有index.js

2.在组件里面去引入和使用