程序员经验分享-hwhale

面试官：你了解MVVM框架吗？（Vue MVVM详细介绍，一看就会）

2023-05-16

导语：随着前端的发展，MVVM思想越来越受到大家的欢迎，那么MVVM到底是什么呢？下面，我将简要介绍MVVM的思想，并从Vue的角度，分析具体代码中是怎么实现这种思想的。

目录

概述

Vue与MVVM

Demo代码展示

demo1

 demo2

概述

MVVM的英文全称是：Model、View、View-Model，是一种基于前端的架构模式

M：Model，即模型，在model层，定义数据和业务逻辑

V：View，即视图，ui界面，将数据和动态交互效果展示出来

VM：View-Model，视图模型，实现Model和View的通信：监听Model的数据改变，处理用户交互操作，并且重新渲染视图，更新页面

 注：上图来自维基百科

View层和View-Model层，借助数据双向绑定，即上图中的DataBinding，View层发生变化之后，View-Model层可以立即监控到，并进行处理，同时将处理的结果反映到View层的页面上

Vue与MVVM

Vue的开发者，也参考了MVVM思想，并进行了一些改进，设计了独特的Vue独有的模型。

 M：Model模型，对应的是data属性中的数据，需要写成一般的js对象，即上图中的plain JavaScript Objects

V：View视图，即Vue的模板Template，经过解析之后，形成的DOM页面

VM：ViewModel，即上图的绿色立方体所表示的Vue实例对象

上图中View和Model进行通信，有两条线：

一是Data Bindings：数据绑定，Model中的数据发生变化，Vue就将变化映射到页面上，另一个是DOM Listensers：DOM监听，一旦用户对页面进行操作，比如点击按钮，填写数据，Vue就将这种变化，映射到Model

那么，这在代码中是怎么体现这种思想的呢？

Demo代码展示

demo1

1.Model层通过ViewModel层，改变View层，View层通过ViewModel层，改变Model层

2.data中所有的属性，最后都出现在了vm身上。

3.vm实例对象身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用

 demo2

在实际的项目开发中，我们都是使用vue的脚手架来创建项目，这里我也是使用这种方法来新建一个demo项目，展示的是vue直接给我们生成的代码，我直接根据这些代码进行分析MVVM思想。

 红框表示的是一个vue实例对象，蓝框表示的是Model模型中的数据，橙框表示的是 View视图，紫框中的msg表示一个数据变量，需要从蓝框中的props中传过来

 注意：理解这个小项目，需要了解Vue组件化思想和脚手架的基本使用。

这个自动生成的Hello World案例的界面如下：

参考资料有：

https://zh.wikipedia.org/wiki/MVVM

Vue 实例 — Vue.js

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

