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模板中直接使用。(只是私有属性和方法使用时会有响应和更新的问题吧)

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

力扣Hot100之两数之和

解法一: 双层循环暴力求解,先在数组的一个位置定住然后在这个位置的后续位置进行判断,如果两个数加起来等于目标和那么就返回 class Solution:def twoSum(self, nums: List[int], target: int) -> List[int]:for i,num in enumerate(num…

react Jsx基础概念和本质

什么是jsx jsx是JavaScript和XML(HTML)的缩写&#xff0c;表示在js代码中编写HTML模板结构&#xff0c;它是react中编写UI模板的方式 const message this is message function App(){return (<div><h1>this is title</h1>{message}</div>) } jsx优…

js补环境系列之剖析:原型、原型对象、实例对象三者互相转化(不讲废话、全是干货)

【作者主页】&#xff1a;小鱼神1024 【擅长领域】&#xff1a;JS逆向、小程序逆向、AST还原、验证码突防、Python开发、浏览器插件开发、React前端开发、NestJS后端开发等等 思考下&#xff1a;js补环境中&#xff0c;什么场景会用到原型、原型对象、实例对象&#xff1f; 举…

通过docker构建基于LNMP的WordPress项目

目录 1.准备nginx 2.准备mysql 3.准备php 4.构建各镜像 5.运行wordpress 1、项目环境&#xff1a; 1.1 &#xff08;1&#xff09;公司在实际的生产环境中&#xff0c;需要使用Docker 技术在一台主机上创建LNMP服务并运行Wordpress网站平台。然后对此服务进行相关的性能…

《昇思25天学习打卡营第07天|qingyun201003》

日期 心得 越往后&#xff0c;越看不懂&#xff0c;只能说是有了解到如何去训练模型代码&#xff0c;对于模型代码该如何去保存&#xff0c;如何通过网络模型去训练。只能一步步来&#xff0c;目前来说是推进度&#xff0c;等后面全部有了认知&#xff0c;再回来重新学习 昇思…

防火墙NAT地址转换和智能选举综合实验

一、实验拓扑 目录 一、实验拓扑 二、实验要求&#xff08;接上一个实验要求后&#xff09; 三、实验步骤 3.1办公区设备可以通过电信链路和移动链路上网(多对多的NAT&#xff0c;并且需要保留一个公网IP不能用来转换) 3.2分公司设备可以通过总公司的移动链路和电信链路访…

网易天音:网易云音乐推出的一站式AI音乐创作工具

网易天音是一款由网易云音乐推出的AI音乐创作工具&#xff0c;它为音乐爱好者和专业歌手提供了一个便捷高效的创作平台。用户可以通过输入灵感&#xff0c;利用AI技术辅助完成作词、作曲、编曲和演唱&#xff0c;生成初稿后还可以进行词曲协同调整&#xff0c;以满足个性化的音…

MySQL 执行引擎 事务 锁 日志

MySQL 执行引擎 事务 锁 日志 一、执行引擎二、事务三、锁四、日志 一、执行引擎 1、查询设置引擎 -- 查询当前数据库支持的存储引擎&#xff1a;默认的执行引擎是innoDB 支持事务&#xff0c;行级锁定和外键 show engines;-- 查看当前的默认存储引擎&#xff1a; show var…

5.串口通信

文章目录 串口的介绍TTLRS-232RS-485 分类方式串口并口同步异步 相关寄存器SCONPCONTMODSBUFIE 中断处理函数代码编写main.cdelay.cdelay.hUart.cUart.hmain.h回环 继电器ESP8266AT指令代码编写main.cdefine.cdefine.hsend.csend.hreceive.cdelay.cdelay.h 串口的介绍 UART&am…

Sentinel限流算法:滑动时间窗算法、漏桶算法、令牌桶算法。拦截器定义资源实现原理

文章目录 滑动时间窗算法基本知识源码算法分析 漏桶算法令牌桶算法拦截器处理web请求 滑动时间窗算法 基本知识 限流算法最简单的实现就是使用一个计数器法。比如对于A接口来说&#xff0c;我要求一分钟之内访问量不能超过100&#xff0c;那么我们就可以这样来实现&#xff1…

Java面试八股之Redis Stream的实现原理及应用场景

Redis Stream的实现原理及应用场景 Redis Stream是一种在Redis 5.0版本中引入的数据结构&#xff0c;它主要用于实现高效的消息队列服务。下面我将详细解释其实现原理以及一些常见的应用场景。 实现原理 1. 结构组成&#xff1a; - Redis Stream由一个或多个消息组成&#xf…

链接追踪系列-00.es设置日志保存7天-番外篇

索引生命周期策略 ELK日志我们一般都是按天存储&#xff0c;例如索引名为"zipkin-span-2023-03-24"&#xff0c;因为日志量所占的存储是非常大的&#xff0c;我们不能一直保存&#xff0c;而是要定期清理旧的&#xff0c;这里就以保留7天日志为例。 自动清理7天以前…

.NET MAUI开源架构_2.什么是 .NET MAUI?

1.什么是.NET MAUI&#xff1f; .NET 多平台应用 UI (.NET MAUI) 是一个跨平台框架&#xff0c;用于使用 C# 和 XAML 创建本机移动和桌面应用。使用 .NET MAUI&#xff0c;可从单个共享代码库开发可在 Android、iOS、macOS 和 Windows 上运行的应用。 .NET MAUI 是一款…

主机安全-开源HIDS字节跳动Elkeid安装使用

目录 概述什么是HIDSHIDS与NIDS的区别EDR、XDR是啥&#xff1f; Elkeid架构Elkeid Agent && Agent centerElkeid DriverElkeid RASPElkeid HUBService DiscoveryManager安装数据采集规则&告警 参考 概述 什么是HIDS HIDS&#xff08; host-based intrusion detec…

Java-寻找二叉树两结点最近公共祖先

目录 题目描述&#xff1a; 注意事项&#xff1a; 示例&#xff1a; 示例 1&#xff1a; 示例 2&#xff1a; 示例 3&#xff1a; 解题思路&#xff1a; 解题代码&#xff1a; 题目描述&#xff1a; 给定一个二叉树, 找到该树中两个指定节点的最近公共祖先。 百度百科…

怎么关闭Windows安全中心?

Windows安全中心是Windows操作系统中的一项重要功能&#xff0c;系统提供这个功能的目的是保护电脑免受各种安全威胁。尽管如此&#xff0c;有时候我们可能出于某些原因需要关闭它。本文将详细介绍如何关闭Windows安全中心&#xff0c;以及需要注意的事项。 重要提醒&#xff1…

kubernetes k8s 控制器 Replicaset 配置管理

目录 1、Replicaset控制器&#xff1a;概念、原理解读 1.1 Replicaset概述 1.2 Replicaset工作原理&#xff1a;如何管理Pod&#xff1f; 2、 Replicaset资源清单文件编写技巧 3、Replicaset使用案例&#xff1a;部署Guestbook留言板 4、Replicaset管理pod&#xff1a;扩…

CUDA编程00 - 配置CUDA开发环境

第一步&#xff1a;在一台装有Nvidia显卡和驱动的机器上&#xff0c;用nvidia-smi命令查看显卡所支持cuda版本 第二步&#xff1a; 到Nvidia官网下载CUDA Toolkit并安装&#xff0c;CUDA Toolkit Archive | NVIDIA Developer 安装时按提示下一步即可&#xff0c;安装完成用 nv…

【Harmony】SCU暑期实训鸿蒙开发学习日记Day1

关于ArkTS和ArkUI&#xff0c;基础语法请看&#x1f449;官方开发手册 系统学习后&#xff0c;聊聊几个点&#xff0c;面向刚学习这门语言的小白&#xff0c;用于巩固和回顾&#x1f60b; 目录 类型推断应用 函数相关 布局方式 线性布局 堆叠布局 网格布局 弹性布局 …

补充.IDEA的使用

首先我们要了解在idea中Java工程由项目&#xff08;project&#xff09;、模块&#xff08;module&#xff09;包&#xff08;package&#xff09;、类&#xff08;class&#xff09;组成。 他们之间的关系是project包含module包含package包含class。 所以我们要按照先建一个pr…