v-开头的行内属性，都是指令，不同的指令可以完成或实现不同的功能。
除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令
注册一个自定义指令有全局注册与局部注册。

全局注册

  • 全局注册主要是用过 Vue.directive 方法进行注册。
1
2
3
4
5
6
7
8
// 注册一个全局自定义指令 `v-focus`
Vue.directive("focus", {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus(); // 页面加载完成之后自动让输入框获取到焦点的小功能
  },
});
  • 在 main.js 引入并调用
1
2
3
4
import Vue from "vue";
import Directives from "./util/directives";

Vue.use(Directives);

局部注册

直接在组件 options 选项中设置 directive 属性

1
2
3
4
5
6
7
8
directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus() // 页面加载完成之后自动让输入框获取到焦点的小功能
    }
  }
}

生命周期钩子函数

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用
unbind：只调用一次，指令与元素解绑时调用