Vue.directive自定义指令

1.自定义指定

1.1 自定义全局指令

自定义全局指令的特点：在任何一个 vue 实例控制的区域中都可以使用

1.1.1 自定义全局指令的语法

• 格式

vue.directive("自定义指令名称", {
  生命周期名称: function (el) {
    指令业务逻辑代码;
  },
});

• 具体运用

directive 方法接收两个参数
第一个参数：指令的名称
第二个参数：对象
注意点: 在自定义指令的时候, 在指定指令名称的时候, 不需要写 v-
注意点: 指令可以在不同的生命周期阶段执行
bind:指令被绑定到元素上的时候执行
inserted：绑定指令的元素被添加到父元素上的时候执行

<div id="app">
  <p v-color>我是段落</p>
  <input type="text" v-focus />
</div>
<script>
  Vue.directive("color", {
    // 这里的el就是被绑定指令的那个元素
    bind: function (el) {
      el.style.color = "red";
    },
  });
  Vue.directive("focus", {
    inserted: function (el) {
      el.focus();
    },
  });
  // 这里就是MVVM中的View Model
  let vue = new Vue({
    el: "#app",
    // 这里就是MVVM中的Model
    data: {},
    // 专门用于存储监听事件回调函数
    methods: {},
  });
</script>

1.1.2 指令生命周期

自定义指令时一定要明确指令的业务逻辑代码更适合在哪个阶段执行

1.1.2.1 bind

指令业务逻辑代码中没有用到元素事件，那么可以在 bind 阶段执行

1.1.2.2 inserted

指令业务逻辑代码中用到了元素事件，那么就需要再 inserted 阶段执行

1.1.3 自定义指令注意点

使用时需要加上v-,而在定义的时候不需要

1.1.4 钩子函数参数

<div id="app">
  <p v-color="'blue'">我是段落</p>
  <p v-color="curColor">我是段落</p>
</div>
<script>
  Vue.directive("color", {
    // 这里的el就是被绑定指令的那个元素
    bind: function (el, obj) {
      // el.style.color = "red";
      el.style.color = obj.value;
    },
  });
  let vue = new Vue({
    el: "#app",
    data: {
      curColor: "green",
    },
    methods: {},
  });
</script>

1.2 自定义局部指令

只能再自定义的那个 Vue 实例中使用

1.2.1 自定义局部指令的语法

• 格式

directives: {
    // key: 指令名称
    // value: 对象
    'color': {
        bind: function (el, obj) {
            el.style.color = obj.value;
        }
    }
}

• 运用

<div id="app1">
  <p v-color="'blue'">我是段落</p>
</div>
<div id="app2">
  <p v-color="'red'">我是段落</p>
</div>
<script>
  // 这里就是MVVM中的View Model
  let vue1 = new Vue({
    el: "#app1",
    // 这里就是MVVM中的Model
    data: {},
    // 专门用于存储监听事件回调函数
    methods: {},
  });
  // 这里就是MVVM中的View Model
  let vue2 = new Vue({
    el: "#app2",
    // 这里就是MVVM中的Model
    data: {},
    // 专门用于存储监听事件回调函数
    methods: {},
    // 专门用于定义局部指令的
    directives: {
      color: {
        // 这里的el就是被绑定指令的那个元素
        bind: function (el, obj) {
          el.style.color = obj.value;
        },
      },
    },
  });
</script>

---

vue-directive官网详解

学习随记