核心提示：vue/angular构建MVVM视图问题描述早期前端崇尚mvc，js css dom尽量分开，数据请求是在js中，所以要在js中追加dom。较为麻烦。实际场景利用jquery请求一组数据在表格中显示...
vue/angular构建MVVM视图
问题描述
早期前端崇尚mvc，js css dom尽量分开，数据请求是在js中，所以要在js中追加dom。较为麻烦。
实际场景
利用jquery请求一组数据在表格中显示
$.post('/getArray',{},function(data){
for(var i in data){
$('table').append(''+data[i].name+''+data[i].age+'');
}
})
这种拼接字符串的方式有没有让你绝望呢。
双向绑定的mvvm模型和加强的dom组件应运而生，典型代表是angularjs（这里指1.x），vue也采用了类似的方式。angularjs2.x在我刚学了1.x后出的，而且变动特别大，简直就是个新框架（心痛）。vue的写法要更简单一些，这里我以vue为例介绍吧。
vue demo
引入vue.js文件，然后下面是常用的功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Demo</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>;
</head>
<body>
<p id="app">
<p>{{ text }}</p>-------------------文本双向绑定，双括号中可写js简单语句
<p v-html='html'></p>-----------innerhtml双向绑定
<p v-bind:hidden="hidden"></p>--属性值双向绑定
<input v-model="text"/>-------------input双向绑定（input中修改影响这个值）
<button v-on:click='f1'>click</button>----------事件监听绑定函数
<p>{{ text | f2 }}</p>--------------过滤器
<p v-if='!hidden'>if=true</p>---v-if是否显示(v-show扩展版本)
<p v-else>if=false</p>
<p v-for='item in arr'>{{item}}<p>--如果是map则(k,v) in arr
<mydom txt="xiaogenban"></mydom>-------自定义组件和props
</p>
<script>
//vue对象
new Vue({
el: '#app',
data: {
text: 'Hello',
html:'<h1>Hello</h1>',
hidden:true,
arr:[0,1,2,3]
},
methods:{
f1:function(){
alert('f1')
}
},
filters:{
f2:function(v){
while(v.length<10){
v+='x';
}
return v;
}
}
});
//组件声明注意这段代码应该放到new Vue前面
Vue.component('mydom', {
// 声明 props
props: ['txt'],
template: '<p>{{ txt.toUpperCase() }}</p>'
});
</script>
</body>
</html>
<script>
//vue对象
new Vue({
el: '#app',
data: {
text: 'Hello',
html:'Hello
', hidden:true, arr:[0,1,2,3] }, methods:{ f1:function(){ alert('f1') } }, filters:{ f2:function(v){ while(v.length<10){ v+='x'; } return v; } } }); //组件声明注意这段代码应该放到new Vue前面 Vue.component('mydom', { // 声明 props props: ['txt'], template: '{{ txt.toUpperCase() }}
' }); </script>这里一次性列出内容较多，但是却不难理解，vue用法和angularjs1很像，不过写法更简洁一些，有种小清新的感觉。双向绑定的可以轻松解决之前的字符串拼接，只需要将$.post回调函数中获得的data绑定到显示的data中即可，用上面的v-for轻松解决。写法非常舒服：
<p id="app">
<table>
<tr v-for='it in arr'><td>{{it.name}}</td><td>{{it.age}}</td></tr>
</table>
<button v-on:click='f1'>click</button>
</p>
<script>
new Vue({
el: '#app',
data: {
arr: [],
},
methods:{
f1:function(){
$.post('/getArray',{},function(ddd){
this.arr=ddd;
})
}
}
}
</script>
<script>
new Vue({
el: '#app',
data: {
arr: [],
},
methods:{
f1:function(){
$.post('/getArray',{},function(ddd){
this.arr=ddd;
})
}
}
}
</script>
小结
旧的写法中，接收数据后渲染dom，需要往原来dom中append追加，追加的时候往往要拼接字符串非常麻烦。vue和angularjs中通过双向绑定，在接收到数据的时候直接就能改变dom中显示的内容，开发思路上更为清晰了。
