Vue2.0全局API

1.0 Vue.directive

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

<p v-colorful="colorName">我是自定义颜色指令<p>

<script>       Vue.directive('colorful',function(el,binding){             el.style = 'color:'+ binding.value})</script>

这里的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中有一段

<author></author>

script标签中代码

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

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

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

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

这里的$mount意思就是挂载的意思,后面传入的参数和jquery是一样的,如果是派生标签,例如<p></p>,只要$mount('p')即可,如果是类标签,$mount('.类名'),如果是id,$mount('#id')即可实现

3.0 Vue.set

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

这里举个例子

html里面

<ul id="app">    <li v-for="item in arr">{{item}}</li><ul>

<button onclick="change()">通过改变数组的下标</button>

script标签里面

<script>       var app = new Vue({              el : '#app',              data : {              arr: ['aaa','bbb','ccc','ddd']        }

})

</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="id名"></template>里面写模版    template: '#id名'来实现

3.0可以在script标签里面加,<script type="x-template" id="id名"></script>里面加模版  template: '#id'来实现