Vue中的MVVM【第三篇】-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue中的MVVM【第三篇】。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

大纲：

MVVM图示

Vue中的MVVM【第三篇】

🌈 一、MVVM简介

简单来说：MVVM（M-VM-M），一种更好的UI模式解决方案，MVVM通过数据双向绑定让数据自动地双向同步。

Vue中的MVVM【第三篇】

M(Model)：Model数据模型，json格式数据

V(View)：View视图，jsp、html

VM(ViewModel)：ViewModel视图模型

🌈 二、MVVM详解

我以MVVM图示来进行详解，View为Dom层，Model相当于对应的数据(js)，ViewModel相当于Vue实例；Data Bindings(绑定事件)，DOM Listeners(DOM监听)。

❓ 第一个问题(question)：若View和Model之间想要进行通信怎么处理呢？

🟢 answer：

首先，我们要知道 View 和 Model 它们俩是不能直接进行通信的，需要通过ViewModel，ViewModel帮助我们做了2件事。

🅰️ 会将我们 (Mode) data 中定义的数据绑定到 View(真实的Dom上) 中，我们只需编写ViewModel 固定的语法即可，至于里面具体什么数据；都会由ViewModel进行解析，解析完成更新到界面上。

❗️ 提示：

Model 是响应式的，数据一旦发生改变，它会自动监测到这个数据的改变，把最新的数据重新绑定到View界面上，故View上面显示的永远都是Model中最新的数据。

🅱️ 它实现了DOM Listener(DOM监听)，当DOM发生一些事件（如：点击、滚动、touch[触摸]事件等）时，可以监听到，并在需要的情况下改变对应的Data。

🌈 三、MVVM案例

在我第二篇的计数器案例中就有严格的MVVM思想。

⭐ View依然是我们的DOM
⭐ Model就是data中的数据
⭐ ViewModel就是我们创建的Vue对象实例

❓ 第二个问题(question)：它们之间如何工作呢 ?
🟢 answer：

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

Vue中的MVVM【第三篇】

🌈 四、MVVM总结

🍒 View层:

🥝1、视图层 (在我们前端开发中，通常就是DOM层)
   🥝 主要的作用：给用户展示各种信息。
🍒 Model层:
🥝2、数据层
   🥝 数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。🍒 ViewModel层:
🥝 3、视图模型层
     🥝  视图模型层是 View和Model 沟通的桥梁。
🅰 一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中
🅱另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。文章来源地址https://www.toymoban.com/news/detail-441720.html