自定义指令

指令就是在inserted上操作dom元素

全局注册

// 注册在整个大Vue上
Vue.directive('focous', {
    // 当被绑定的元素插入到DOM中时
    inserted: function(el) {
        el.focus() // 聚焦元素      
    }
})

局部注册

directives: {
    founs: {
        inserted: function(el) {
            el.focus()
        }
    }
}

钩子函数及其参数

• bind: 只能调用一次，指令第一次绑定到元素时调用，可以进行初始化配置
• inserted: 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
• update: 所在组件的 VNode 更新时调用
• componentUpdated: 指令所在组件的 VNode 及其子 VNode 全部更新后调用
• unbind: 只调用一次，指令与元素解绑时调用。

每个钩子函数都有下面的参数 bind(el, binding, vnode, oldVnode)

参数

• el: 指令所绑定的元素，可以用来直接操作 DOM。
• binding: 一个对象，包含以下属性
  • name: 指令名
  • value: 指令绑定的值 v-my-directive="1 + 1" 中的 2
  • oldValue: 指令绑定的前一个值，传给指令的值 仅在 update 和 componentUpdated 钩子中可用
  • expression: 字符串形式的指令表达式 ‘1+1’
  • arg: 传递给指令的参数 v-my-directive:foo => foo
  • modifiers: 一个包含装饰符的对象。v-my-directive.foo.bar => { foo: true, bar: true }
  • vnode: Vue编译生成的虚拟节点
  • oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用

渲染函数中的自定义指令

// 自定义指令是个数组，每个对象都是一个自定义指令
directives: [
    {
      name: 'my-custom-directive',
      value: '2', // 传递给指令的值
      expression: '1 + 1', // 传递给指令的表达式
      arg: 'foo', // 传递给指令的变量
      modifiers: { // 传递给指令的修饰符
        bar: true
      }
    }
  ]

• 在渲染函数中可以写一个方法把 一个指令变成directives 数组对象的形式 _vm'loading=${loading}'