Vue2 自定义指令

1.什么是自定义指令

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

2.自定义指令的分类

        私有自定义指令

        全局自定义指令

3.私有自定义指令

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

  directives: {
    // 定义名为color的指令，指向一个配置对象
    color(el, binding) {
      // 当指令第一次被绑定到元素上的时候，会立即出发bind函数
      // 形参中的el代表绑定此指令的DOM对象
      el.style.color = binding.value;
    },
    // 在DOM更新的时候，会触发update函数
    update(el, binding) {
      console.log("触发了v-color的update函数");
      el.style.color = binding.value;
    },
  },

4.全局自定义指令

        全局共享的自定义指令需要通过 " Vue.directive() " 进行声明，示例代码如下：

        // 参数1：字符串，表示全局自定义指令的名字

        // 参数2：对象，用来接收指令的参数值

        Vue.directive('color',function(el,binding){
            el.style.color=binding.value
        })