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

news2024/11/27 9:52:42

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.coloradmin.cn/o/1929641.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Qt | 绘制椭圆、弧、弦、扇形、圆角矩形

点击上方"蓝字"关注我们 01、简介 1、需要使用到的 QPainter 类中的函数 2、绘制椭圆的方法有 绘制给定矩形的内接椭圆和根据中心点与椭圆 x 方向和 y 方向的半径绘制,原理见下图 3、绘制弧、弦、扇形的原理: 1)、弧是椭圆上的一段曲线,因此其绘制方法就是首先…

【Apache Doris】周FAQ集锦:第 14 期

【Apache Doris】周FAQ集锦:第 14 期 SQL问题数据操作问题运维常见问题其它问题关于社区 欢迎查阅本周的 Apache Doris 社区 FAQ 栏目! 在这个栏目中,每周将筛选社区反馈的热门问题和话题,重点回答并进行深入探讨。旨在为广大用户…

企业全历史行为数据助ToB企业决策层开启营销的上帝视角

“上帝视角”是每个企业家都渴望拥有的。上帝视角的能力有多么吸引人呢?通常,一个企业家在技术、产品、营销中的任何一个领域拥有上帝视角的能力,就足可以让他的企业大杀四方,甚至创造历史。 在技术或产品领域,靠“上…

10.1 标注、注记图层和注记整体说明

文章目录 前言标注、注记图层和注记QGis中的标注QGis中的注释(Annotation)图层QGis中的注记 总结 前言 介绍标注、注记图层和注记说明:文章中的示例代码均来自开源项目qgis_cpp_api_apps 标注、注记图层和注记 有时地图需要使用一些文字信息说明其中的地理要素或其…

Android 性能优化之卡顿优化

文章目录 Android 性能优化之卡顿优化卡顿检测TraceView配置缺点 StricktMode配置违规代码 BlockCanary配置问题代码缺点 ANRANR原因ANRWatchDog监测解决方案 Android 性能优化之卡顿优化 卡顿检测 TraceViewStricktModelBlockCanary TraceView 配置 Debug.startMethodTra…

Python中的数据结构:五彩斑斓的糖果盒

在Python编程的世界里,数据结构就像是一个个五彩斑斓的糖果盒,每一种糖果都有其独特的味道和形状。这些多姿多彩,形状和味道各异的糖果盒子包括了:List(列表)、Tuple(元组)、Diction…

Redis主从部署

主从部署 整体架构图 需要再建两个CentOs7,过程重复单机部署 查看自己ip地址命令 ifconfig 192.168.187.137 进入redis所在目录 cd /opt/software/redis cd redis-stable 进入配置文件 vim redis.conf 修改分身1、2的配置文件 搜索replicaof replicaof 192.168.187.137 63…

笔记 2 : 课本第 3 章开始,记录 arm 的汇编指令的格式

(13) 介绍 arm 中的第一个汇编指令的用法 mov : (14)立即数的概念: (15) 汇编中的移位写法: 举例 : (16) 学习一个新的指令 cmp &a…

二叉树相关理论知识

二叉树是计算机科学中一种基础且重要的数据结构,它属于树形结构的一个重要类型。以下是二叉树的理论基础,包括定义、基本形态、特殊类型、性质以及遍历方式等方面的内容。 一、定义 二叉树(Binary Tree)是n(n≥0&…

【实战系列】PostgreSQL 专栏,基于 PostgreSQL 16 版本

我的 PostgreSQL 专栏介绍及进度 20240715:目前整体进度已完成 85%,完成 16 万字,还有近 5 万字就截稿了。 (venv312) ➜ mypostgres git:(dev) sh scripts/word_statistics_pg_style.sh Filename …

15分钟快速了解图新地球能做什么,解决什么问题,快速入门

1.图新地球桌面端是什么 1.1官方定义 图新地球桌面端(LSV)是一款集多源数据加载、应用分析、演示汇报为一体的三维GIS 软件。采用了中科图新自主研发的国产三维地图引擎,支持各类无人机航测、CAD、BIM、规划成果等多源数据的加载融合;实现了BIMGIS 技术在实际业务…

所有权与生命周期:Rust 内存管理的哲学

所有权与生命周期:Rust内存管理的哲学 博主寄语引言:编程语言的内存管理困境与 Rust 的解决方案。所有权基本概念:资源的绝对主权生命周期的理解与应用:编译时的守护神借用与引用的精妙设计:安全与效率的和谐共舞Rust …

Golang | Leetcode Golang题解之第231题2的幂

题目&#xff1a; 题解&#xff1a; func isPowerOfTwo(n int) bool {const big 1 << 30return n > 0 && big%n 0 }

C# Opencv实现本地以图搜图

地址&#xff1a;冯腾飞/本地以图搜图

shell脚本变量和运算

一、shell变量及赋值 1.1、shell的变量 变量是用来临时保存数据的&#xff0c;并且该数据时可以变化的&#xff0c;任何一个语言都离不开变量&#xff0c;如果某个内容需要多次使用并且会重复出现&#xff0c;这样就可以使用变量了&#xff0c;如果需要修改直接修改变量就可以…

InterSystems IRIS使用python pyodbc连接 windows环境,odbc驱动安装,DSN配置,数据源配置

一、创建的数据库和数据 SELECT 1SELECT $ZVERSIONCREATE TABLE MyApp.Person ( ID INT PRIMARY KEY, Name VARCHAR(100) NOT NULL, Age INT, Gender CHAR(1) );CREATE TABLE MyApp.Person2 ( ID INT PRIMARY KEY, Name VARCHAR(100) NOT NULL, Age INT, Gender CHA…

USB 转多路串口应用软件说明

概述 PL731模块实现1个USB接口转7个异步串口(USART[1-7])功能。用于为计算机扩展异步串口&#xff0c;满足大多数一对多应用场景。支持Windows 10及以上系统&#xff0c;绝大多数Linux系统。嵌入式Linux系统有可能经过裁剪&#xff0c;需要系统开发人员确保系统安装正式的驱动…

[Unity]碰撞器的接触捕获层详解

目录 前言※关闭效果器(Effector)的遮罩接触捕获层的官方描述官方描述的翻译和注解接触捕获层作用简介接触(Contact)和捕获(Capture)配置接触捕获层的作用※接触捕获层对碰撞响应的影响需要接触捕获的物理查询需要接触捕获的物理回调注意运行时(Runtime)修改接触的相互性总结 相…

关于普通接口转AXI接口AMM Master Bridge仿真和使用

平台&#xff1a;vivado2023.1 应用场景&#xff0c;在设计的过程中&#xff0c;在xilinx内部的IP采用AXI接口协议。而我们外部的FIFO&#xff0c;BRAM等接口有时候使用的Native接口。使用AMM Master Bridge IP将普通的native接口转换为AXI接口协议。 参考文件&#xff1a;pg…

C++ | Leetcode C++题解之第229题多数元素II

题目&#xff1a; 题解&#xff1a; class Solution { public:vector<int> majorityElement(vector<int>& nums) {int n nums.size();vector<int> ans;unordered_map<int, int> cnt;for (auto & v : nums) {cnt[v];}for (auto & v : cnt…