含羞草

作文导读：




0332afac3bf2d60d72fe69db0cc263274290dd686145b-Xeebvn.jpeg

官网：http://cn.vuejs.org/
与angular类似的一个MVVM框架。
与DOM的行为驱动不同、vue以及angular是以数据作为驱动操作页面变化。


基本格式


以json的形式、将数据(支持所有格式)挂载在vue的data上、方法挂载在vue的methods上。
new Vue({
el:'#box',
//数据
data:{
key:'welcome vue',
arr:['apple','banana','orange','pear'],
json:{a:'apple',b:'banana',c:'orange'}
}
//方法
methods:{
add:function(){
//push 添加元素
this.arr.push('tomato');
}
}
//计算属性
computed:{
//默认为get方法
b:function(){
//业务逻辑代码
return 2;
}
//内部可以实现set、get两个方法
c:{
get:function(){
return this.a+2;
},
set:function(val){
this.a=val-2;
}
}
},
components:{ //局部组件---详见组件
'my-aaa':Aaa
}
});
//钩子函数(生命周期)
created:function(){
alert('实例已经创建');
}
//自定义过滤器
Vue.filter('toDou',function(val,a,b){
return val<10?'0'+val:''+val;
});
//自定义指令
Vue.directive('red',function(){
this.el.style.background='red';
});



常用指令





双向数据绑定v-model:"key"




将{key:value}于input双向绑定。
改动时其余部分的{{key}}也会随之替换。


循环v-for

{{value}}

value为内容、$index为索引、$key为字典(json)独有。
//针对json格式的数据还有以下写法

{{k}} {{v}}

k为key、v为value
重复数据有事不予展示:track-by="$index/uid"添加索引

{{k}} {{v}}

显示隐藏v-show
data:{ //数据




a:true
}