面试官：你了解MVVM框架吗？（Vue MVVM详细介绍，一看就会） 的相关文章

  • github响应时间过长，无法访问此网站[已解决]

    某一天或某个时段总是出现 github 响应时间过长 xff0c 无法访问此网站的问题 获取github可以使用的DNS域名 通过站长工具 下的DNS查询 获取TTL值最小的 修改hosts配置 找到hosts xff08 域名解析文件 x

  • STM32（F407）—— 堆栈

    目录 1 SRAM 2 堆栈的作用 3 堆栈的设置 4 堆栈的实现 5 双堆栈机制 堆栈 是一种数据结构 堆栈都是一种数据项按序排列的数据结构 xff0c 只能在一端 称为栈顶 top 对数据项进行插入和删除 xff0c 相应地 xff0c

  • zabbix4.0学习五：Zabbix监控邮箱发送设置

    zabbix4 0学习五 xff1a Zabbix监控邮箱发送设置 文章目录 zabbix4 0学习五 xff1a Zabbix监控邮箱发送设置 前言配置centos安装mailx配置zabbix用户与报警媒介绑定 前言 zabbix里报警

  • STM32（F407）—— 存储区映射和存储器重映射

    Arm Cortex M4 处理器采用哈佛结构 xff0c 可以使用相互独立的总线来读取指令和加载 存储 数据 指令代码和数据都位于相同的存储器地址空间 xff0c 但在不同的地址范围 程序存储器 xff0c 数据存储器 xff0c 寄存器

  • MarkDown语法汇总

    文章目录 总览标题1 使用 号创建标题2 使用 61 和 号创建标题 段落1 换行2 字体格式3 删除线4 脚注5 下划线6 首行缩进7 字体颜色 大小 字体类型8 文本高亮 块引用1 嵌套块引用2 具有其他元素的块引用 列表1 有序列表2

  • 【VCU】详解S19文件（S-record）

    目录 1 概述 2 S record格式 3 S record类型 4 S19文件示例 5 校验和计算示例 6 参考 1 概述 Motorola S record是由Motorola创建的一种文件格式 xff0c 它以 ASCII十六进制

  • [ROS]（03）CMakeLists.txt详解

    文章只是个人学习过程中学习笔记 xff0c 主要参考ROS教程1 目录 1 概述2 CMakeLists txt文件2 1 遵循的格式和顺序2 2 文件解析2 3 find package 2 4 catkin package 1 概述 C

  • [ROS]（01）创建ROS工作空间

    文章只是个人学习过程中学习笔记 xff0c 主要参考ROS教程1 1 创建catkin工作空间 Catkin工作空间是一个文件夹 xff0c 可以在其中修改 构建和安装 catkin 包 span class token function

  • [ROS]（04）package.xml详解

    文章只是个人学习过程中学习笔记 xff0c 主要参考ROS教程1 1 概述 软件包 xff08 package xff09 清单 xff08 manifest xff09 是一个名为 package xml 2 的 XML 文件 xff0c

  • [ROS]（06）ROS通信 —— 话题（Topic）通信

    文章只是个人学习过程中学习笔记 xff0c 主要参考ROS教程1 目录 1 概念2 话题通信机制3 话题命令rostopic4 话题通信实操 键盘控制乌龟 xff08 turtlesim xff09 运动5 话题命令实操5 1 rostop

  • ubuntu18.04忘记密码后，如何重置密码的方法

    ubuntu18 04安装在VMware虚拟上 ubuntu18 04忘记密码后 xff0c 如何重置密码 xff1f 重启系统后 xff0c 当跳出如下图所示画面时 xff0c 按住Shift键不放 xff0c 等待 2 但出现如下图所示

  • [ROS]Ubuntu18.04下安装指定版本OpenCV

    Linux xff1a Ubuntu 18 04 ROS xff1a ROS Melodic 目录 1 获取 OpenCV 源代码2 安装所需的依赖软件包3 使用CMake从源代码编译OpenCV3 1 准备3 2 配置OpenCV3 3

  • [ROS]（12）ROS通信 —— 参数服务器（Parameter Server）通信

    文章只是个人学习过程中学习笔记 xff0c 主要参考ROS教程1 2 ROS xff08 01 xff09 创建ROS工作空间 ROS xff08 02 xff09 创建 amp 编译ROS软件包Package ROS xff08 03 x

  • zabbix4.0学习六：Zabbix监控日志

    zabbix4 0学习六 xff1a Zabbix监控日志 前言 我们希望监控日志 xff0c 在日志出现特定标识或字符串时打印出日志 xff0c 并邮件通知我们 xff0c 以便我们手动处理 xff08 当然使用动作可自动处理 xff09

  • 听说你会Promise？ 那么如何控制请求并发数呢？

    前言 现在面试过程当中 xff0c 手写题必然是少不了的 xff0c 其中碰到比较多的无非就是当属 请求并发控制了 现在基本上前端项目都是通过axios来实现异步请求的封装 xff0c 因此这其实是考你对Promise以及异步编程的理解了

  • [ROS]在VS Code下编写代码，汇总问题及解决办法

    Linux xff1a Ubuntu18 04 ROS xff1a melodic 在VS Code下编写代码 xff0c 汇总问题及解决办法 问题1 xff1a 编译C 43 43 代码可通过 xff0c 但抛出错误警告以及代码补全异常

  • 基本类型与包装（装箱）类型的区别

    Java的类型分为两部分 xff0c 一个是基本类型 xff08 primitive xff09 xff0c 如int double等八种基本数据类型 xff1b 另一个是引用类型 xff08 reference type xff09 xf

  • 学习笔记------关于字符串结束符'\0'、字符串定义方法

    字符串定义方法 有2种方法 xff1a 1 xff09 字符数组 2 xff09 字符指针 初始化 1 xff09 字符数组方式初始化大致3种 xff1a 1 char str 10 61 34 12345 34 或者char str 10

  • 树莓派连接vnc教程

    1 输入 sudo raspi config 进入到系统设置中开启vnc服务 2 进入后选择 Interfacing Options 进入 3 选择 VNC 进入 4 yes 下载软件 xff1a VNC Viewer 5 连接vnc xf

  • ubuntu 22.04设置root密码，与开启sshd服务

    1 sudo passwd root 直接输入两次密码即可完成 2 安装sshd服务 xff1a apt install ssh 3 启动ssh服务 systemctl start sshd 4 设置开机启动 xff1a systemctl

