Vue2.0全局API

1.0 Vue.directive

定义在全局的自定义指令，可以自己设置指令名称，指令逻辑，完成某种新功能 例如 

我是自定义颜色指令

这里的directive里的第一个参数是自定义指令的名称，第二个是一个函数，函数里面有三个参数，第一个是el代表的是自定义指令对应的标签dom元素，第二个参数bingding则是一个对象，console.log(binding)的话，有很多属性，例如:

binding.name-----该例子的colorful,bingding.value----colorName在Vue实例对象里面实际的值,bingding.expression----colorful的名字,第三个参数vnode:是Vue编译的虚拟节点

自定义指令里面也有钩子函数，即生命周期，一共五个，

1.bind 只调用一次，指令第一个绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始动作2.inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。

3.update:被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。

4.componentUpdated:被绑定元素所在模板完成一次更新周期时调用。

5.unbind 至调用一个 指令与元素解绑时候调用

 2.0 Vue.extend

拓展实例构造器，经常用在组件功能上，在其模版中遇到该组件名称作为标签的自定义元素时，会自动调用‘拓展实例构造器’来生产组件实例，并挂载到自定义元素上

下面举个例子

html中有一段

script标签中代码

var authorExp = Vue.extend({
           template: '
{{authorName}}
',
           data: function(){
           return {
                authorUrl : 'http://www.baidu.com',
                 authorName: 'BorderBox'
     }
}
})

这里需要注意的是与实例对象Vue不同，这里的data和Vue的实例对象里的data是不同的，这里要写个function里面return一个对象，才可以输入对应的值

这样还不行，还得将该拓展实例构造器new一下然后挂载到对应的自定义标签上才可以

new authorExp().$mount('author')

这里的$mount意思就是挂载的意思,后面传入的参数和jquery是一样的,如果是派生标签,例如

,只要$mount('p')即可,如果是类标签,$mount('.类名'),如果是id,$mount('#id')即可实现

3.0 Vue.set

这里的Vue.set的意思是构造器外部操作构造器内部的数据、属性或者方法，这个方法主要拿来解决javascript长期的一个问题，就是如果只处理数组的下标，或者是处理数组的长度的话，vue不会更新数据

这里举个例子

html里面

    
{{item}}

通过改变数组的下标

script标签里面

function change(){
         Vue.set(app.arr,1,'eee')
}

这里的就显示出Vue.set的价值出来了，如果change()里面直接加app.arr[1] = 'eee'的话，vue是不会更新数据的

4.0 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 销毁之后' )

             }

钩子能用到很多场景，比如说在beforeCreate加一个loading效果，再在mounted搭载之后取消loading效果，这样就可以提高用户体验,当然还有很多例子

5.0 template模版的使用

template是一个Vue实例对象的一个选项（例如data,el这都是选项）

1.0可以直接在template里面写模版

2.0还可以在里面写模版    template: '#id名'来实现

3.0可以在script标签里面加,里面加模版  template: '#id'来实现