Day2——MVVM

矫情吗；* 2023-02-25 10:20 130阅读 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

发表评论取消回复

表情：

评论列表（有 0 条评论，130人围观）

还没有评论，来说两句吧...

相关阅读

相关 Day19_02_Vue教程之MVVM模式

MVVM模式一.什么是 MVVM? MVVM（Model-View-ViewModel）是一种软件架构设计模式，由微软 WPF（用于替代 WinForm，以前就是

谁践踏了优雅/ 2024年02月19日 21:39/ 0 赞/ 101 阅读

相关【Android】Dagger2 + MVVM

背景 -------------------- 一个标准的Android的MVVM架构是分层规划实现的，各层之间有清晰的依赖关系。借助`Dagger2`完成MVVM各层

你的名字/ 2023年07月12日 05:21/ 0 赞/ 134 阅读

相关 Day2

我希望我明年的今天英语阅读能力100%，英语听力进步很大，英语口语100 ，其实我英语很好，我天生擅长模仿各种口音不管中国各地方还是国外的，我喜欢模仿各种口音因为觉得很有意思

Dear 丶/ 2023年07月10日 08:20/ 0 赞/ 5 阅读

相关 Day2——MVVM

文章目录一. 回顾二. Vue中的MVVM 三. 计数器案例中的MVVM 一. 回顾前面学习了[Day1——认识Vue][Day1_Vue

矫情吗；*/ 2023年02月25日 10:20/ 0 赞/ 131 阅读

相关 MVVM

[原文链接][Link 1] > 目前客户端最流行的架构应该就是MVVM，然而在看了一些文章之后发现大部分是理论而并没有仔细讲解具体的架构方法和实践，这篇博客说说我在实际工作

悠悠/ 2022年10月01日 05:41/ 0 赞/ 241 阅读

相关 Linux-Day2

文件相关 Linux文件类型有七种，可通过ls -la来进行查看： ①”-” 表示这是一个普通文件 ②”d” 表示这是一个目录 ③”l” 表示这是一个符号链接文

末蓝、/ 2022年07月12日 07:08/ 0 赞/ 230 阅读

相关 Linux-Day2

文件相关 Linux文件类型有七种，可通过ls -la来进行查看： ①”-” 表示这是一个普通文件 ②”d” 表示这是一个目录 ③”l” 表示这是一个符号链接文

绝地灬酷狼/ 2022年07月12日 07:08/ 0 赞/ 227 阅读

相关 MVVM

mvvm和mvc区别： mvc和mvvm其实区别并不大，都是一种设计思想。主要就是mvc中Controller演变成mvvm中的viewModel。mvvm主要解决了mvc

客官°小女子只卖身不卖艺/ 2022年05月19日 10:12/ 0 赞/ 270 阅读

相关 Java_day2

第一部分:java代码中的注释 1.1:单行注释语法: // 1.2:多行注释语法: /\ 多行内容 \/ 1.3:文档

傷城~/ 2021年11月11日 12:56/ 0 赞/ 429 阅读

相关 2、MVVM

Vue中的MVVM 一、Vue 的 MVVM 1.1、View 层 1.2、Model 层 1.3、VueModel 层

Bertha 。/ 2021年09月24日 19:38/ 0 赞/ 397 阅读