Vue全局api

一、什么是全局api

全局api不在vue提供的构造器里，而是需要声明或直接定义，简而言之，在构造器外部通过Vue提供的Api函数来定义新的功能。

二、学习Vue.directive自定义指令

之前学习的v-for、v-show、v-model等都是内部指令，通过Vue.directive来自定义一个自己的指令。

三、小例子

先看之前写过的小案例，累加一个数。

  <div id="demo">
         {{num}}
   </div>
   <div>
   <button @click="add">Add</button>
   </div>

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

现在通过定义一个自己的指令，将num放在定义的指令 v-hxq 里，能够让他变成我们想要的颜色

 <div v-hxq='color' id="demo">
            {{num}}
        </div>

然后再javascript全局里调用Vue提供的directive方法来定义我们的指令

 Vue.directive('hxq',function(el,binding){
        el.style='color:'+binding.value;
   });
     var app = new Vue({
         el:'#app',
         data:{
         num:0,
         color:'red'
       },
       methods:{
           add:function(){
               this.num++;
           }
       }
         
     });

这里directive的第一个参数是我们需要定义的指令 hxq 省去 v- ，第二个参数是一个匿名函数，并给这个函数传入两个参数，第一个是使用该指令的元素 也就是el ,通过console.info(el)可以看出就是放置指令的dom节点

image.png

第二个参数是binding: 是 一个对象，包含指令的很多信息，比如 name就是指令的名称，value是该指令绑定的值我们在data里声明的红色

image.png
这一局就是将传过来的do'm节点 ，定义他的style。

  el.style='color:'+binding.value;

效果如下

image.png

四、自定义指令中传递的三个参数

el: 指令所绑定的元素，可以用来直接操作DOM。
binding: 一个对象，包含指令的很多信息。
vnode: Vue编译生成的虚拟节点。（暂时没用到后期补充）

五、自定义指令的生命周期

自定义指令有五个生命周期（也叫钩子函数），分别是bind,inserted,update,componentUpdated,unbind
bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。
update:被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
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('1 - bind');
}

解绑操作一般不容易看到效果，可以通过在js中定义一个原生方法，将初始化声明的app 销毁,销毁后指令都会失效

function unbind(){
  app.$destory();
}