Vue之自定义指令

Vue中有很多内置的命令，例如v-bind,v-for,v-show等等，这些指令的指责是将表达式改变时，将某些行为相应地映射到dom上。
那么除了我们常用的Vue的内置指令外，我们还可以自定义指令，常用的自定义vue全局指令的模板如下：

这里的focus是定义额指令的名称，可根据指令作用换成其他名称。
模板中的bind,inserted, updated都是vue中的钩子函数。
钩子函数：主要负责将作用域和dom进行链接；链接函数用来创建可以操作dom的指令。
-bind: 每当指令绑定到元素上的时候，会立即执行这个 bind 函数，且只执行一次，初始化动作。
-inserted: 插入到DOM中的时候，会执行 inserted 函数【触发1次】；
-updated：当VNode更新的时候，会执行 updated， 可能会触发多次。
模板的中的el：表示被绑定了指令的那个元素，这个 el 参数，是一个原生的JS对象。注：在每个 函数中，第一个参数，永远是 el。
binding一个对象，其包含有以下的属性：
name — 指令的名字，不包含前缀
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 }。
vm — 拥有该指令上下文 ViemModel
vnode — Vue 编译生成的虚拟节点。
注：以上属性为可读，不可去修改。
使用方法示例：
一般常用的方法，示例
a. input框自动聚焦

b. 当修改某个属性的样式时：

注：一般与样式相关的操作都在bind里面进行，如果需要更改dom节点则需要在inserted中进行。
Vue私有自定义指令，一般在vm实例中定义，在这里面定义的时候仅可以被该vm实例使用，其他vm实例不可使用。其定义方法与全局指令的定义方法一致。
使用方法如下：