Vue2-Vue.directive实现颜色指令

在 Vue 中，可使用 Vue.directive 方法来定义自定义指令。对于颜色指令的实现，有以下三种方法：

1. 对象字面量方式：这种方式是最简单和直接的方式，直接传入一个对象字面量给 Vue.directive 方法，并在该对象中定义 bind 钩子函数来设置元素的颜色。在钩子函数中，通过 el.style.color 来修改元素的颜色属性。
2. 函数简写方式：这种方式更加简洁，直接传入一个函数给 Vue.directive 方法。这个函数会在 bind 和 update 时触发，并可以通过参数获取到元素、指令绑定值等信息。在函数内部，直接使用 el.style.color 来设置元素的颜色。
3. 指令钩子函数方式：这种方式比较灵活，在 Vue.directive 方法中传入一个对象，该对象中包含了各个指令钩子函数，如 bind、update、unbind 等。在钩子函数中，通过参数获取到元素、指令绑定值等信息，并进行相应的操作。

1# 对象字面量方式

<div id="app">
  <h1 v-color="{ color: 'red', text: 'hello, Vue!' }">对象字面量形式</h1>
</div>

<script>
Vue.directive('color', function (el, binding) {
  el.style.color = binding.value.color; // 设置颜色
  el.innerHTML = binding.value.text; // 设置文本
});
</script>

2# 函数简写方式

<div id="app">
  <h1 v-color="dynamicColor">元素：v-color="dynamicColor"</h1>
</div>

<script>
Vue.directive("color", function (el, binding, vnode) {
  el.style.color = binding.value; // 设置颜色
});

new Vue({
  el: "#app",
  data() {
    return {
      dynamicColor: "red"
    };
  }
});
</script>

3# 指令钩子函数方式

<div id="app">
  <h1 v-color1="vColor1">元素：v-color="vColor1"</h1>
  <h1 v-color2:[vColor2]>元素：v-color:[vColor2]</h1>
  <h1 v-color3:[vColor3]=“我是Text”>元素：v-color:[vColor3]</h1>
</div>

<script>
// 使用 binding.value
Vue.directive("color1", {
  bind: function (el, binding) {
    el.style.color = binding.value; // 设置颜色
  },
});

// 使用 binding.arg
Vue.directive("color2", {
  bind: function (el, binding) {
    el.style.color = binding.arg; // 设置颜色
  },
});
    
// 使用 binding.arg + binding.value
Vue.directive("color3", {
  bind: function (el, binding) {
    el.style.color = binding.arg; // 设置颜色
    el.innerHTML = binding.value.text; // 设置文本
  },
});

new Vue({
  el: "#app",
  data() {
    return {
      vColor1: "red",
      vColor2: "blue",
      vColor3: "green",
    };
  },
});
</script>