vue 的全局API

vue 的全局API：在构造器外部用vue提供给我们的API函数来定义新的功能

---

vue2.0_Vue.directive自定义指令 

自定义的指令：

Vue.directive('');自定义指令中传递的3个参数：

el:指令所绑定的元素，可以用来直接操作DOM。

binding:一个对象，包含指令的很多信息。

vnode:Vue编译生成的虚拟节点

Vue.directive('dmeo',function(el,binding,vnode){  

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

     });      

  var app=new Vue({     

       el:'#app',         

   data:{            

    num:10,            

    color:'green'    

       },

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

在#app的作用域外面声明自定义指令，在外面进行解绑

解绑

function unbind(){       

     app.$destroy();     

   }

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');    

   vue2.0_Vue.extend扩展实例构造器

在构造器外面,构造一个模板$mount()手动挂载

Vue.extend

var authorExtend = Vue.extend({           

 template:"{{authorName}}",           

 data:function(){       

         return{                

    authorName:'JSPang',               

     authorUrl:'http://jspang.com'        

        }       

     }    

    });         

 console.log(new authorExtend());   

   new authorExtend().$mount('author');

vue2.0_Vue.set全局操作引用构造器外部数据

//在构造器外部声明数据

var outDate={count:1,goodName:'car'};

var app = new Vue({el:'#app'//引用外部数据data:outDate})

在外部改变数据的三种方法：

操作外部数据

1.用Vue.set改变function add(){vue.set(outData,'count',4);}

2.用Vue对象的方法添加：

app.count++;

3.直接操作外部数据outData.count++;

为什么要有Vue.set的存在？由于JavaScript的限制，Vue不能自动检测以下变动的数组当你利用索引直接设置一个项时，vue不会为我们自动更新。当你修改数组的长度时，vue不会为我们自动更新这时我们的界面是不会自动更新数组的，我们需要用Vue.set(app.arr,1,'ddd') 来设置改变，vue才会给我们自动更新，这就是Vue.set存在的意义。

vue2.0_生命周期（钩子函数）

Vue一共有10个生命周期函数，我们可以利用这些函数在vue的每个阶段都进行操作数据或者改变内容。

vue2.0_Template模板制作模板

1、在构造器里面直接建模版template:`我是选项模板`

2.在标签里面建模版

3.使用script标签写模板，可以外部引入

var app = new Vue({

el:'#app',

data:{

message:"hello Vue!"

},

template:'#demo3'

})

vue2.0_component_1Component 组件自定义组件

html里面不存在的标签全局的定义组件：

Vue.component('jspang',{

template:`我是全局的jspang组件

`})

注意：我们在js里注册一个组件，在html中调用它，这就是一个简单的一个组件的编写方法，并且它可以放到多个构造器的作用域里面局部的定义组件：

在构造器里面定义

var app = new Vue({

el:'#app',

components:{"panda":{template:'局部注册的panda标签'}

}

})

注意：在构造器里的components是加s的，而全局注册是不加s的组件和指令有什么区别：组件注册的是一个标签，而指令注册的是已有标签里的一个属性，在实际开发中我们还是用组件比较多，指令用的比较少，因为指令看起来封装的没那么好

vue2.0_component_2 定义属性并获取属性值

1.定义属性我们需要用到props选项，加上数组形式的属性名称

var app = new Vue({

el:'#app',

compoents:{'

panda':{template:`panda from {{here}}`,props:['here']}

}

})

2.属性中带'-' 的处理方式：使用小驼峰值进行换掉

3.在构造器里向组件中传值v-bind:xxxx

例子：

var app = new Vue({

el:'#app',

data:{  message:'sichun'},

components:{"panda":{template:`panda from{{here}}`

//这里面的props后面跟的是数组

props:['here']

}

}

})

vue2.0_component_3Component 父子组件关系

1、构造器外部写局部注册组件

var pandaComponent= {template:`Panda from china!`}

//构造器

var app = new Vue({

el:'#app',

components:{'panda':pandaComponent}

})

2.父子组件的嵌套var city= {template:`Panda from sichun!`}

var pandaComponent= {template:`Panda from china!`

//直接在声明里面嵌套一个子组件

components:{'city':city}}

//构造器

var app = new Vue({el:'#app',components:{'panda':pandaComponent}

})

vue2.0_component_4

var componentA={        

    template:`I'm componentA`        }  

      var componentB={            template:`I'm componentB`       }      

  var componentC={            template:`I'm componentC`        }     

         var app=new Vue({          

  el:'#app',      

      data:{             

   who:'componentA'       

     },         

components:{              

  "componentA":componentA,            

    "componentB":componentB,            

    "componentC":componentC,         

   },         

   methods:{              

  changeComponent:function(){              

      if(this.who=='componentA'){                

        this.who='componentB';             

       }else if(this.who=='componentB'){             

           this.who='componentC';           

         }else{                   

     this.who='componentA';                

    }           

     }          

  }  

      })