vue自定义指令

自定义指令分为: 自定义私有指令和自定义全局指令

自定义私有指令

简写形式

  directives: {
    color(el, binding) {
      console.log(el); // el是绑定自定义属性的dom对象
      console.log(binding); // binding 是指令后面带的值 
      例如: v-color="coloraa" 其中coloraa是一个定义在data函数里面的数据 或者 v-color="''red"
      el.style.color = binding.value;
    },
}

完整的写法

    directives: {
      // 定义名为color的指令, 指向一个配置对象
      color: {
        // 当指令第一次被绑定到元素上的时候, 会立即触发bind函数
        // 形参中的el表示当前指令所绑定到的那个dom对象
        // 第一次绑定会生效
        bind(el, binding) {
          console.log(el);
          console.log(binding);
          el.style.color = binding.value;
        },


        // 在dom更新的时候, 会触发updata函数
        // 第一次生效, 之后数据更新会生效
        update(el, binding) {
          console.log("update ==>", el);
          console.log("update ==>", binding);
          el.style.color = binding.value;
        },

      },
    }


// 以上为全写的形式, 但bind函数和update函数 除了函数名 其他全部都一样的情况写, 就可以使用简写形式

自己练习的图片和使用

自定义全局指令

 一般在main.js 可以直接 定义.

但为了让main.js 文件看起来不是那么的乱 所以建议在src文件夹中建立一个directive文件(文件名自随意, 因为自定义指令用到了 directives 对象所以叫 directive)

这里在定义全局指令的时候  directives   可以不用加s

一下为代码

完整写法

import Vue from "vue";  // 引入vue的包
Vue.directive('color', {
    biond(el, binding) {
        el.style.color = binding.value
    },
    update(el, binding) {
        el.style.color = binding.value
    }
}) 

简化写法

import Vue from "vue";

Vue.directive('color', (el, binding) => {
    console.log('我是全局指令', el);
    console.log('我是全局指令', binding);
    el.style.color = binding.value
})

以下为自己练习的图片, 并且