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

2019年8月31日 139次阅读 来源: 大切图崽

媒介

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

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

  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>

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

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

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

结语

以上是切图崽对viewModel的一些深刻的认知，假如对viewModel特别是状况治理/数据绑定相干手艺感兴趣的同砚，请移步React/Angular2/Vue

    原文作者：大切图崽
    原文地址: https://segmentfault.com/a/1190000007177602
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