你真的了解Vue指令吗？

vue一共为我们提供了14种内置指令，分别是：

v-text  v-html  v-show  v-if  v-else  v-else-if  v-for  v-on  v-bind  v-model  v-slot  v-pre  v-cloak  v-onec    

这14中内置指令的功能都非常简单，如果有不知道的可以查阅vue官方文档，这里不做介绍。指令的本质就是语法糖或者说是标志位，目的是为了操作DOM，将操作DOM的逻辑封装成指令（简化代码量），然后交给编译器，最后生成js代码来渲染我们的页面。
vue除了内置指令，还为我们提供了自定义指令，自定义指令又有5个生命周期钩子函数，分别是：

bind(直执行一次)  inserted  update（binding.value值改变时执行）  componentUpdated（binding.value值改变时执行）  unbind(直执行一次)

如何定义自定义指令呢？

1.定义全局自定义指令

// 注册一个全局自定义指令 v-focus，让input默认自动获取焦点
Vue.directive('focus', {
  // 当绑定元素插入到 DOM 中。
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

2.定义局部自定义指令

directives: {
  focus: {
    inserted: function (el) {
      // 聚焦元素
      el.focus()
    }
  }
}

指令钩子函数各个参数含义Demo示例

<div id="hook-arguments-example" v-demo:hello.a.b="message"></div>

Vue.directive('demo', {
  bind: function (el, binding, vnode) {
    var s = JSON.stringify
    el.innerHTML =
      'name: '       + s(binding.name) + '<br>' +
      'value: '      + s(binding.value) + '<br>' +
      'expression: ' + s(binding.expression) + '<br>' +
      'argument: '   + s(binding.arg) + '<br>' +
      'modifiers: '  + s(binding.modifiers) + '<br>' +
      'vnode keys: ' + Object.keys(vnode).join(', ')
  }
})
new Vue({
  el: '#hook-arguments-example',
  data: {
    message: 'hello!'
  }
})

运行结果：

运行结果.png

自定义指令生命周期与vue实例生命周期执行循序？

beforeCreate()、created()、beforeMount()、bind()、inserted()、mounted()；
以上是生命周期先后执行循序（可自行验证）

止水
于沈阳
2019/04/08 22：03