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

iKcamp 发布于2019-08-20 11:37 / 1330人阅读

摘要：前言上一篇讲到了但其实一直还对中的部分存在一些理解问题敲了一遍的之后，加深了对的理解例子现在需求如下，有一个按钮，点击之后，发送请求，并将接收到的结果更新到中传统写法在上绑定点击事件一旦捕获到点击事件，向后台发送一条请求得到后台返回的数据操

前言

上一篇讲到了MVC/MVP/MVVM, 但其实一直还对MVVM中的VM部分存在一些理解问题, 敲了一遍vue的demo之后，加深了对VM的理解

例子

现在需求如下，有一个按钮

在#btn上绑定点击事件

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

得到后台返回的数据response

操作#msg,将最新的response填进去

VM写法

    
        
        {{ response }}

声明一个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

服务器托管专线服务切图崽 ViewModel 图像识别数学修养认知美学

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80671.html

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

摘要：前言上一篇讲到了但其实一直还对中的部分存在一些理解问题敲了一遍的之后，加深了对的理解例子现在需求如下，有一个按钮，点击之后，发送请求，并将接收到的结果更新到中传统写法在上绑定点击事件一旦捕获到点击事件，向后台发送一条请求得到后台返回的数据操前言上一篇讲到了MVC/MVP/MVVM, 但其实一直还对MVVM中的VM部分存在一些理解问题, 敲了一遍vue的demo之后，加深了对VM的理...

yuanzhanghu 2019-08-29 11:26 评论0 收藏0
切图崽的自我修养－[MVVM] 进一步认知viewModel

摘要：前言上一篇讲到了但其实一直还对中的部分存在一些理解问题敲了一遍的之后，加深了对的理解例子现在需求如下，有一个按钮，点击之后，发送请求，并将接收到的结果更新到中传统写法在上绑定点击事件一旦捕获到点击事件，向后台发送一条请求得到后台返回的数据操前言上一篇讲到了MVC/MVP/MVVM, 但其实一直还对MVVM中的VM部分存在一些理解问题, 敲了一遍vue的demo之后，加深了对VM的理...

zhonghanwen 2019-08-05 10:14 评论0 收藏0
切图崽的自我修养－[MVVM] 进一步认知viewModel

摘要：前言上一篇讲到了但其实一直还对中的部分存在一些理解问题敲了一遍的之后，加深了对的理解例子现在需求如下，有一个按钮，点击之后，发送请求，并将接收到的结果更新到中传统写法在上绑定点击事件一旦捕获到点击事件，向后台发送一条请求得到后台返回的数据操前言上一篇讲到了MVC/MVP/MVVM, 但其实一直还对MVVM中的VM部分存在一些理解问题, 敲了一遍vue的demo之后，加深了对VM的理...

Little_XM 2019-08-01 15:51 评论0 收藏0
切图崽的自我修养－[MVVM] Js MV*模式浅谈

摘要：在没有环境下对进行单元测试的时候，应用逻辑正确性是无法验证的更新的时候，无法对的更新操作进行断言。对是通过接口进行，在对进行不依赖环境的单元测试的时候。这里根据上面的例子给出了的单元测试样例。年微软工程师在自己的博客上首次公布了模式。前言做客户端开发、前端开发对MVC、MVP、MVVM这些名词不了解也应该大致听过，都是为了解决图形界面应用程序复杂性管理问题而产生的应用架构模式。网上...

mykurisu 2019-08-05 10:13 评论0 收藏0
切图崽的自我修养－[MVVM] Js MV*模式浅谈

摘要：在没有环境下对进行单元测试的时候，应用逻辑正确性是无法验证的更新的时候，无法对的更新操作进行断言。对是通过接口进行，在对进行不依赖环境的单元测试的时候。这里根据上面的例子给出了的单元测试样例。年微软工程师在自己的博客上首次公布了模式。前言做客户端开发、前端开发对MVC、MVP、MVVM这些名词不了解也应该大致听过，都是为了解决图形界面应用程序复杂性管理问题而产生的应用架构模式。网上...

bluesky 2019-08-20 11:31 评论0 收藏0