vue 自定义指令

v-model ，v-bind 等就是 Vue 中的指令。

使用

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

钩子函数

• bind : 指令绑定到元素上时触发;

• inserted : 被绑定元素插入到父元素时调用，但不一定是插入到DOM中；

• update : 所在组件更新时调用，但此时 子 VNode 不一定更新了。

• componentUpdate : 所在组件 Vnode 及其子 VNode 都更新后调用；

• unbind : 指令与元素解绑时调用。

钩子函数参数

• el : 元素

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

  • name : 不带 v- 前缀的名称；

  • value : 指令值；

  • oldValue : 更新前的指令值；

  • expression : 指令的表达式，如： v-focus="2 + 2" 就是 2 + 2 ;

  • arg : 参数值，如： v-focus:foo="2" 就是 foo ;

  • modifiers : 修饰符，如： v-focus.foo.bar="" 就是 { foo: true, bar: true } 。

• vnode : Vue 编译生成的虚拟节点。

• oldVnode : 上一个虚拟节点，仅在 update 和 componentUpdate 中可用。

函数简写指令

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

用对象字面量给指令传值

<div v-demo="{ color: 'white', text: 'hello!' }"></div>