vue全局API

一、什么是全局API？

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

二、Vue.directive自定义指令

 Vue.directive('wzq',{
            bind:function(el,binding,vnode){//被绑定
                el.style='color:'+binding.value;
            },
            inserted:function(){//绑定到节点
                console.log('2 - inserted');
            },
            update:function(){//组件更新
                console.log('3 - update');
            },
            componentUpdated:function(){//组件更新完成
                console.log('4 - componentUpdated');
            },
            unbind:function(){//解绑
                console.log('5 - unbind');
            }
        })

接触绑定

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

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

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

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

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

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

代码初次加载时执行元素绑定以及节点绑定

点击加后执行更新及更新后

点击接触按钮，彻底销毁dom.销毁后整个dom绑定全部解除。

五、vue.set

1.作用
Vue.set 的作用就是在构造器外部操作构造器内部的数据、属性或者方法。
2. 外部数据：不在Vue构造器里里的data处声明，而是在构造器外部声明，然后在data处引用
3. 改变外部数据的三种方法：
4. 1、用Vue.set改变

function add(){
       Vue.set(outData,'count',4);
 }

    2、用Vue对象的方法添加 	

app.count++;

    3、直接操作外部数据

outData.count++;

5.使用vue.set的原因
由于Javascript的限制，Vue不能自动检测以下变动的数组。所以在业务逻辑 需要用到数组的时候，要通过用Vue.set(app.arr,1,’ddd’)来设置改变，vue才会给我们自动更新.

六、Vue的生命周期（钩子函数）

这是官网的生命周期图，可以清晰明确的看到代码执行的各个阶段。

我们可以根据需求在不同的阶段进行不同的操作。

 beforeCreate:function(){
                console.log('1-beforeCreate 初始化之后');
            },
            created:function(){
                console.log('2-created 创建完成');
            },
            beforeMount:function(){
                console.log('3-beforeMount 挂载之前');
            },
            mounted:function(){
                console.log('4-mounted 被创建');
            },
            beforeUpdate:function(){
                console.log('5-beforeUpdate 数据更新前');
            },
            updated:function(){
                console.log('6-updated 被更新后');
            },
            activated:function(){
                console.log('7-activated');
            },
            deactivated:function(){
                console.log('8-deactivated');
            },
            beforeDestroy:function(){
                console.log('9-beforeDestroy 销毁之前');
            },
            destroyed:function(){
                console.log('10-destroyed 销毁之后')
            }

不同阶段使用的函数。
7.template模板制作
1.在构造器的template模板中编写

这种写法适合简单的提示，不适合大量的html代码的编写。

var app=new Vue({
     el:'#app',
     data:{
         message:'hello'
      },
     template:`
        
选项模板
     `
})

2.写在template标签里的模板
标签中使用模板 template标签给定一个id，template：“id”。适用于大量的代码，直接挂载后就可以使用

3.写在script标签里的模板

script标签 类型是x-template