什么是全局API?

　　全局API并不在构造器里，而是先声明全局变量或者直接在Vue上定义一些新功能，Vue内置了一些全局API。说的简单些就是，在构造器外部用Vue提供给我们的API函数来定义新的功能。

Vue.directive自定义指令

　　之前，我们写了一些Vue的内部指令，我们也可以自定义一些指令，比如我们自定义一个v-xiaofan的指令，作用是让文字变成红色。

html：

     
        
      
                   {
    {num}}        
      
        
      
            
       Add        
      
    
     

js：

var app=new Vue({    el:'#app',     data:{         num:10,         color:'#f00'         },        methods:{          add:function(){             this.num++;          }      }  })

　　然后，我们就可以利用Vue.directive定义一个指令了。

Vue.directive('xiaofan',function(el,binding,vnode){    el.style = 'color:' + binding.value;    })

　　这时，我们就使得打印出的数字的字体颜色是红色了。

参数解释：

　　el: 指令所绑定的元素，可以用来直接操作DOM。

　　binding:  一个对象，包含指令的很多信息。

　　vnode: Vue编译生成的虚拟节点。

自定义指令的生命周期

自定义指令有五个生命周期（也叫钩子函数），分别是 bind,inserted,update,componentUpdated,unbind

1. bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
2. inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。
3. update:被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
4. componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
5. unbind:只调用一次，指令与元素解绑时调用。

bind:function(){
   //被绑定     console.log('1 - bind');},inserted:function(){
   //绑定到节点      console.log('2 - inserted');},update:function(){
   //组件更新      console.log('3 - update');},componentUpdated:function(){
   //组件更新完成      console.log('4 - componentUpdated');},unbind:function(){
   //解绑      console.log('5 - unbind');}

 

完整代码：

    
         
         
                 
Vue.directive 自定义指令
    
     
    
     
        
      
        {
   {num}} 
      
        
      
 ADD 
    
     
        
 unbind