vue2学习笔记7 - Vue中的MVVM模型

MVVM

Model-View-viewModel是一种软件架构模式,用于将用户界面(View)与业务逻辑(Model)分离,并通过ViewModel进行连接和协调。MVVM模式的目标是实现视图与模型的解耦,提高代码的可读性、可维护性和可测试性。

在MVVM模式中,View是用户界面的呈现层,负责展示数据和接收用户的输入。ViewModel是视图模型,负责处理View的状态、行为和交互逻辑。ViewModel通过数据绑定机制将数据从Model传递给View,并将用户的输入传递给Model进行处理。Model是应用程序的业务逻辑和数据模型,可以是数据库、API接口或其他数据源。

MVVM模式的核心思想是数据绑定,通过观察数据的变化,自动更新视图的内容,从而实现界面的更新和交互。这样可以减少手动操作视图的代码量,提高代码的复用性和可维护性。

Vue中的MVVM

Model: JS 一般对象,指的就是我们前面反复提起的Vue实例中的data中的数据

View:视图,代码中的模板。DOM,经过解析生成的页面DOM对象。

VM:视图模型(viewModel),Vue实例对象。通过DOM监听器,和前面提到的双向绑定特性,实现View和Model之间的数据传递。

以下图为例,Vue实例作为View和Model中的桥梁,通过一个框架,提供各种指令、API,实现了二者之间的关联。因此,经常看到用变量vm来代表所创建的Vue实例

 所以:

  • data中的所有属性(用户自定义),都出现在vm中(可以用console.log(vm)将vm打印出来观察);
  • vm中所有的属性和方法,不论私有还是暴露出来的,都可以在Vue模板中直接使用。(只是私有属性和方法使用时会有响应和更新的问题吧)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/378132.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

django报错(一):python manage.py makemigrations,显示“No changes detected”

