Vue从入门到实战：自定义指令

使用背景

vue的内置指令可以满足大部分业务需求。

在某些特殊情况下，如果我们需要对普通的DOM元素进行底层操作，就要用到自定义指令了。

Vue提供了两种注册的方式，全局注册和局部注册。

全局注册使用Vue.directive()方法来注册一个全局自定义指令。

Vue.directive(id,[definition])

例如，要编写一个让元素自动获取焦点的全局指令。

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

全局指令可以在任何Vue实例的模板中使用。

<div id="app">
  <input v-focus>
</div>
<div id="app2">
  <input v-focus>
</div>

局部注册是在Vue实例的选项对象中使用directive选项进行注册。

new Vue({
   el:'#app',
   directives: {
     focus: {
        // 指令的定义
        inserted: function (el) {
        el.focus()
      }
  }
}

局部注册的自定义指令只能在该实例绑定的视图中使用。

<div id="app">
  <input v-focus>
</div>