当前位置： 首页 > news >正文

MVC与MVVM

news 2026/5/11 15:57:43

MVC与MVVM举例说明

  • MVC
  • MVVM
  • 两者比较

MVC

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>mvc案例</title><link rel="stylesheet" href="">
</head><body><!-- 举一个例子，页面有一个 id 为 container 的 span，点击按钮会让其内容加 1 --><div><span id="container">0</span><button id="btn">+</button></div>
</body>
<script type="text/javascript">
function add(node) {// 业务逻辑处理const currentValue = parseInt(node.innerText);const newValue = currentValue + 1;// 更新视图node.innerText = newValue;
}
const button = document.getElementById('btn');
// 响应视图指令
button.addEventListener('click', () => {const container = document.getElementById('container');// 调用模型add(container);
}, false);
</script></html>

div部分是view（也就是我们常说的DOM）
监听click事件 是controller
add方法是model 会将结果渲染到view上

由此可见mvc是单向的。就好比学生去食堂打饭，说 我要吃土豆丝，那么打饭的阿姨就会盛一点土豆丝给该学生吃 。
mvc单向操作

MVVM

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>mvvm讲解应用</title><link rel="stylesheet" href=""><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head><body><div id="user"><h1>今天学习 {{ content }}</h1>mvvm如何实现数据双向绑定：<input type="text" v-model="message"></input></div><script type="text/javascript">const vm = new Vue({el: '#user',data: {content: 'MVVM模型哦',message: '修改操作'}})</script>
</body></html>

{{}}、v-bind、v-model三者区别
{{}} 从data中取对应的值;插值经常用在标签之间需要改变的html内容上

v-model与v-bind区别：

1、v-bind是单向绑定，用来绑定数据和属性以及表达式，只能将vue中的数据同步到页面。即M->V

2、v-model是双向绑定，不只能将vue中的数据同步到页面，而且可以将用户数据的数据赋值给vue中的属性。即V<==>VM

3、v-bind可以给任何属性赋值，v-model只能给具备value属性的元素进行数据双向绑定。

mvvm

在这里插入图片描述
注意 修改后的model也会改变 mvc模式则不会
在这里插入图片描述

两者比较

mvc 和 mvvm 其实区别并不大。都是一种设计思想，主要区别如下：1.mvc 中 Controller演变成 mvvm 中的 viewModel2.mvvm 通过数据来驱动视图层的显示而不是节点操作。3.mvc中Model和View是可以直接打交道的，造成Model层和View层之间的耦合度高。而mvvm中Model和View不直接交互，而是通过中间桥梁ViewModel来同步4.mvvm主要解决了:mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验

请不要私自转载 谢谢

相关文章：

MVC与MVVM

MVC与MVVM举例说明MVCMVVM两者比较MVC <!DOCTYPE html> <html><head><meta charset"utf-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><title>mvc案例</title><link rel"styleshe…...

编程日记 2023/2/16 11:10:18

Cortex-M0异常和中断

目录1.概念2.异常类型3.异常优先级定义4.向量表5.异常流程概述接受异常请求压栈和出栈异常返回指令末尾连锁延迟到达6.EXC_RETURN7.异常入口流程的细节压栈取出向量并更新PC寄存器更新8.异常退出流程的细节1.概念 异常是能够引起程序流偏离正常流程的事件&#xff0c;当异常发…...

编程日记 2023/2/16 11:09:10

数据库(6)--存储过程

一、学习目标 熟悉存储过程的定义和使用&#xff0c;熟练运用 select ,update ,insert ,delete 命令完成对学生信息数据库的查询、更新、添加、删除操作。 二、学习内容 学生&#xff08;学号&#xff0c;年龄&#xff0c;性别&#xff0c;系名&#xff09; 课程&#xff08;…...

编程日记 2023/2/16 11:08:03

c++ 指针、引用和常量

指针、引用和常量的关系_夜悊的博客-CSDN博客 1. ① 指针是对象&#xff0c;引用不是对象&#xff08;在此可以理解为变量&#xff0c;一个变量是一个对象&#xff09; 指针不必须初始化引用只是为一个已经存在的对象所起的另一个名字&#xff08;别名&#xff09;&#xff…...

