Vue中的MVVM

2024-07-13 15:25| 来源: 网络整理| 查看: 265

什么是MVVM?

MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心，它是连接view和model的桥梁。 Vue中的MVVM View层：

视图层在我们前端开发中，通常就是DOM层。主要的作用是给用户展示各种信息。

Model层：

数据层数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。

ViewModel层：

视图模型层视图模型层是View和Model沟通的桥梁。一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中;另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。

实例：

计算器当前计数：{{ counter }} + - const app = new Vue({ el:"#app", data:{ counter: 0 }, methods:{ add: function() { this.counter++; }, sub: function() { this.counter--; } } }) 计数器的MVVM:

我们的计数器中就有严格的MVVM思想 View依然是我们的DOM Model就是我们我们抽离出来的obj ViewModel就是我们创建的Vue对象实例

它们之间如何工作呢？

首先ViewModel通过Data Binding让obj中的数据实时的在DOM中显示。其次ViewModel通过DOM Listener来监听DOM事件，并且通过methods中的操作，来改变obj中的数据。

【本文地址】

Vue中的MVVM

Vue中的MVVM

今日新闻

推荐新闻