Vue复习：Vue.directive()自定义指令的封装

1、使用场景

Vue中操作底层的DOM便是通过大量的vue指令，比如：v-html、v-if、v-show等等，因此：自定义指令主要解决的问题以及使用场景是对 DOM 元素进行底层操作的。

1.1、定义directive

directive指令是独立于组件之外的

Vue.directive('color',{
  inserted(el,bind){
    el.style.color = bind.value;
  }
})

el：是指的添加自定义指令的那个DOM元素，而bind则是指的绑定的相关属性，通过bind.value可以获取到指令传入过来的值。

1.2、使用自定义指令

  <div id="demo">
    <h1 v-color="color.redColor">测试自定义指令</h1>
    <h1 v-color="color.greenColor">测试自定义指令</h1>
  </div>


  data() {
    return {
      color: {
        redColor: "red",
        greenColor: "green",
      },
    };
  },

成功生成自定义指令.png

1.2、和普通的vue指令一样进行更新

directive可以看做也是具有一个生命周期的，其中inserted便可看成是一个生命周期，他是在元素刚插入的时候触发，意味着也只会触发一次，当指令传入的变量的值数据发生了改变，那么需要进行对应的修改操作，则需要使用directive的update()生命周期的钩子去处理。

Vue.directive('color',{
  inserted(el,bind){
    el.style.color = bind.value;
  },
  update(el,bind){
    el.style.color = bind.value;
  }
})

点击进行修改传入的变量的值：

<h1 v-color="color.greenColor" @click="handleChange">测试自定义指令</h1>

  methods: {
      handleChange(){
          this.color.greenColor = '#ccc';
      }
  },

修改变量的值.gif