VUE之全局API（自定义指令directive）

全局API

• （1）什么是全局API？
• 全局API并不在构造器里，而是先声明全局变量或者直接在Vue上定义一些新功能，Vue内置了一些全局API，比如本节要介绍的指令Vue.directive
• 通俗理解：就是在构造器外部用Vue提供的API函数来定义新的功能。
• （2）常用vue 的全局 API列表
• 1、Vue.directive 自定义指令
• 2、Vue.extend 扩展实例构造器
• 3、全局操作Vue.set + Vue.delete
• 4、Vue 的生命周期
• 5、Vue component 组件 + Vue template模板
• 6、Vue.nextTick线程操作、Vue.filter筛选、Vue.use调用
• 小结：全局API就是在构造器外部用Vue提供的API函数来定义新的功能。

自定义指令起源

• （2）缘由：
• Vue2.0开始代码复用性和抽象的主要形式是组件，然而个别情况下仍然需要对普通DOM元素进行底层操作。
• 之前所学的v-if、v-show等都是vue内置指令，有时部分功能是无法通过内置指令实现，此时便需要用到自定义指令。
• （3）场景：
• 页面加载完毕后要求输入框自定聚焦，这种功能在很多场景都会用到，例如百度、京东、淘宝等
  

自定义指令分类

• （4）自定义指令分类
• 自定义指令分为全局和局部，正式介绍自定义指令之前，先来回顾下组件的相关知识
• 组件分类：全局组件和局部组件，语法如下
  
• 全局组件注册语法为Vue.component()
• 局部组件注册需要借助components选项

自定义指令注册

• （5）注册自定义指令
• 同理，自定义指令注册语法与之类似，如下所示
  
• 全局自定义指令注册语法为Vue.directive()
• 局部自定义指令注册需要借助directives选项

全局指令VS局部指令

• 自定义指令分为全局+局部
• 全局注册为Vue.directive()
• 局部注册为directives选项内注册
• 区别：
• 作用域不同，全局注册的自定义指令可以在全局调用，局部注册的自定义指令只能在当前构造器作用域内使用（类似于全局组件与局部组件）。

自定义指令调用

• （6）自定义指令调用
• 注册完毕后，在在需要使用的组件里进行调用
• 在介绍自定义指令调用前，先来回顾下组件的调用
  
• 注册完毕后，在在需要使用的组件里进行调用，语法v-directive-name
• 调用自定义指令时，语法类似调用组件，如下所示
  

自定义指令

• 案例：
• 利用自定义指令，实现一个输入框自动聚焦功能，代码如下
  

自定义指令钩子/生命周期

• 上例只是注册了自定义指令v-auto-focus，还没有实现具体功能，要想实现自动聚焦功能，需要结合选项去实现。下面具体介绍自定义指令的各个选项。
  自定义指令的选项是由几个生命周期钩子函数组成的，每个都是可选的。
• 常见生命周期钩子如下
• 1、bind第一次绑定到元素时调用
• 2、inserted被绑定元素插入父节点时调用
• 3、update被绑定元素所在的模板更新时调用
• 4、componentUpdated被绑定元素所在模板完成一次更新周期时调用
• 5、unbind指令与元素解绑时调用
• （7-1）bind初始化钩子