Vue - MVVM设计模式

最新推荐文章于 2024-04-04 15:14:53 发布
最新推荐文章于 2024-04-04 15:14:53 发布
阅读量530 收藏 1
点赞数 1
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53734436/article/details/118190640
版权

MVVM

转变思维, 用数据驱动视图改变, 操作dom的事, vue源码内干了

  • 设计模式: 是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。

在这里插入图片描述

  • MVVM，一种软件架构模式，决定了写代码的思想和层次

    • M： model数据模型 (data里定义)
    • V： view视图 （html页面）
    • VM： ViewModel视图模型 (vue.js源码)

  • MVVM通过数据双向绑定让数据自动地双向同步 不再需要操作DOM

    • V（修改视图） -> M（数据自动同步）
    • M（修改数据） -> V（视图自动同步）

在这里插入图片描述

  1. 在vue中，不推荐直接手动操作DOM！！！

  2. 在vue中，通过数据驱动视图，不要在想着怎么操作DOM，而是想着如何操作数据！！(思想转变)
    在这里插入图片描述

vue源码内采用MVVM设计模式思想, 大大减少了DOM操作, 提高开发效率

北辰.two
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中的MVVM模式讲解
Fjl246的博客
03-22 1684
同样，当用户与View交互时，我们也不需要手动修改Model，而是可以通过Vue的指令和事件机制，让Vue自动更新Model。函数中传入三个参数，obj表示要定义属性的对象，prop表示要定义的属性名，descriptor是一个包含属性描述符的对象。Vue框架采用了MVVM(Model-View-ViewModel)模式来管理应用程序的数据模型(Model)和视图界面(View)的交互，即数据驱动视图，从而避免了操作DOM。Vue的响应式机制是指当Vue实例中的数据发生变化时，与之关联的视图会自动更新。
初识 Vue(03)---(MVVM 设计模式)
姜皓的博客
07-07 2754
MVP 设计模式 Model 层：模型层 Presenter 层：呈现层(业务逻辑控制层) View 层：视图层（DOM 展示） 过程：视图层（V）发出一个事件交给控制器（P 呈现层）,控制器调用 Ajax 去模型层（M）获取数据 ; 或者直接去视图层（V）进行DOM 操作。控制器（P 呈现层）是核心，是模型层（M）和 视图层（V） 的中转站，其中大部分代码在进行 DOM 操作 （面...
【Vue】笔记五：详细介绍MVVM模型，并说明其在Vue中的应用
weixin_55846296的博客
05-29 2387
一、什么是MVVM二、MVVM在Vue有哪些应用1. Model：数据模型2. View：视图3. ViewModel：Vue 组件实例三、MVVM 模式的工作原理MVVM是的缩写，是一种软件架构模式，旨在通过有效的分离应用程序的UI表示层和非UI表示层来简化UI的设计和开发。MVVM模式将UI表示层分为View和ViewModel两个部分，通过ViewModel将View与Model进行解耦，从而实现应用程序的可维护性和可扩展性。Model层表示应用程序的数据和业务逻辑。View。
Vue MVVM模型，新手学web前端开发
最新发布
2301_76232361的博客
04-04 676
MVVM 是的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。Vue.js是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是ViewModel。ViewModel负责连接 View 和Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。
jetpac--初级mvvm结合Room
zhuowalun8427的博客
11-07 1048
简单mvvm 实现
Vue MVVM模式 (三)
坚持
03-02 695
传统的模式 M（数据层）V（视图）P（控制器） 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src=
vue中的mvvm模式讲解
12-10
学习了MVVM模式 起先还觉得有点难，后面与双向数据绑定链接起来还是很容易理解的。 那么什么是MVVM呢？ 不明思议咋们肯定和我想的一样 每个单词的首写字母呗！ 对没错就是它 Model-View-ViewModel。 可以实现我们的...
vue-ydui离线文档
04-12
1. **响应式数据绑定**：Vue.js 使用了MVVM（Model-View-ViewModel）模式，使得数据与视图之间保持同步，当数据变化时，视图会自动更新，反之亦然。 2. **组件化**：Vue.js 提供了一种组件化的开发方式，可以将复杂...
RuoYi-Vue-master.zip
10-27
Vue.js采用了MVVM（Model-View-ViewModel）设计模式，使得数据绑定和事件处理变得非常简单。它支持组件化开发，允许开发者将UI拆分成可复用的模块，每个模块都有自己的视图和数据逻辑。此外，Vue.js还提供了虚拟DOM...
vue-admin-beautiful是一款绝佳的前端开发框架-javascript
06-21
2. **响应式和动态数据绑定**：Vue.js 的数据模型是基于MVVM模式的，数据与视图之间通过双向数据绑定保持同步。Vue-admin-beautiful利用这一特性，使得界面能实时响应数据变化，提供流畅的交互体验。 3. **路由管理...
vue-element-admin.zip
07-28
它采用了MVVM（Model-View-ViewModel）架构模式，通过声明式渲染实现数据与视图的双向绑定，简化了前端开发流程。 2. **Element UI**：Element UI 提供了一系列美观且响应式的组件，如按钮、表单、表格、对话框、...
简述Vue原理(MVVM设计模式)
Ironhide的博客
02-12 1927
前端框架Vue使用了mvvm设计模式，mvvn=m+v+vm，它们分别代表什么呢？ v代表的是view视图层，可以将该层理解为html页面中的元素，形如： <div id="app"> {{ message }} </div> m代表的是model模型数据层，里面包含了要显示到view层的数据，形如： data: { messag...
Vue中的MVVM设计模式
记录和分享属于我的“IT”时光
08-16 860
**MVVM设计模式：** 是面向与数据本身进行开发，编码的重点在于view和model，其核心是M层，V层的变化会根据M层数据的变化而变化。Vue采用了MVVM的设计模式，操作数据，数据变了，页面也会随之改变，不操作DOM结构，vue底层会自动根据数据变化重新渲染页面，采用该设计模式与MVP相比可以减少可观的代码量。
深入理解vue核心设计模式
qq_37195804的博客
07-15 2216
从今天听了大圣老师的课，感觉vue2到vue3的整体设计思路上还是没有变化的，依旧是通过建立一个被观察的对象，通过get方法收集依赖，set方法派发的方式去建立核心的“响应式”。 这个设计模式我也看过不少文章，被称为订阅-发布设计模式确实更合理，在vue2的架构中，我们把核心的设计模式分为Observer，Dep，Watcher，Observer被称为观察者，观察着我们的数据，Dep为数据分配中心，收集数据和通知数据更新，Watcher作为订阅者，收集每个被订阅的对象，就比如我们vue中常见的{{value
浅谈对Vue.js的MVVM的理解
热门推荐
姑娘这鸡汤有毒-的波克
07-20 1万+
Vue.js  最近很火  这两天看了代码以及项目 本地运行了一下  感觉主要还是用来做SPA单页应用   谈到整体的架构 肯定要跟MVC做对比  典型的MVC结构  就是  M-----Model   模型                                      V------View   视图                              
Vue-MVVM设计模式
jyn15159的博客
05-24 252
Vue-MVVM设计模式 MVVM各部分含义： MVVM设计模式可以解读为如下： M: model 数据部分 data V：view 视图部分 div容器，html页面中的元素。 VM： view & model 视图和数据 的结合体，可以将model层中的数据显示在view层，在model中的数据发生变化时，能够实时地修改view层的数据。 对应代码： ...
vue中的mvvm模式
mumu1998的博客
09-14 1156
学习了MVVM模式 起先还觉得有点难，后面与双向数据绑定链接起来还是很容易理解的。 那么什么是MVVM呢？ 不明思议咋们肯定和我想的一样   每个单词的首写字母呗！ 对没错就是它      Model-View-ViewModel。  可以实现我们的双向数据绑定 下面我来用我的理解解析下它们之间的关系   ：                                     ...
mvvm设计模式
Sparks550的博客
11-22 557
理解为主 Vue的编程设计模式应该叫mvvm的设计模式。 Vue是面向数据编程，程序中定义了数据，然后定义了模板，Vue就可以把数据和模板自动进行关联，然后挂载到真实的DOM上，展示给用户。 mvvm解释: 第一个m代表model数据，第一个v代表view视图，最后两个字幕代表viewModel视图数据连接层。 <script> const app = Vue.createApp({ data() { return {
什么是Vue的MVVM模式
weixin_43739375的博客
03-17 1007
vue中的MVVM模式 即Model-View-ViewModel。 Vue是以数据为驱动的，Vue自身将DOM和数据进行绑定，一旦创建绑定，DOM和数据将保持同步，每当数据发生变化，DOM会跟着变化。 ViewModel是Vue的核心，它是Vue的一个实例。Vue实例时作用域某个HTML元素上的，这个HTML元素可以是body，也可以是某个id所指代的元素。 DOM Listeners和Data...
vue基础-MVVM设计模式
04-30
MVVM 是一种前端架构设计模式，它将界面、数据和逻辑分离并通过 ViewModel 进行交互。在 MVVM 模式中，视图(View)和模型(Model)是完全独立的，它们通过 ViewModel 进行双向绑定(Binding)。 在 Vue.js 中，MVVM 模式...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值