Vue中的MVVM模型(通俗易懂版)

这篇具有很好参考价值的文章主要介绍了Vue中的MVVM模型(通俗易懂版)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.什么是MVVM?

MVVM是Model-View-ViewModel的简写,是M - V - VM 三部分组成。

本质:是MVC改进版

MVVM就是将其中View的状态和行为抽象化,其中ViewModel将试图(即View)和业务逻辑分开,它可以去除Model的数据的同时帮忙处理View中由于需要展示内容而涉及的业务逻辑。

MVVM采用:双向数据绑定。

View中数据变化将自动反映到Model上,反之,Model中数据变化也将会自动展示在页面上。

ViewModel就是View和Model的桥梁。

ViewModel负责把Model的数据同步到View显示出来,还负责把View的修改同步回到Model。

MVVM的核心思想:是关注Model的变化。让MVVM框架利用自己的机制自动更新DOM(即所说的View视图),也就是所谓的数据-视图分离。

2.MVVM模型

  • M:模型Model   --->也就是data中的数据
  • V:视图View    --->也就是模板代码
  • VM:视图模型ViewModel   --->也就是Vue实例(vm)

Vue中的MVVM模型(通俗易懂版)

 3.举例:对上面的MVVM模型更透彻的理解

Vue中的MVVM模型(通俗易懂版)

 

Vue中的MVVM模型(通俗易懂版)

 Vue中的MVVM模型(通俗易懂版)

 先给大家展示一下运行的效果(原本):

Vue中的MVVM模型(通俗易懂版)

 再给大家展示一下,我再页面上的输入框中添加‘123456’然后会发现Model模型中的data数据发生了变化(改变后):

Vue中的MVVM模型(通俗易懂版)

 


ok,相信大家看完这一篇内容后,应该对MVVM模型有很好的理解了吧???

我之前也是一直似懂非懂,今天再重新复习,所以懂了之后,花了一点时间写了这篇文章。希望对大家有用。

写作不易,如果对你有帮助,点个赞就是对我最大的支持。
感谢大家的支持!!!文章来源地址https://www.toymoban.com/news/detail-425507.html

到了这里,关于Vue中的MVVM模型(通俗易懂版)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 什么是poe交换机?通俗易懂的介绍

    交换机端口支持输出功率达15.4W,符合IEEE802.3af标准,通过网线供电的方式为标准的POE终端设备供电,免去额外的电源布线。经调研研华推出的符合IEEE802.3aT 标准的POE交换机,端口输出功率可以达到25-30W .通俗的说 ,POE交换机就是支持网线供电的交换机,其不但可以实现普通交

    2024年02月06日
    浏览(49)
  • JVM原理:JVM运行时内存模型(通俗易懂)

    做了几年开发,平时除了写代码造BUG和修复BUG之外,偶尔也会遇到反馈说程序较慢问题,要对程序性能排查与优化就得更深入学习,学习JVM可以帮助我们加深对JAVA的理解,让我们具备一定的性能排查与调优的能力,无非就是让程序别太卡或者别挂了,那挂了目前我遇到的主要

    2024年02月08日
    浏览(55)
  • 202 vue2的响应式原理 通俗易懂!

    Object.defineProperty + 依赖追踪 。 在Vue实例化过程中,会 递归 地将 每个数据对象 的 属性 转换为 getter/setter ,并维护一个 依赖收集器(Dep) 。 每个属性 都有一个关联的 watcher ,当 数据发生 变化时 , watcher 会 被通知 并 更新视图 。 Vue 2.x 实现响应式数据: vue实例化 时,会

    2024年02月06日
    浏览(41)
  • OSI七层模型及各层功能概述 (通俗易懂 )

    本文将完整的说明OSI七层模型各层的概念和功能概述 OSI(Open System Interconnect), 即开放式系统互连。该体系结构标准定义了网络互连的七层框架 ( 物理层、数据链路层、网络层、传输层、会话层、表示层和应用层 ),即OSI开放系统互连参考模型。 OSI是逻辑模型,而非物理

    2023年04月27日
    浏览(43)
  • Nginx到底能干嘛?!Nginx是做什么用的?通俗易懂,前端必看!

            Nginx是一个 轻量级/高性能的反向代理Web服务器,它是由C语言写的,所以速度非常快、性能非常优秀。它的主要功能就是反向代理、负载均衡、配置SSL证书、防盗链、解决跨域问题、缓存、限流、动静资源分离等等。         上面介绍了Nginx是一台Web服务器,实际

    2023年04月11日
    浏览(42)
  • 通俗易懂理解几何光学(四)光学系统中的光阑与光束限制

    在理想光学系统中,任意大小的物体能以任意宽的光束成一定倍率的像。当共轭距一定时,像的大小与物的大小成比例。 在实际光学系统中,成像光束将会受到限制: 成像系统中各个元件的大小有限,从而限制了物面上每一点发出并进入系统参与成像的光束的宽度; 像面的

    2024年02月05日
    浏览(50)
  • 用通俗易懂的方式讲解大模型分布式训练并行技术:MOE并行

    前面的文章中讲述了数据并行、流水线并行、张量并行、序列并行、自动并行等多种并行技术。但现在的模型越来越大,训练样本越来越多,每个样本都需要经过模型的全部计算,这就导致了训练成本的平方级增长。 而当我们希望在牺牲极少的计算效率的情况下,把模型规模

    2024年02月02日
    浏览(67)
  • 用通俗易懂的方式讲解:一文讲透主流大语言模型的技术原理细节

    大家好,今天的文章分享三个方面的内容: 1、比较 LLaMA、ChatGLM、Falcon 等大语言模型的细节:tokenizer、位置编码、Layer Normalization、激活函数等。 2、大语言模型的分布式训练技术:数据并行、张量模型并行、流水线并行、3D 并行、零冗余优化器 ZeRO、CPU 卸载技术 ZeRo-offload、

    2024年01月16日
    浏览(56)
  • 深度学习:使用nanodet训练自己制作的数据集并测试模型,通俗易懂,适合小白

    关于目标检测的模型有很多, nanodet 模型小且轻量化,适合移植部署到硬件设备上,非常推荐学习这个模型。经过我自己踩了无数坑后总结了此教程,助学刚接触nanodet,想要快速上手的学者,教程很详细,学者耐心看。 我提供了一个已经调试好的源码包,后面的教程也都是

    2024年02月15日
    浏览(47)
  • 通俗易懂地解释OpenAI Sora视频生成的特点有哪些?与Runway Gen2、Pika有什么区别?缺点是什么?

    OpenAI的Sora模型是最近两天最火热的模型。它生成的视频无论是清晰度、连贯性和时间上都有非常好的结果。在Sora之前,业界已经有了很多视频生成工具和平台。但为什么Sora可以引起如此大的关注?Sora生成的视频与此前其它平台生成的视频到底有哪些区别?有很多童鞋似乎对

    2024年02月19日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包