切图崽的自我修养－[MVVM] 进一步认知viewModel

前言

上一篇讲到了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>

1. 在#btn上绑定点击事件

2. 一旦捕获到点击事件，向后台发送一条ajax请求

3. 获得后台返回的数据response

4. 操做#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>

1. 声明一个vm(viewModel)做用域

2. (vue将dom的视图和你定义的data进行一个数据绑定)

3. 将#btn经过指令绑定一个点击事件

4. 一旦捕获到点击事件，向后台发送ajax请求

5. 获得后台返回的数据response

6. 更新data

7. (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