编程日记 2023/2/16 11:06:48

1、HAL库UART 中断|DMA 自动回显接收数据

1、实现代码&#xff1a; stm32f4xx_hal_conf.h文件开启UART宏定义 #define HAL_UART_MODULE_ENABLED添加stm32f4xx_hal_uart.c和stm32f4xx_hal_dma.c到自己工程&#xff1b; 编写好的代码&#xff1a;usart_Driver.c /***************************************************…...

编程日记 2023/2/16 11:05:39

NPOI - ConditionalFormattingRule

NPOI 给xls(xlsx)创建条件格式 获取 XSSFSheetConditionalFormatting 对象 初始化 IWorkbook _workbook new XSSFWorkbook(); ISheet _dataSheet _workbook.GetSheet("template"); ISheetConditionalFormatting fcs _dataSheet.SheetConditionalFormatting;调用…...

编程日记 2023/2/16 11:04:32

JavaのString类这一篇就够了(包含StringBuffer_Builder)

1.&#x1f957;String类简介 在我们写代码的时候&#xff0c;String总是充斥着前前后后。 但你会不会经常力不从心&#xff0c; “这个*** 字符串怎么** 转换不成功啊” “*** 这个字符串到底是常量还是对象啊” “这*** 字符串内存结构到底* * * 是什么啊” “为啥我的字符串…...

编程日记 2023/2/16 11:03:24

C# dataGridView 导出表格 xls NPOI 2.4.1 版本

