自定义指令

私有自定义指令

1. 在directives节点下，定义指令时省略‘v-’，定义的指令指向一个配置对象

<h1 v-color="color">我是一个简单的栗子</h1>
...
data() {
    return {
        color: 'green'
    }
},

directives: {
    color: {
        bind(el) {
            // el表示指令绑定的DOM对象
            el.style.color = 'red';
        },
      
        update(el, binding) {
            // 参数1：el表示指令绑定的DOM对象; 参数2：binding是一个对象
            el.style.color = binding.value;
        },
    }
}

2. binding属性：有value，expression等属性，binding.value可以取到不写死的值，expression是自定义指令等号后面的内容

3. update函数和bind函数区别：

   • bind函数只在第一次触发
   • update第一次不会触发，后续更新数据会触发

4. 简写：当bind函数和update函数业务逻辑相同时，可以直接简写成函数形式

color(el, binding) {
    el.style.color = binding.value;
}

全局自定义指令

写在main.js文件

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

// 简写
Vue.directive('color', (el, binding) => {
  el.style.color = binding.value;
})