前言
上一篇讲到了MVC/MVP/MVVM, 但其实一直还对MVVM中的VM部分存在一些理解问题, 敲了一遍vue的demo之后,加深了对VM的理解
例子
现在需求如下,有一个按钮<button id="#btn">ajax btn<button>
,点击之后,发送ajax请求,并将接收到的结果更新到<p id="msg"></p>
中
传统写法
<div id='container'>
<button id='btn'>ajax btn</button>
<p id='msg'></p>
</div>
<script>
$('#btn').on('click',function(){
var response = $.ajax(…).data;
$('#msg').text(response);
})
</script>
在#btn上绑定点击事件
一旦捕获到点击事件,向后台发送一条ajax请求
得到后台返回的数据response
操作#msg,将最新的response填进去
VM写法
<div id='container'>
<button id='btn' v-on='clickFun()'>ajax btn</button>
<p id='msg'>{{ response }}</p>
</div>
<script>
new Vue({
el: '#container',
data: {
response:'',
},
methods:{
clickFun:function(){
var response = $.ajax(…).data;
this.response = response;
}
}
})
</script>
声明一个vm(viewModel)作用域
(vue将dom的视图和你定义的data进行一个数据绑定)
将#btn通过指令绑定一个点击事件
一旦捕获到点击事件,向后台发送ajax请求
得到后台返回的数据response
更新data
(vue监听到data的变化,于是更新对应的视图)
对比传统的操作dom的方式和vm的方式,很容易看出来,vm只做了一件事情就是
将视图和数据绑定起来,免去了获取视图数据
和根据新数据更新视图
的繁琐操作,这样能使你更专注你的业务逻辑,而不用为了如何进行dom操作伤脑筋
以前我们要获取视图的源数据,采用的是$dom.val()/$dom.text()等操纵dom节点的方式. 但是有了vm, 我们获取视图数据的时候不用再去操纵dom节点了,而是通过
v-model
等指令直接获取视图上的数据 (感谢Vue的封装)以前我们根据新数据更新视图的时候,采用的是$dom.text()/$dom.html()等操纵dom节点的方式,但是有了vm, 我们根据新数据更新视图的时候不用再去操纵dom节点了,因为我们只要更改data的值,视图就会自动被更新 (感谢Vue的封装)
结语
以上是切图崽对viewModel的一些粗浅的认知,如果对viewModel特别是状态管理/数据绑定相关技术感兴趣的同学,请移步React/Angular2/Vue
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。