1

前言

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

clipboard.png

  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>

clipboard.png

  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的封装)

clipboard.png


结语

以上是切图崽对viewModel的一些粗浅的认知,如果对viewModel特别是状态管理/数据绑定相关技术感兴趣的同学,请移步React/Angular2/Vue


大切图崽
379 声望95 粉丝

一只切图崽