Day2——MVVM

矫情吗；* 2023-02-25 10:20 64阅读 0赞

### 文章目录 ###

*  一. 回顾
 *  二. Vue中的MVVM
 *  三. 计数器案例中的MVVM

# 一. 回顾 #

前面学习了[Day1——认识Vue][Day1_Vue]，今天了解MVVM

# 二. Vue中的MVVM #

**如下图：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70]

**M**：Model，数据模型层。数据可能是写死的数据，或者从网络上请求得来的数据

**V**：View，视图层。负责展示给用户看的界面，包含各种信息。在前端开发中，通常是DOM层。

**VM**：ViewModel，视图模型层。它是View和Model沟通的桥梁，作为中间者。一方面它实现了Data Binding（数据绑定），将Model的改变实时反应到View中。另一方面，它实现DOM Listener（DOM监听），当放生某些事件（点击、滚动、touch），能监听得到并改变相应的Data。

# 三. 计数器案例中的MVVM #

前面实现的计数器例子，它的MVVM如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 1]  
**工作原理：**

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

**总结：有了Vue帮助我们完成ViewModel的任务，在后续的开发中，我们可以专注于数据的处理，以及DOM的编写工作。**

[Day1_Vue]: https://blog.csdn.net/qq_40634846/article/details/107299168
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70]: /images/20230209/24623d5315f74df795276a7c2afc31c1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 1]: /images/20230209/983cfae371704850a0fbb9ad6b9e00ed.png