前言：自定义分为两种全局注册和局部注册
官方文档：Vue.js
一、输入框单例
以自定义个输入框完成自动对焦这个命令为例：
全局自定义：
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// el：指令所绑定的元素，可以用来直接操作 DOM 。
el.focus()
}
})
如果想注册局部指令，组件中也接受一个 directives 的选项：
directives: {
focus: {
// 指令的定义
inserted: function (el) {
//el：指令所绑定的元素，可以用来直接操作 DOM 。
el.focus()
}
}
}
然后你可以在模板中任何元素上使用新的 v-focus 属性，如下：
<input type="text" v-focus/>
刷新成功自动对焦
二、对象字面量自定义指令
如果指令需要多个值，可以传入一个 JavaScript 对象字面量。记住，指令函数能够接受所有合法的 JavaScript 表达式。
全局定义：
下面这种写法，只会在 bind（bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。） 和 update （所在组件的 VNode 更新时调用）时触发相同行为，而不关心其它的钩子函数。
Vue.directive('bgc', function (dom, binding) {
// dom表示这个dom元素
// binding返回绑定的方法,打印出来一目了然
console.log(binding);
if(binding.modifiers.isTrue){
// 这个dom是可以操作的
dom.style.fontSize = binding.value.fontSize;
dom.style.backgroundColor = binding.value.bgc;
dom.style.width = binding.value.w;
dom.style.height = binding.value.h;
}
})
上面的代码参数调用打点比较多，可以简化一下。优化如下：
Vue.directive('bgc', function (dom,{modifiers,value}) {
// dom表示这个dom元素
// binding被结构出来
if(modifiers.isTrue){
// 这个dom是可以操作的
dom.style.fontSize = value.fontSize;
dom.style.backgroundColor = value.bgc;
dom.style.width = value.w;
dom.style.height = value.h;
}
})
概念补充：
- 钩子函数：一个指令里面内置的函数。
比如：inserted 就表示当前元素上树使用时调用。bind 初始化调用一次。
- 钩子函数的参数：
- dom：当前指令绑定的 DOM 节点。可直接使用原生操作 DOM 的方法来直接操作此元素。
- bnding：一个对象，包含以下属性：
name：指令名，不包括 v- 前缀。
value：指令的绑定值。
expression：字符串形式的指令表达式。
modifiers：一个包含修饰符的对象， modifiers：一个包含修饰符的对象。例如：v-dir.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
binding的状态
子组件使用：
<template>
<div>
<div v-bgc.isTrue="{'bgc':'#20f2f2','fontSize':'22px','w':'200px','h':'200px'}">我是啥</div>
<div v-bgc="{'bgc':'#20f2f2','fontSize':'22px','w':'200px','h':'200px'}">我是啥</div>
</div>
</template>
<script>
</script>
<style>
</style>
效果
