vue中自定义指令的使用

除了默认设置的核心指令（v-model和v-show），vue也允许注册自定义指令，注意在vue2.0里面，代码复用的主要形式和抽象是组件——然而，有的情况下，你仍需要对纯DOM元素进行底层操作，这时候就会用到自定义指令。

下面这个例子将聚焦一个input元素，像这样：全局的

当页面加载的时候，元素将获取到焦点，事实上，你访问之后还没点击任何内容，input就获得了及焦点，现在让我们完善这个指令：

也可以注册局部指令，组件中接收一个directives的选项

然后你可以在模板中任何元素上使用新的 v-focus 属性：

指令定义函数提供了几个钩子函数（可选）：
*bind：只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
*inserted：被绑定元素插入到父节点时调用（父节点存在即可调用，不必存在于document中）。
*update:被绑定元素所在的模板更新的时调用，而不论绑定值是否变化，通过比较更新前后的值，可以忽略不必要的模板更新（详细的钩子函数参数见下。）
*componentUpdated:被绑定元素所在模板完成一次更新周期时候调用。
unbind:只调用一次，指令与元素解绑时调用。

接下来我们来看一下钩子函数的参数（el,bingding,vnode,oldVnode）
钩子函数被赋予一下参数
el:指令所绑定的元素，可以用来直接操作dom.
bingding:一个对象，包含一下属性：
            name:指令名，不包含v-前缀。
            value:指令的绑定值，例如：v-my-directive=‘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 }。
               vnode: Vue 编译生成的虚拟节点，查阅 VNode API 了解更多详情。oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。除了 el 之外，其它参数都应该是只读的，尽量不要修改他们。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。

一个使用了这些参数的自定义钩子样例

函数简写
大多数情况下，我们可能想在bind和update钩子上做重复动作，并且不想关心其他的钩子函数，可以这样写：

对象字面量
如果指令需要多个值，可以传入一个javascript对象字面量，记住，指令函数可以接受所有合法类型的js表达式。

参照文章：https://baijiahao.baidu.com/s?id=1603883371090691442&wfr=spider&for=pc