using NPOI.HSSF.UserModel; using NPOI.SS.UserModel; try { SaveFileDialog fileDialog new SaveFileDialog(); fileDialog.Filter “Excel(97-2003)|*.xls”; if (fileDialog.ShowDialog() System.Windows.Forms.DialogResult.Cancel) { return; } //不允许dataGridView…...

编程日记 2023/2/16 11:02:18

秒杀项目的消息推送

目录 一、创建消费者 二、创建订单链路配置 1.定义RabbitMQ配置类 2.创建RabbitmqOrderConfig配置类 三、如何实现RabbitMQ重复投递机制 1.开启发送者消息确认模式 2.消息发送确认 ① 创建ConfirmCallBacker确认模式 ② 创建ReturnCallBack退回模式 3.创建生产者 …...

编程日记 2023/2/16 11:01:10

最近开发及 vue3 几个小总结

只是单纯记录一下最近维护了几个项目之后的感触&#xff0c;也只是在自己现在水平上面的一些感觉。发发牢骚&#xff0c;水水文章 是否过度封装 可能水平不够吧&#xff0c;在 axios 封装的时候&#xff0c;只是把响应和拦截还有一些全局的配置封装了一下&#xff0c;并没有加…...

编程日记 2023/2/16 10:59:58

代谢组学分享-花青素通过调节氨基酸代谢改善糖尿病肾病的肾功能

代谢组学文献分享&#xff0c;文章标题&#xff1a;Anthocyanin improves kidney function in diabetic kidney disease by regulating amino acid metabolism 发表期刊&#xff1a;Journal of Translational Medicine 影响因子&#xff1a;8.44 作者单位&#xff1a;中山大…...

编程日记 2023/2/16 10:58:44

超简单！pytorch入门教程：Tensor

超简单&#xff01;pytorch入门教程&#xff1a;Tensor 一、pytorch安装 安装pytorch之前&#xff0c;需要安装好python&#xff08;废话&#xff09;&#xff0c;还没安装过python的宝宝请先移步到廖雪峰的python教程&#xff0c;待安装熟悉完之后&#xff0c;再过来这边。 …...

编程日记 2023/2/16 10:57:31

如何使用COCO数据集，注意事项

COCO数据集可用来训练目标检测&#xff0c;分类&#xff0c;实例分割等。 下面简单说下如何使用这个数据集&#xff0c; 数据集下载可用如下的代码进行&#xff0c;以2017为例。 # Download the image data. cd ./images echo "Downloading MSCOCO train images ...&quo…...

编程日记 2023/2/16 10:56:25

金三银四跳槽季，JAVA面试撸题就来【笑小枫】微信小程序吧~

JAVA面试撸题就来【笑小枫】微信小程序啦~ 疫情已过&#xff0c;金三银四即将到来&#xff0c;小伙伴们是否有跳槽的打算呢&#xff1f;不管有没有&#xff0c;技术不能丢&#xff0c;让我们一起来撸题吧。 博主最近整理了一批面试题&#xff0c;包括JAVA基础、多线程与锁、Red…...

编程日记 2023/2/16 10:55:15

分享115个HTML电子商务模板，总有一款适合您

分享115个HTML电子商务模板&#xff0c;总有一款适合您 115个HTML电子商务模板下载链接&#xff1a;https://pan.baidu.com/s/158y3jP0tv7ZikxNOBMKsSg?pwdt970 提取码&#xff1a;t970 Python采集代码下载链接&#xff1a;采集代码.zip - 蓝奏云 import os import shuti…...

编程日记 2023/2/16 10:54:09

Python 字符串

字符串是 Python 中最常用的数据类型。我们可以使用引号 ( 或 " ) 来创建字符串。创建字符串很简单&#xff0c;只要为变量分配一个值即可。例如&#xff1a;var1 Hello World!var2 "Python Runoob"Python 访问字符串中的值Python 不支持单字符类型&#xff…...

编程日记 2023/2/16 10:53:01

总线定义,车载总线:车载etherNet or CAN

总线的定义总线是连接多个设备或者接入点的数据传输通路。这里面的关键词是多个设备或者接入点&#xff0c;所以不要过于局限的看待总线。根据互联的设备/接入点不同&#xff0c;传输的数据带宽&#xff0c;速率&#xff0c;距离不同和应用场景的不同都可能有不同的总线。不同的…...

编程日记 2023/2/16 10:51:53

Python（for和while）循环嵌套及用法

Python 不仅支持 if 语句相互嵌套&#xff0c;while 和 for 循环结构也支持嵌套。 所谓嵌套&#xff08;Nest&#xff09;&#xff0c;就是一条语句里面还有另一条语句&#xff0c;例如 for 里面还有 for&#xff0c;while 里面还有 while&#xff0c;甚至 while 中有 for 或者…...

编程日记 2023/2/16 10:50:46

6万字电力行业系统解决方案光伏电站综合安防系统解决方案

【版权声明】本资料来源网络&#xff0c;知识分享&#xff0c;仅供个人学习&#xff0c;请勿商用。【侵删致歉】如有侵权请联系小编&#xff0c;将在收到信息后第一时间删除&#xff01;完整资料领取见文末&#xff0c;部分资料内容&#xff1a; 目录 第 一 章背景与需求 1.1行…...

编程日记 2023/2/16 10:49:37

[Android Studio]Android 数据存储--SQLite数据库存储

&#x1f7e7;&#x1f7e8;&#x1f7e9;&#x1f7e6;&#x1f7ea; Android Debug&#x1f7e7;&#x1f7e8;&#x1f7e9;&#x1f7e6;&#x1f7ea; Topic 发布安卓学习过程中遇到问题解决过程&#xff0c;希望我的解决方案可以对小伙伴们有帮助。 &#x1f4cb;笔记目…...

编程日记 2023/2/16 10:48:28

Zutilo：为Zotero研究者量身打造的高效文献管理增强插件

Zutilo&#xff1a;为Zotero研究者量身打造的高效文献管理增强插件 【免费下载链接】Zutilo Zotero plugin providing some additional editing features 项目地址: https://gitcode.com/gh_mirrors/zu/Zutilo 作为一名Zotero用户&#xff0c;你是否曾为批量管理标签而烦…...

编程新知 2026/5/11 15:30:21

PARD-SSM：基于概率状态空间模型的多阶段网络攻击检测

1. 项目概述在网络安全领域&#xff0c;传统的入侵检测系统(IDS)面临着多阶段攻击检测的严峻挑战。攻击者通常会按照"攻击链"(Kill Chain)的步骤逐步渗透系统&#xff0c;从最初的侦察阶段到最终的数据窃取&#xff0c;每个阶段的网络流量特征可能单独看起来都像是正…...

编程新知 2026/5/11 12:47:57

保姆级教程：在Colab上复现C3D论文的UCF101动作识别（附修改后代码与避坑指南）

从零复现C3D&#xff1a;3D卷积实战中的七个关键陷阱与解决方案 当你第一次在Colab上尝试运行C3D代码时&#xff0c;可能会遇到这样的场景&#xff1a;满怀期待地敲下训练命令&#xff0c;却在五分钟内连续遭遇视频帧提取报错、Keras版本冲突和显存不足的三重打击。这正是大多…...

编程新知 2026/5/11 8:30:28

HarmonyOS 6.0 跨端页面构建实践：从 UI 代码到热力交互卡片设计

HarmonyOS 6.0 跨端页面构建实践&#xff1a;从 UI 代码到热力交互卡片设计 前言 在 HarmonyOS 6.0 的跨端开发体系中&#xff0c;页面构建的核心目标已经从“能运行”逐步转向“高一致性体验 低成本跨端复用”。尤其是在多设备协同的场景下&#xff0c;一个 UI 组件不仅要适配…...

编程新知 2026/5/11 7:18:11

观察使用Token Plan套餐后月度AI调用成本的变化趋势

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 观察使用Token Plan套餐后月度AI调用成本的变化趋势 1. 项目背景与成本挑战 作为一个小型技术团队的负责人&#xff0c;我负责维护…...

编程新知 2026/5/11 6:02:07

kagent：把 Agent 当 Pod 来管，赌的是 Agent 的最终归宿是 K8s

我们写过用 kubectl apply -f deployment.yaml 起一个 Pod&#xff0c;写过用 Service 把它暴露出来&#xff0c;写过用 Operator 监听 CRD 自动调和状态。Solo.io 那群人 2025 年初做了一个看起来很自然、但没人提早做出来的事&#xff1a;把同一套思路平移到 AI Agent 上——…...

编程新知 2026/5/11 5:18:01

Cursor AI编辑器离线资源库：解决网络依赖，实现内网与定制化开发

1. 项目概述&#xff1a;一个AI代码编辑器的离线资源库最近在折腾Cursor这个AI代码编辑器&#xff0c;发现它确实能极大提升开发效率。但有个问题一直困扰着不少开发者&#xff1a;它的AI功能高度依赖网络&#xff0c;一旦网络环境不佳&#xff0c;或者你想在特定场景下&#x…...

编程新知 2026/5/11 4:24:58

构建本地化RAG系统：从原理到实践，打造完全离线的智能知识库助手

1. 项目概述&#xff1a;打造一个完全离线的智能知识库助手 最近在折腾一个挺有意思的东西&#xff0c;我把它叫做“本地化RAG系统”。简单来说&#xff0c;就是给你自己的电脑装上一个“大脑”&#xff0c;让它能读懂你硬盘里堆积如山的文档、代码、网页资料&#xff0c;然后…...

编程新知 2026/5/11 4:15:54

Google Translate PHP测试驱动开发：确保翻译质量的最佳实践指南

Google Translate PHP测试驱动开发&#xff1a;确保翻译质量的最佳实践指南 【免费下载链接】google-translate-php &#x1f524; Free Google Translate API PHP Package. Translates totally free of charge. 项目地址: https://gitcode.com/gh_mirrors/go/google-transla…...

编程新知 2026/5/11 4:02:58

基于Gradio与多模型代理的AI模拟面试系统实战部署指南

1. 项目概述与核心价值最近在准备技术面试&#xff0c;刷题刷到头晕&#xff0c;对着白板自言自语总觉得差点意思。市面上那些模拟面试工具&#xff0c;要么是纯文本问答&#xff0c;冷冰冰的&#xff1b;要么流程僵化&#xff0c;和真实面试里那种有来有回的对话感相去甚远。直…...

编程新知 2026/5/11 3:35:48