(一)Vue.directive指令(自定义指令)

本节知识点

• 全局api
• Vue.directive指令
• 自定义指令的生命周期

全局api概述

• 全局api并不在构造器里面，而是先声明全局变量或者直接在vue中定义一些新功能，VUE内置了一些全局api,说简单点就是在构造器外面用vue提供给我们的api函数来定义新的功能.

Vue.directive 指令

• 我们在第一季学习了内部指令，但是我们想要定义一个v-hello的指令，作用就是让文字变成绿色.

• 在开始之前先写一个小DEMO，页面上有一个数字是10，数字的下面有一个按钮，每次点击加1

• 代码如下

    
    
    
    


   

       {{message}}
        点击开始加1
   

---

• 下面让我们用vue.directive来写一个

    
    
    
    


   

       {{message}}
        点击开始加1
   

• 这里要说明的就是指令写的是v-hello,但是我们用directive的时候前面不用加v-了，直接输入指令即可
  可以看到数字也变成绿色了，说明自定义指令也起作用了。
• el : 指令所绑定的元素，可以用来直接操作DOM
• binding: 一个对象，包含指令的很多信息
• vnode: VUE编译生成的虚拟节点

自定义指令的生命周期

自定义指令有5个生命周期(也叫作钩子函数)分别是bind ,inserted,update,componentUpdate,unbind

• 要是想解绑这个vue可以使用

function unbind(){
  app.$destroy()
}

• bind 只调用一次，指令第一次绑定到元素时候调用，用这个钩子可以定义一个绑定时执行一次的初始化动作。

• inserted:被绑定的元素插入父节点的时候调用(父节点存在即可调用，不必存在document中)

• update: 被绑定与元素所在模板更新时调用，而且无论绑定值是否有变化，通过比较更新前后的绑定值，忽略不必要的模板更新

• componentUpdate :被绑定的元素所在模板完成一次更新更新周期的时候调用

• unbind: 只调用一次，指令月元素解绑的时候调用

• 见下面代码

    
    
    
    


   

       {{message}}
        点击开始加1
       解绑