MVC与MVVM
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是单向的。就好比学生去食堂打饭，说 我要吃土豆丝，那么打饭的阿姨就会盛一点土豆丝给该学生吃 。
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属性的元素进行数据双向绑定。
注意 修改后的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…...
Cortex-M0异常和中断
目录1.概念2.异常类型3.异常优先级定义4.向量表5.异常流程概述接受异常请求压栈和出栈异常返回指令末尾连锁延迟到达6.EXC_RETURN7.异常入口流程的细节压栈取出向量并更新PC寄存器更新8.异常退出流程的细节1.概念 异常是能够引起程序流偏离正常流程的事件，当异常发…...
数据库(6)--存储过程
一、学习目标 熟悉存储过程的定义和使用，熟练运用 select ,update ,insert ,delete 命令完成对学生信息数据库的查询、更新、添加、删除操作。 二、学习内容 学生（学号，年龄，性别，系名） 课程（…...
c++ 指针、引用和常量
指针、引用和常量的关系_夜悊的博客-CSDN博客 1. ① 指针是对象，引用不是对象（在此可以理解为变量，一个变量是一个对象） 指针不必须初始化引用只是为一个已经存在的对象所起的另一个名字（别名）ÿ…...
1、HAL库UART 中断|DMA 自动回显接收数据
1、实现代码： stm32f4xx_hal_conf.h文件开启UART宏定义 #define HAL_UART_MODULE_ENABLED添加stm32f4xx_hal_uart.c和stm32f4xx_hal_dma.c到自己工程； 编写好的代码：usart_Driver.c /***************************************************…...
NPOI - ConditionalFormattingRule
NPOI 给xls(xlsx)创建条件格式 获取 XSSFSheetConditionalFormatting 对象 初始化 IWorkbook _workbook new XSSFWorkbook(); ISheet _dataSheet _workbook.GetSheet("template"); ISheetConditionalFormatting fcs _dataSheet.SheetConditionalFormatting;调用…...
JavaのString类这一篇就够了(包含StringBuffer_Builder)
1.🥗String类简介 在我们写代码的时候，String总是充斥着前前后后。 但你会不会经常力不从心， “这个*** 字符串怎么** 转换不成功啊” “*** 这个字符串到底是常量还是对象啊” “这*** 字符串内存结构到底* * * 是什么啊” “为啥我的字符串…...
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…...
秒杀项目的消息推送
目录 一、创建消费者 二、创建订单链路配置 1.定义RabbitMQ配置类 2.创建RabbitmqOrderConfig配置类 三、如何实现RabbitMQ重复投递机制 1.开启发送者消息确认模式 2.消息发送确认 ① 创建ConfirmCallBacker确认模式 ② 创建ReturnCallBack退回模式 3.创建生产者 …...
最近开发及 vue3 几个小总结
只是单纯记录一下最近维护了几个项目之后的感触，也只是在自己现在水平上面的一些感觉。发发牢骚，水水文章 是否过度封装 可能水平不够吧，在 axios 封装的时候，只是把响应和拦截还有一些全局的配置封装了一下，并没有加…...
代谢组学分享-花青素通过调节氨基酸代谢改善糖尿病肾病的肾功能
代谢组学文献分享，文章标题：Anthocyanin improves kidney function in diabetic kidney disease by regulating amino acid metabolism 发表期刊：Journal of Translational Medicine 影响因子：8.44 作者单位：中山大…...
超简单！pytorch入门教程：Tensor
超简单！pytorch入门教程：Tensor 一、pytorch安装 安装pytorch之前，需要安装好python（废话），还没安装过python的宝宝请先移步到廖雪峰的python教程，待安装熟悉完之后，再过来这边。 …...
如何使用COCO数据集，注意事项
COCO数据集可用来训练目标检测，分类，实例分割等。 下面简单说下如何使用这个数据集， 数据集下载可用如下的代码进行，以2017为例。 # Download the image data. cd ./images echo "Downloading MSCOCO train images ...&quo…...
金三银四跳槽季，JAVA面试撸题就来【笑小枫】微信小程序吧~
JAVA面试撸题就来【笑小枫】微信小程序啦~ 疫情已过，金三银四即将到来，小伙伴们是否有跳槽的打算呢？不管有没有，技术不能丢，让我们一起来撸题吧。 博主最近整理了一批面试题，包括JAVA基础、多线程与锁、Red…...
分享115个HTML电子商务模板，总有一款适合您
分享115个HTML电子商务模板，总有一款适合您 115个HTML电子商务模板下载链接：https://pan.baidu.com/s/158y3jP0tv7ZikxNOBMKsSg?pwdt970 提取码：t970 Python采集代码下载链接：采集代码.zip - 蓝奏云 import os import shuti…...
Python 字符串
字符串是 Python 中最常用的数据类型。我们可以使用引号 ( 或 " ) 来创建字符串。创建字符串很简单，只要为变量分配一个值即可。例如：var1 Hello World!var2 "Python Runoob"Python 访问字符串中的值Python 不支持单字符类型ÿ…...
总线定义,车载总线:车载etherNet or CAN
总线的定义总线是连接多个设备或者接入点的数据传输通路。这里面的关键词是多个设备或者接入点，所以不要过于局限的看待总线。根据互联的设备/接入点不同，传输的数据带宽，速率，距离不同和应用场景的不同都可能有不同的总线。不同的…...
Python（for和while）循环嵌套及用法
Python 不仅支持 if 语句相互嵌套，while 和 for 循环结构也支持嵌套。 所谓嵌套（Nest），就是一条语句里面还有另一条语句，例如 for 里面还有 for，while 里面还有 while，甚至 while 中有 for 或者…...
6万字电力行业系统解决方案光伏电站综合安防系统解决方案
【版权声明】本资料来源网络，知识分享，仅供个人学习，请勿商用。【侵删致歉】如有侵权请联系小编，将在收到信息后第一时间删除！完整资料领取见文末，部分资料内容： 目录 第 一 章背景与需求 1.1行…...
[Android Studio]Android 数据存储--SQLite数据库存储
🟧🟨🟩🟦🟪 Android Debug🟧🟨🟩🟦🟪 Topic 发布安卓学习过程中遇到问题解决过程，希望我的解决方案可以对小伙伴们有帮助。 📋笔记目…...
学校节能降耗减排方案——能耗监管平台的建设及效果剖析
摘要：作为崭新的校园能耗管理手段，能耗监测平台以传统管理方式无法企及的优势有力地提升了高校能源管理工作的水平．从而受到了相关管理者的青睐。本文梳理总结了高校能耗监测平台的基本组成和优势特点，同时对能耗平台建设和使用中…...
探索IP地址的应用
无论是互联网行业还是传统行业都会用到网络，作为企业如何维护网络安全，保障网站不被攻击，数据不被泄露等。这个时候我们就会通查询IP归属地，辅助企业解决安全问题。下面介绍一下ip归属地在各行业的具体应用。1.网安行业应用一&…...
点赞破万！阿里面试官总结的2022最新1685页Java面试宝典太全了
程序员入职企业的难度也在持续加大，如何顺利通过面试成为了大家所关心的话题。针对这些人群的需求，小编从阿里找来一份让大家在求职过程中旗开得胜！是从什么时候开始准备的？大概的我已经记不清了，可能是 4 月份左右开始…...
项目搭建规范
一. 代码规范 1.1. 集成editorconfig配置 EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。 # http://editorconfig.org root true [*] # 表示所有文件适用 charset utf-8 # 设置文件字符集为 utf-8 indent_style space # 缩进…...
8.Docker Machine
Docker Machine Docker Machine是Docker官方编排（Orchestration）项目之一，负责在多种平台上快速安装 Docker 环境。 Docker Machine项目基于Go语言实现，目前在Github上进行维护。 Docker Machine是 Docker 官方提供的一个工具&…...
如何配合使用ESLINT 和 PRETTIER
各自的作用 eslint：静态分析语法错误prettier：代码格式化工具（需要在IDE中安装prettier的插件） 使用方法： 安装 npm install eslint --save-dev // 创建 .eslintrc.json 文件 npx eslint --init npm install eslint-…...
学英语的优势已来，抓住这个机会
文 / 冰雪（微信公众号：王不留） ChatGPT大火，国外的商业价值还没找到，咱们这边已经开始变现了。谷雨小姐姐昨天在”一起学英语”微信群发了一张“收割韭菜”的文案截图。 299入社群，服务内容为：免…...
基于微信小程序云开发实现考研题库小程序项目（完整版）
今天手把手的带大家实现一款答题类的题库小程序，如果着急的话，可以直接去看文末源码.下载与项目部署。考研题库小程序云开发实战，完整版提供给大家学习。题库小程序，基于云开发的微信答题小程序，软件架构是微信原生小程…...
AI一点通：使用 ColumnTransformer 转换 Pandas DataFrame 的一个或多个列
在处理表格数据时，常常需要对一个或多个列进行转换以使它们更适合于分析或建模。在许多情况下，可以使用 Pandas 库轻松完成这些转换。然而，在处理大型数据集或构建机器学习管道时，使用 scikit-learn 的 ColumnTransformer 类来将转…...
【C语言】全局变量、局部变量和静态变量的区别
目录一、变量（一）全局变量（二）局部变量（三）静态变量（1）静态全局变量（2）静态局部变量二、常量一、变量 1、变量定义 变量的名称可以由字母、数字和下划线字符…...
wordpress 主题吧/广告软文200字
在DuckDuckGo 和VikingVPN的资助下，QuarksLab将对开源加密软件VeraCrypt进行安全审计。VeraCrypt是TrueCrypt的分支， 主要开发者是法国的Mounir Idrassi，他在TrueCrypt基础上强化了防暴力破解功能。安全审计对于一款加密软件至关重要…...
网站建设与规划/软文写作的十大技巧
文章目录参考资料1. 线性回归1.1 概述应用举例1.2 分析1.3 对数线性回归1.4 过拟合、欠拟合如何解决L2正则化(岭回归)L1正则化(Lasso回归)ElasticNet回归1.5 线性回归要求因变量服从正态分布？2. 对数几率回归(logistic 回归）2.1 概述2.2 优点2.3 求解2.4…...
慈溪网站建设哪家好/广州网站营销seo
首先需要声明，本文纯属一个毫无远见和真才实学的小小散户的愚昧见解，仅供参考。 上交所 http://www.sse.com.cn/ A股全市场行业市盈率(A股市场主要板块市盈率) http://www.csindex.com.cn/sseportal/csiportal/hy_syl/syl.jsp 上海市场A股市盈率 h…...
给公司做网站风险/高级seo培训
一、复习 1.1、字符设备驱动编写 alloc_chrdev_region/register_chrdev_regioncdev_alloccdev_initcdev_addclass_createdevice_create 注意：错误处理，goto语句 卸载的时候：释放申请的资源，并删除注册的结构体 1.2、设备文件创…...
建小网站多少钱/做seo推广一年大概的费用
国内it软件外包公司排行榜是怎么样的由于互联网技术的快速发展，特别是手机移动端的的普及，使得企业越来越需要开发自己自己的软件，但是软件开发人才缺口很大，企业没有这个技术实力去开发自己的软件，对于中小企业也不好…...
公司的网站建设费用属于什么费/seo优化排名百度教程
企业Java开发人员想要一个快速的Web框架解决方案，而又不增加日常开发工作的想法，这并不是什么新鲜事物。 现在提供了多个选项，允许开发人员即时创建UI。 快速开发平台的一个例子就是OpenXava，它使开发人员可以完全通过编写Java或G…...