标签：
vue2.0学习(二)-全局API GitHub源码 https://github.com/sunnyguyan/VueDemo 1.Vue.directive自界说指令 一、什么是全局API？全局API并不在结构器里，而是先声明全局变量或者直接在Vue上界说一些新成果，Vue内置了一些全局API，好比我们今天要学习的指令Vue.directive。说的简单些就是，在结构器外部用Vue供给给我们的API函数来界说新的成果
二、Vue.directive自界说指令我们在第一季就学习了内部指令，我们也可以界说一些属于本身的指令，好比我们要界说一个v-dire的指令，感化就是让文字酿成绿色。
在自界说指令前我们写一个小成果，在页面上有一个数字为10，数字的下面有一个按钮，我们每点击一次按钮后，数字加1.
代码
Html代码
<div> <div v-dire="color"> {{num}} </div> <div> <button @click="add">Add</button> </div> </div>js代码
var app=new Vue({ el:‘#app‘, data:{ num:10, color:‘green‘ }, methods:{ add:function(){ this.num++; } } })写好了这个成果，我们此刻就本身界说一个全局的指令。我们这里使用Vue.directive( );
Vue.directive(‘jsdire‘,function(el,binding,vnode){ el.style=‘color:‘+binding.value; }); 三、自界说指令中通报的三个参数el:指令所绑定的元素，可以用来直接操纵DOM
binding:一个东西，包罗指令的很多信息
vnode:Vue编译生成的虚拟节点
bind:只挪用一次，指令第一次绑定到元素时挪用，用这个钩子函数可以界说一个绑按时执行一次的初始化行动。
inserted:被绑定元素插入父节点时挪用(父节点存在即可挪用，不存在于document中)
update:被绑定于元素地址的模板更新时挪用，而无论绑定值是否变革。通过对照更新前后的绑定值,可以忽略不须要的模板更新
componentUpadted:被绑定元素地址模板完成一次更新周期时挪用
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‘); } 2.Vue.extend结构器的延伸 一、什么是Vue.extend？Vue.extend 返回的是一个“扩展实例结构器”,也就是预设了部分选项的Vue实例结构器。经常处事于Vue.component用来生成组件，可以简单理解为当在模板中遇到该组件名称作为标签的自界说元素时，会自动挪用“扩展实例结构器”来出产组件实例，并挂载到自界说元素上。
二、自界说无参数标签我们想象一个需求，需求是这样的，要在博客页面多处显示作者的网名，并在网名上直接有链接地点。我们但愿在html中只需要写 ，这和自界说组件很像，但是他没有通报任何参数，只是个静态标签。
我们的Vue.extend该登场了，我们先用它来编写一个扩展实例结构器。代码如下：
var authorExtend = Vue.extend({ template:"<p><a :href=‘authorUrl‘>{{authorName}}</a></p>", data:function(){ return{ authorName:‘百度‘, authorUrl:‘‘ } } });这时html中的标签还是不起感化的，因为扩展实例结构器是需要挂载的，我们再进行一次挂载
new authorExtend().$mount(‘author‘); 三、挂载到普通标签上还可以通过HTML标签上的id或者class来生成扩展实例结构器，Vue.extend里的代码是一样的，只是在挂载的时候，我们用类似jquery的选择器的要领，来进行挂载就可以了。
new authorExtend().$mount(‘#author‘); 3.Vue.set全局操纵Vue.set 的感化就是在结构器外部操纵结构器内部的数据、属性或者要领。好比在vue结构器内部界说了一个count为1的数据，，我们在结构器外部界说了一个要领，要每次点击按钮给值加1.就需要用到Vue.set。
一、引用结构器外部数据：什么是外部数据，就是不在Vue结构器里里的data处声明，而是在结构器外部声明，然后在data处引用就可以了。外部数据的插手让措施越发灵活，我们可以在外部获取任何想要的数据形式，然后让data引用。
看一个简单的代码：
//在结构器外部声明数据 var outData={ count:1, goodName:‘car‘ }; var app=new Vue({ el:‘#app‘, //引用外部数据 data:outData }) 二、在外部转变数据的三种要领:1、用Vue.set转变
function add(){ Vue.set(outData,‘count‘,4); }2、用Vue东西的要领添加
app.count++;3、直接操纵外部数据
outData.count++;其实这三种方法都可以操纵外部的数据，Vue也给我们增加了一种操纵外部数据的要领。
三、为什么要有Vue.set的存在?
由于Javascript的限制，Vue不能自动检测以下改观的数组。
当你操作索引直接设置一个项时，vue不会为我们自动更新。
当你改削数组的长度时，vue不会为我们自动更新。