执行python manage.py makemigrations命令无任何文件生成,结果显示“No changes detected”。 解决方案一: 1、执行命令:python manage.py makemigrations –empty appname 2、删除其中的0001_initial.py文件(因为这个文件内容是…

深度解析:disableHostCheck: true引发的安全迷局与解决之道

在Web开发的浩瀚星空中,开发者们时常会遇到各种配置与调优的挑战,其中disableHostCheck: true这一选项,在提升开发效率的同时,也悄然埋下了安全隐患的伏笔。本文将深入探讨这一配置背后的原理、为何会引发报错,以及如何…

Maven学习—如何在IDEA中配置Maven?又如何创建Maven工程?(详细攻略)

目录 前言 1.在IDEA中配置Maven 2.创建Maven项目 (1)Maven:创建普通Maven工程 (2)Maven Archetype:创建Maven模板工程 前言 本篇博客将详细的介绍在IDEA中如何配置Maven,以及如何创建一个Ma…

鸿蒙特色物联网实训室

一、 引言 在当今这个万物皆可连网的时代,物联网(IoT)正以前所未有的速度改变着我们的生活和工作方式。它如同一座桥梁,将实体世界与虚拟空间紧密相连,让数据成为驱动决策和创新的关键力量。随着物联网技术的不断成熟…

关于 Docker Registry (镜像仓库)

什么是镜像仓库 概念 镜像仓库(Docker Registry)负责存储、管理和分发镜像,并提供了登录认证能力,建立了仓库的索引。 镜像仓库管理多个 Repository,Repository 通过命名来区分。每个 Repository 包含一个或多个镜像…

WAF基础介绍

WAF 一、WAF是什么?WAF能够做什么 二 waf的部署三、WAF的工作原理 一、WAF是什么? WAF的全称是(Web Application Firewall)即Web应用防火墙,简称WAF。 国际上公认的一种说法是:Web应用防火墙是通过执行一…

[Labview] 表格单元格外边框 二维图片叠加绘图

最终效果如下所示 转行做Labview都没到三个月,主程居然让我做这么复杂的功能,真是看得起我/(ㄒoㄒ)/~~ 思路大致分为两步 1、确定每个框体的左上/右下单元格位置,转换为表格表格坐标并在二维图片上绘制生成; 2、为二维图片添加…

cuda缓存示意图

一、定义 cuda 缓存示意图gpu 架构示意图gpu 内存访问示意图 二、实现 cuda 缓存示意图 DRAM: 通常指的是GPU的显存,位于GPU芯片外部,通过某种接口(如PCIE)与GPU芯片相连。它是GPU访问的主要数据存储区域,用于存储大…

MBR40150FCT-ASEMI无人机专用MBR40150FCT

编辑:ll MBR40150FCT-ASEMI无人机专用MBR40150FCT 型号:MBR40150FCT 品牌:ASEMI 封装:TO-220F 批号:最新 最大平均正向电流(IF):40A 最大循环峰值反向电压(VRRM&a…

shell的变量及赋值

文章目录 一,shell变量是什么二,自定义变量1 . 查看和引用变量的值2 . echo选项3 . unset4 . 特殊符号5 . 括号 三,交互式定义变量1 . read2 . read 选项 四,变量的范围1 . export命令 五,数值变量的运算及特殊变量1 .…

鸿蒙Harmony--文本组件Text属性详解

金樽清酒斗十千,玉盘珍羞直万钱。 停杯投箸不能食,拔剑四顾心茫然。 欲渡黄河冰塞川,将登太行雪满山。 闲来垂钓碧溪上,忽复乘舟梦日边。 行路难,行路难,多歧路,今安在? 长风破浪会有…

浅析stm32启动文件

浅析stm32启动文件 文章目录 浅析stm32启动文件1.什么是启动文件?2.启动文件的命名规则3.stm32芯片的命名规则 1.什么是启动文件? 我们来看gpt给出的答案: STM32的启动文件是一个关键的汇编语言源文件,它负责在微控制器上电或复位…

探索数据结构与算法的奇妙世界 —— Github开源项目推荐《Hello 算法》

在浩瀚的编程与计算机科学领域中,数据结构与算法无疑是每位开发者攀登技术高峰的必经之路。然而,对于初学者而言,这条路往往布满了荆棘与挑战。幸运的是,今天我要向大家推荐一个令人振奋的项目——《Hello Algo》,它正…

在 Vue3 + Electron 中使用预加载脚本(preload)

文章目录 一、什么是预加载脚本(preload),为什么我们需要它二、通过预加载脚本暴露相关 API 至渲染进程1、实现获取系统默认桌面路径功能2、向剪切板写入内容3、使用系统默认浏览器访问目标 url4、使用文件选择对话框 三、参考资料 一、什么是预加载脚本(preload)&a…

负载测试和功率分析中负载箱的重要作用

在负载测试和功率分析中,负载箱扮演着至关重要的角色。以下是负载箱在这两个方面的重要作用: 一、负载测试中的重要作用 模拟实际负载条件: 负载箱能够模拟各种复杂的负载条件,包括电阻性负载、电感性负载、电容性负载等&#x…

【HarmonyOS开发】弹窗交互(promptAction )

实现效果 点击按钮实现不同方式的弹窗showToast showDialog showActionMenu 代码实现 1.引入’ohos.promptAction’ import promptAction from ohos.promptAction;2.通过promptAction 实现系统既定的弹窗 import promptAction from ohos.promptAction;Entry Component st…

Spring-Spring、IoC、DI、注解开发

1、Spring是什么 Spring是一个轻量级的控制反转(IoC)和面向切面(AOP)的容器(框架)。 Spring整体架构 Spring优点: Spring属于低侵入设计。IOC将对象之间的依赖关系交给Spring,降低组件之间的耦合,实现各个层之间的解耦,让我们更专注于业务…

数据库内核研发学习之路(三)创建postgres内置函数

本章之前已经讲明白了我们的postgres如何进行编译安装,这是很重要的一步,接下来就是学会对postgres进行小的改动,然后保证依然能够顺利编译安装运行! 本章续讲内容如何创建一个内置函数。 1、内置函数和用户自定义函数的区别 熟…

如何在所有docker命令前加上一个sudo

如果当前登录用户不是root不用,使用docker命令的时候,需要在前面加上一个sudo 提升权限。 但是每次都加,就感觉特别的麻烦,如何简化呢? 解决办法 打开你的shell配置文件(例如,如果你使用bash&am…

多媒体软件开发选择Animate软件还是Unity3D软件?

以下内容可能有一些片面,因为多媒体软件开发平台有很多,因为接触Animate和Unity3D比较多,所以这里仅对这两款进行分析! Animate软件与Unity3D软件都是经常在多媒体展馆中用来制作互动展示内容的,对于这两种开发平台&a…