Vue基础-自定义指令的使用

Vue的内置指令已经有很多了，比如 v-if、v-on 、v-show、v-for等等。在这些指令中，已经大部分可以满足大部分的业务需求了。不过如果要开发一些比较特殊的功能，就需要我们自己自定义一些指令来完成。

举例：

如何实现打开页面时，input会自动获取焦点？

(https://img-blog.csdn.net/20180107164046991?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGFuZGVyX3hpb25n/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
<div id="app">
   <input type="text" v-focus>
</div>
<script>
  Vue.directive('focus', {
    inserted: function (el) {
      el.foucs();
    }
  })
  var app = new Vue({
    el: '#app'
  })
</script>

上面是一个简单的自定义指令的例子，下面我们来分析一下自定义指令的注册方法和参数。

自定义指令的注册方法有：

• 全局注册

Vue.directive('test', {
  //指令选项
})

• 局部注册

var app = new Vue({
  el: '#app',
  directieve: {
    test: {
      //指令选项
    }
  }
})

自定义指令的选项

自定义的选项是由几个钩子函数组成的，下面分别介绍一下这几个钩子的含义：

• bind： 只调用一次，在绑定到元素时调用，通常是在绑定时执行一次初始化的动作。
• inserted： 被绑定元素插入父节点时调用，如上面例子中使用的，元素在初始化时自动获取焦点。
• update： 被绑定元素所在的模板更新是调用，不论绑定值是否有变化。
• componentUpdated：被绑定元素所在的模板完成一次更新周期时调用。
• unbing： 只调用一次，指令与元素解绑时调用。