vue-自定义指令

除了核心功能默认内置的指令 (v-model 和 v-show)等，Vue 也允许注册自定义指令 v-xxx

1 、html+css+js的复用的主要形式是组件

2 、你需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令

目标: 获取标签, 扩展额外的功能

<template>
  <div>
    <h2>自定义指令-获取焦点</h2>
    <input v-focus type="text" />
    <h2>自定义指令-改变颜色</h2>
    <p v-color="myColor">第一行p</p>
    <p v-color="'green'">第二行p</p>
    <button @click="myColor = 'blue'">点我</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myColor: "red",
    };
  },
  directives: {
    focus: {
      // 这里的el是一个形参，可以获取你绑定的dom元素
      inserted(el) {
        console.log(el);
        el.focus();
      },
    },

    color: {
      inserted(ele, obj) {         //第一个参数是获取当前绑定dom元素，第二个参数是是获取自定义这个属性，里面存着自定义的值
        console.log(ele);
        console.log(obj);
        ele.style.color = obj.value;
      },
      update(ele, obj) {
        ele.style.color = obj.value;
        console.log("更新了颜色哦");
      },
    },
  },
};
</script>