vuejs 的使用
{{msg}}
{{name}}
//创建一个控制器
new Vue({
//选择器，控制器要去控制哪个标签，给哪个标签当中提供数据
el:'.box'.
//数据模型，给 el 选择出来的内容提供数据
data:{
msg:'hello world',
name:'xmg'
}
//另一种绑定方法
}).$mount('.box');
vuejs 的一些指令
- 不闪烁的数据绑定
- 如果数据中有 html 标签，则会被解析
- 显示标签
123
456
-
{{msg}}
-
- {{key}}--{{value}}
- 上述遍历是vue.js1.0，在 vue.js 2.0 中
- {{value}}--{{key}}
-
123
- vuejs 中没有
templateUrl，所以模版都写在标签中 -
双向绑定
// new Vue() 会返回当前的控制器，使用返回值的控制器可以直接调用里面的属性
var vue = new Vue({
data:{
name:'',
age:10
}
}).$mount('#box');
Vue.js 的事件
vuejs 中的事件指令都写在控制器下的methods:{} 中
{{age}}
//给指令键注册事件
vue.js 过滤器
{{name | uppercase | lowercase}}
{{price | currency '￥'}}
- {{value}}
- {{value}}
- 绑定控制器时，不建议绑定到 body\html 上，在 vue2.0当中这么做会报错；在 vue2.0 里，所有的内置过滤器都被删除了，以压缩框架体积，但是可以自定义过滤器
Vue.filter('xmgCurrency',function(input,a){
return a + input;
})
自定义指令
- Vue.directive 定义的指令都是以属性形式的 'Attribute'
Vue.directive('red',function(){
//在自定义指令当中可以拿到指令标签
this.el.style.background = 'red';
})
- 自定义指令可以传参数
Vue.directive('color',function(color){
this.el.style.background = color;
})
- 自定义元素指令
Vue.elementDirective('xmg-red',{
bind:function(){
this.el.style.background = 'red';
}
})
{{name}}
123456
77777
777788888
计算属性 get 方法和 set 方法的调用形式
- 点语法调用的是 get 方法
- 点等于调用的是 set 方法
new Vue({
el:'#app',
data:{
num:3,
price : 10,
},
methods:{
count(){
this.total; //会自动调用get方法
this.total = 10; //会自动调用set方法把10传给set方法
}
},
computed:{ //当中声明都是计算属性
//在每一个计算属性当中有两个方法，get方法与set方法
//get与set方法是自己调用的方法。
//get方法调用时机：当使用 this.total时会调用get方法 return的值，就是定义属性的值。
//想要获取属性时，会自动调用get方法
/*----------------------------*/
//set方法调用时机
//给该属性赋值是会自动调用set方法 this.total = 100; 会自动调用set 并且会把赋的值传给set的参数。
//在set方法当中，不能再使用.属性=value this.tataol = 100;
total:{
get(){
console.log('调用了get方法'+value);
return this.price * this.num + 1;
},
set(value){
this.total = 20;
}
},
age:{
get(){
console.log('调用了get方法'+value);
return this.price * this.num + 1;
},
set(value){
this.total = 20;
}
}
}
});
生命周期 钩子函数
在 vue2.0 钩子函数有所变化
var vue = new Vue({
el:'#app',
data:{
name:'hello',
price : 10,
curse:['css','js','html']
},
methods:{
destroyVue:function () {
alert(1);
vue.$destroy();
this.$destroy();
}
},
created:function(){ //钩子函数：在某个特定时期会自动调用相应的方法。
alert('实例已经创建'); //生命周期：从生到死的过程。
},
beforeCompile:function(){
alert('编译之前');
},
compiled:function(){
alert('编译之后');
},
ready:function(){
alert('准备插入到文档中');
},
beforeDestroy:function(){
alert('销毁之前');
},
destroyed:function(){
alert('销毁之后');
}
});
全局组件
组件本质就是模版
//创建了一个模版
var ext = Vue.extend({
template:'我是组件
'
});
//全局组件：在任何一个控制器当中都可以使用此组件
Vue.component('xmg',ext);
局部组件
- 局部组件：只能在自己声明的控制器中使用，可以定义多个
var ext = Vue.extend({
template:'我是组件
'
});
new Vue({
el:'.box1',
data:{
msg:'xmg'
},
components:{
xmg:ext,
gxq:{
template:'我是 gxq
'
}
}
})
组件绑定数据
- 当创建一个组件时，就是一个隔离作用域，里外数据不互通
/*创建了一个模板*/
var ext = Vue.extend({
template:'我是组件
'
});
/*局部组件：只能在自己声明的控制器当中来使用 ,可以定义多个*/
new Vue({
el:'.box1',
data:{
msg:'xmg'
},
components:{ //当创建一个组件是，就是一个隔离作用域。
xmg:ext,
gxq:{
data:function () {
return {
msg:'myMsg',
name:'name123'
}
},
methods:{
show(){
alert('show');
}
},
template:'我是gxq组件{{msg}}----{{name}}
'
}
}
});
组件的模版
new Vue({
el:'#app',
components:{
xmg:{
template:'#temp1' //不能使用templateUrl 来引用模板文件
//Vue考虑到性能性能原因。
//因为浏览器不能访问文件。angular当中使用url来访问一个文件，
// 它是发送了一个Ajax请求,拿到请求结果，插入到文档当中。
}
}
})
动态组件
xmg组件
'
},
xmg2:{
template:'xmg2组件
'
}
}
})
- es6.0 的函数写法
methods:{
change(){
this.name = 'xmg2';
}
}
父子组件
xmg组件{{name}}
- 1
- 2
- 3
- 4
- 5
我是子组件{{msg}}
',
//在使用组件时，外部可以传递一个值进来
//