vue .directive

即vue的自定义指令

全局定义

Vue.directive('focus', {    inserted:function(el){     el.focus() }    })

局部定义

directive: { focus: {     inserted:    function(el){     el.focus()    }    }}

使用

<div v-focus></div>

自定义指令的钩子函数

bind: 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

update：所在组件的 VNode 更新时调用，但是可能发生在其子VNode更新之前，指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新

componentUpdated：指令所在组件的 VNode及其子VNode全部更新后调用

unbind：只调用一次，指令与元素解绑时调用。

钩子函数的参数

el：指令所绑定的元素，可以用来直接操作 DOM 。

binding：一个对象   包含以下属性

    value:指令的绑定值 例如     v-my-directive='1+1'   value = 2 

    oldValuie:指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用

    expression:    指令绑定的字符串表达式    例如     v-my-directive='1+1'   表达式为‘1+1’ 

    arg: 传给指令的参数 （可选）例如 v-my-directive:foo arg为foo

    modifiers: 一个包含修饰符的对象  例如 v-my-directive.foo.b    modifiers 为{foo:true,b:true}

即 binging: {value,oldValue,expression,arg,modifiers}

Vnode: vue编写生成的虚拟节点

oldVnode：上一个虚拟节点  仅在update 和 componentUpdated 钩子中可用

注：除了el以外 ，其他的参数都应该只是只读的， 如需修改  可通过元素的dataset来修改

而在大部分时候我们需要对函数进行简写

函数简写

你可能想在 bind 和 update 时触发相同行为，而不关心其它的钩子，例如

Vue.directive('color-swatch',function(el, binding){     el.style.backgroundColor = binding.value    })

对象字面量（暂未使用）

如果指令需要多个值，可以传入一个 JavaScript 对象字面量。指令函数能够接受所有合法的 JavaScript 表达式。

即在书写 v-my-directive 时可以传入一个对象字面量 例如  v-my-directive="{    color:red,font-size:12    }"