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";
}
}
}
})
- 上一篇：没有了
- 下一篇：没有了