随机推荐

  • Python+Flask+Docker+Vue实现简单的股票数据统计

    闲暇时间实现了一个简单的股票数据统计功能 数据是从网上爬下来的 xff0c 页面支持按照股票名称 股票代码 股票类型 股价 市值等搜索并展示在下方列表 除了股票的基本信息以外 xff0c 还会显示其他炒股软件上不会展示的信息如流动比率 速动

  • [2020-07-23]备战考博的一点点经历

    首先声明 xff0c 博主只是个普通人 xff0c 不是北清复交那种天才选手 xff0c 本硕都是普通一本 xff0c 像个不断前进的蜗牛一样 xff0c 好不容易还有继续往上爬的机会 xff0c 所以博主只会从一个普通学生的视角去讲自己的

  • 遇见Java

    Java是一门面向对象的编程语言 xff0c 不仅吸收了C 43 43 语言的各种优点 xff0c 还摒弃了C 43 43 里难以理解的多继承 指针等概念 xff0c 因此Java语言具有功能强大和简单易用两个特征 Java语言作为静态面向

  • STM32F103移植FreeRTOS警告记录

    1 xff1a 新建MDK工程 xff0c 选择文件存放路径 xff0c 选择芯片型号 xff0c 创建一个USER文件 xff0c 复制自动创建的文件到USER文件中 xff0c 关闭程序 创建一个OBJ目标文件夹 xff0c 打开软件选

  • tensorflow实现简单的卷积神经网络

    1 卷积神经网络 xff08 Convolutional Neural Network xff0c CNN xff09 优点 xff1a xff08 1 xff09 直接使用图像的原始像素作为输入 xff0c 不必先使用SIFT等算法提取特

  • zabbix4.0学习八：JMX有能监控哪些监控项详说

    zabbix4 0学习八 xff1a JMX有能监控哪些监控项详说 文章目录 zabbix4 0学习八 xff1a JMX有能监控哪些监控项详说 前言远程连接tomcat远程连接java 前言 在使用jmx监控tomcat时一直好奇MBea

  • 排序算法之冒泡排序、选择排序、插入排序的区别与联系

    冒泡排序 xff08 1 xff09 算法 xff1a 假如有N项数据 第一趟 xff0c 将首项与第二项比较 xff0c 较小者放在前面 xff0c 较大者放后面 xff0c 然后比较第二项和第三项 xff0c 依次进行 xff0c 第一

  • 排序算法之快速排序算法

    核心思想 xff1a xff08 1 xff09 要排序的一组数据中取一个数为 基准数 xff08 2 xff09 通过一趟排序将要排序的数据分割成独立的两部分 xff0c 其中左边的数据都比 基准数 小 xff0c 右边的数据都比 基准数

  • 数据结构之树知识汇总——思维导图

  • Linux基础学习与VMWare的安装和使用

    一 Linux入门概述 1 1 概述 Linux内核最初只是由芬兰人林纳斯 托瓦兹 xff08 Linus Torvalds xff09 在赫尔辛基大学上学时出于个人爱好而编写的 Linux是一套免费使用和自由传播的类Unix操作系统 xf

  • OJ刷题之1035：列车长的烦恼

    OJ刷题之1035 xff1a 列车长的烦恼 1 题目以及要求2 题目解析3 代码思路 1 题目以及要求 description John是个小列车站的站长 xff0c 每次列车在这里重新编组时他就很烦恼 因为站上只有一个人字形的编组轨道

  • python数据可视化之matplotlib学习

    python数据可视化 xff1a Matplotlib的scatter函数详解 scatter 函数参数详解 xff1a scatter x y s 61 None c 61 None marker 61 None cmap 61 Non

  • Ubuntu16.04使用sudo apt-get install ，报错E: 无法获得锁 /var/lib/dpkg/lock-frontend - open (11: 资源暂时不可用)

    Ubuntu16 04 使用sudo apt get install git 安装git服务器 xff0c 结果出现下面的错误 E 无法获得锁 var lib dpkg lock frontend open 11 资源暂时不可用 E Una

  • python之机器学习案例实战：信用卡欺诈异常值检测

    案例背景 xff1a 有些人利用信用卡进行诈骗活动 xff0c 如何根据用户的行为 xff0c 来判断该用户的信用卡账单是否属于欺诈呢 xff1f 想获取数据集请点此处 在这个数据集中 xff0c 由于原始的用户数据具有一定的隐私 xff0

  • 信用卡欺诈检测数据集

    1 数据集简介 信用卡欺诈检测 xff0c 即异常检测 xff0c 指的是信用卡被盗刷的情况检测 该数据集中收集的是2013年9月欧洲人使用信用卡在两天内产生的交易数据 xff0c 其中284807笔交易中有492笔被盗刷 是机器学习与Py

  • 上手Vue：深度理解computed、watch及其区别

    computed xff08 计算属性 xff09 与watch xff08 侦听器 xff09 xff0c 是Vue中常用的属性 xff0c 那么什么时候该如何computed xff0c 什么时候该使用watch呢 xff1f 1 co

  • Zabbix自动发现和自动注册

    Zabbix自动发现和自动注册 文章目录 Zabbix自动发现和自动注册 前言客户端配置指定服务器自动发现添加自动发现规则创建自动发现动作添加linux主机自动发现动作添加Windows自动发现动作 查看客户端日记信息 xff1a acti

  • 深度理解Vue组件的子组件向父组件传递数据的通信方式，全面详细，看这一篇就够了，推荐收藏

    目录 Vue子组件向父组件传递数据的通信方式有很多 xff0c 我这里列举了三种 方法一 xff1a 使用props实现 方法二 xff1a 使用v on或者 64 xff0c 给组件Student的实例对象绑定一个自定义事件实现 方法三

  • Vue组件通信:任意组件之间进行通信

    之前一篇博客 xff0c 我们介绍了子组件向父组件通信的方法 xff0c 可以参考博客 xff1a 深度理解Vue组件的子组件向父组件传递数据的通信方式 xff0c 全面详细 xff0c 看这一篇就够了 xff0c 推荐收藏 czjl688

  • 面试官：你了解MVVM框架吗？（Vue MVVM详细介绍，一看就会）

    导语 xff1a 随着前端的发展 xff0c MVVM思想越来越受到大家的欢迎 xff0c 那么MVVM到底是什么呢 xff1f 下面 xff0c 我将简要介绍MVVM的思想 xff0c 并从Vue的角度 xff0c 分析具体代码中是怎么实

热门标签