建设部网站白蚁文件/百度搜索关键词热度
大纲：
MVVM图示
🌈 一、MVVM简介
简单来说：MVVM（M-VM-M），一种更好的UI模式解决方案，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中的数据。
🌈 四、MVVM总结
🍒 View层:
🥝1、视图层 (在我们前端开发中，通常就是DOM层)
🥝 主要的作用：给用户展示各种信息。
🍒 Model层:
🥝2、数据层
🥝 数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。🍒 ViewModel层:
🥝 3、视图模型层
🥝 视图模型层是 View和Model 沟通的桥梁。
🅰 一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中
🅱另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。