简单理解MVVM模型

什么是MVVM模式?

一、MVVM是 M - V - VM (模型-视图-视图模型)

  1. M是指Model 是模型:对应的是data中的数据(有自己写的,有通过请求从数据库中获取的)
  2. V是指View视图:是我们看到的页面 , 对应的是一大串的HTML+CSS+JS交互代码+等img一系列的资源
  3. VM是指ViewModel视图模型:是我们的Vue对象

二、要实现MVVM模式,那就要页面操作的时候,然后改变数据;或者是数据改变的时候,页面改变

三、V 变→ M 变 那就要DOM 监听,DOM监听才知道视图操作可能引起数据变了,若数据变了才会改变data中的数据。M变 → V变 那就要数据绑定,data数据变了,那就通过数据的绑定改变视图。所以MVVM模式是通过DOM监听 + 数据绑定 完成的

除了上面图片代表Vue以外,MVVM模型代表性的框架还有vue.js、react.js、angular.js等

优点:分离视图和模型,低耦合、可重用性、独立开发、可测试,而且轻量效率高等!

  • 6
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
MVVM是一种基于模型-视图-视图模型模式的软件架构模式。它主要用于开发现代化的用户界面应用程序,特别是在前端开发中广泛应用。 MVVM的示例可以通过一个简单的任务清单应用程序来说明。在这个例子中,模型代表数据,即任务列表和相关信息。视图是在屏幕上显示任务列表的用户界面。视图模型是连接模型和视图的中间层,处理逻辑和数据交互。 在这个示例中,我们可以使用Vue.js框架实现MVVM模式。首先,我们定义一个包含任务列表和相关方法的模型对象。然后,我们创建一个基于Vue.js的视图模型对象,并将模型绑定到视图模型中的数据属性上。我们还可以在视图模型中定义一些方法来处理用户交互。 在用户界面上,我们可以使用HTML和CSS来创建一个简单的任务清单视图。通过使用Vue.js的指令,我们可以将视图模型绑定到视图上,实现动态数据的显示和交互。当用户添加一个新任务或完成一个任务时,视图模型会处理相应的逻辑并更新模型中的数据,进而影响视图的显示。 通过使用MVVM模式,我们可以实现模块化和可维护性的前端开发。模型代表数据的获取和处理逻辑,视图负责界面展示,视图模型连接两者并处理逻辑和数据交互。这种分离使得代码更易于理解和维护,并且可以方便地进行单元测试。 总而言之,MVVM是一种优秀的软件架构模式,在实际开发中可以帮助我们构建现代化的用户界面应用程序。通过以上的例子,我们可以更好地理解MVVM的工作原理和优势。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值