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';
}
}
}
})
网友评论