vue 自定义指令常用于 DOM 操作

局部指令

1. 简单使用

在组件中

<template>
  <div>
    <label for="a" v-test></label>
    <input id="a" v-focus type="text" />
  </div>
</template>
<script>
export default {
  directives: {
    focus: {
      inserted: function (el) {
        el.focus();
      },
    },
    test: {
      inserted: function (el) {
        el.innerHTML = "测试";
      },
    },
  },
};
</script>

2. 封装

1. 新建 src/utils/localDirectives.js，创建指令对象

// 按需引入

export const focus = {
  inserted: function(el) {
    el.focus();
  }
};

export const test = {
  inserted: function(el) {
    el.innerHTML = "测试";
  }
};

2. 在组件中，引入并使用

<template>
  <div>
    <label for="a" v-test></label>
    <input id="a" v-focus type="text" />
  </div>
</template>
<script>
import { focus, test } from "./utils/localDirectives";
export default {
  directives: { focus, test },
};
</script>

全局指令

1. 简单使用

1. 在组件中使用

<template>
  <div>
    <label for="a" v-test></label>
    <input id="a" v-focus type="text" />
  </div>
</template>
<script>
export default {};
</script>

2. 在 main.js 中注册

Vue.directive("focus", {
  inserted: function(el) {
    el.focus();
  }
});

Vue.directive("test", {
  inserted: function(el) {
    el.innerHTML = "测试";
  }
});

2. 封装

1. 新建 src/utils/globalDirectives.js，创建指令对象

// 全部引入

const focus = {
  inserted: function(el) {
    el.focus();
  }
};

const test = {
  inserted: function(el) {
    el.innerHTML = "测试";
  }
};

export default {
  focus,
  test
};

2. 新建 src/utils/global.js，在 install 函数中，遍历重构指令对象

// 引入指令
import directives from "./globalDirectives.js";

const globals = {
  install: function(Vue, option) {
    Object.keys(directives).forEach(key => {
      // Object.keys(directives) //返回数组，数组里面的每一项是对象的属性名称
      Vue.directive(key, directives[key]);
    });
  }
};

export default globals;

3. 在 main.js 中，引入并 use

import globals from "@/utils/global.js";
Vue.use(globals);

4. 在组件中使用

<template>
  <div>
    <label for="a" v-test></label>
    <input id="a" v-focus type="text" />
  </div>
</template>
<script>
export default {};
</script>

自定义指令的五个钩子函数和钩子函数的三个参数

注意：指令钩子函数的 this 是 undefined

自定义指令的五个钩子函数

bind: 初始化只调用一次（dom 未创建就调用）
inserted: 初始化调用（dom 创建之后调用）
update: 组件更新前调用
componentUpdated: 组件更新后调用。
unbind: 只调用一次， 指令与元素解绑时调用。

export default {
  directives: {
    focus: {
      bind() {
        console.log("bind");
      },
      inserted(el) {
        el.focus();
        console.log("inserted");
      },
      update() {
        console.log("update");
      },
      componentUpdated() {
        console.log("componentUpdated");
      },
      unbind() {
        console.log("unbind");
      },
    },
  },
};

钩子函数的四个参数

1. 常用于操作 dom
   el: 指令所绑定的 DOM 元素
2. 常用于获取指令参数
   binding: {
   name: 指令名称，不包括 v- 前缀。
   value: 指令的绑定值， 例如： v-foucus="1 + 1", value 的值是 2。
   oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
   expression: 绑定值的表达式或变量名。 例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。
   arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 "foo"。
   modifiers: 一个包含修饰符的对象。 例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。
   }
3. vnode: Vue 编译生成的虚拟节点。
4. oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。