前言

v-model 和 v-show vue的内置指令，大家都使用过了，那如果要创建一个自定义的指令，要如何处理呢？

注册指令

• 注册

// 全局注册
Vue.directive('demo', {
  inserted: function(el) {
    el.focus();
  }
});
// 局部注册
directives: {
	demo: {
    inserted: function(el) {
   		 el.focus();
  	}
  }
}

• 在模板中任何元素上可以使用指令

<input v-demo/>

Hook 函数

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

参数

• el 指令所绑定的元素，可以用来直接操作DOM
• binding 一个对象，包含以下属性

• name 指定名
• value 指令绑定的值
• oldValue 指令绑定的前一个值
• expression 字符串形式的指令表达式
• arg 传给指令的参数
• modifiers 修饰符对象

• vNode Vue编译生成的虚拟节点
• oldVnode 上一个虚拟节点

动态指令参数

指令的参数可以是动态的，如 v-demo:[argument]="value" , argument 参数是可以根据实例数据进行更新的，如下的代码

Vue.directive("demo", {
  bind: function (el, binding) {
    el.style["color"] = binding.value;
  }
});

  <span v-demo="textColor">demo directive</span>
  <button @click="setColor">文字修改为绿色</button>
    // 修改颜色为绿色
    setColor() {
      this.textColor = "green";
    },

以上的代码，会在初始绑定时，给当前绑定的组件元素文本设置成红色

但你会发现，点击按钮，不会有效，那是因为上面的指定是在bind时机点，更新时不会再触发，需要绑定update，可以简写成，在bind和update时都会触发相同的行为

Vue.directive("demo", function (el, binding) {
  console.log(binding)
  el.style["color"] = binding.value;
}
);

点击按钮则可看到效果