【Vue3】2-2 : MVC设计模式与MVVM设计模式

最新推荐文章于 2024-05-29 20:15:00 发布
最新推荐文章于 2024-05-29 20:15:00 发布
阅读量874 收藏 9
点赞数 9
分类专栏： 架构师之路-java 文章标签： mvc 设计模式 vue3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ladymorgana/article/details/135401745
版权

本书目录：点击进入

一、为什么使用Vue框架?

二、什么是MVC设计模式

第一阶段：后端MVC

第二阶段：前后端分离

第三阶段：前端MVC

主要问题：

第四阶段：前端MVVM

三、MVVM设计模式

双向绑定

vue：将MVVM发扬光大

四、VUE 的核心思想 

MVVM：view影响data，data影响view，即双向绑定

实战一：如何使用vue

Stage 1：引入vue 

Stage 2：编写 view ，model，vm层

Stage 3：演示：修改input ，div中{{message}}同步修改

一、为什么使用Vue框架?

  • 渐进式项目：中小大型项目均可使用

  • 单页面应用开发模式

  • 生态好

  • 自动化脚手架：快速搭建项目

  • 最大的优点 : 就是不用自己完成复杂的DOM操作了，而由框架帮我们去完成

二、什么是MVC设计模式

第一阶段：后端MVC

第二阶段：前后端分离

第三阶段：前端MVC

为了更好的处理前端数据引入MVC：如 backboneMVC

主要问题：
  • 多视图和多数据交互时，很混乱，架构不清晰
  • View和Model可以相互通讯，导致Controller层很薄（可有可无，只充当路由功能）

第四阶段：前端MVVM

如 Angular.js （2009年），vue 

  •  v和m层中间使用viewmodel中转

三、MVVM设计模式

双向绑定

vue：将MVVM发扬光大

四、VUE 的核心思想 

MVVM：view影响data，data影响view，即双向绑定

实战一：如何使用vue

Stage 1：引入vue 

<script src="../vue.global.js"></script>

Stage 2：编写 view ，model，vm层

  • 其中VM层由vue完成

Stage 3：演示：修改input ，div中{{message}}同步修改

ladymorgana
关注
  • 9
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
【前端知识点】前端设计模式 MVVM和MVC，vue的数据双向绑定原理
代码的魅力，根本走不出来
04-13 599
Vue 的双向数据绑定是通过数据劫持实现的。在 Vue 的 MVVM 模式中，View 层负责渲染数据和交互事件，Model 层负责存储数据和与后端交互，ViewModel 层则是负责监听 Model 的数据变化，通过双向数据绑定将数据变化自动同步到 View 上，同时也通过事件监听，将 View 上的用户操作同步到 Model 上。总之，Vue的MVVM架构中，Model层负责数据的存储和处理，ViewModel层负责逻辑的处理和控制数据的流向，View层负责页面元素的展示和与用户的交互。
程序员面试刷题的书哪个好-Vue_Learning:Vue学习
07-07
与其他大型框架不同的是，Vue被设计为可以自底向上逐层应用 Vue的核心库只关心**视图层** 常见第三方库： vue-router：路由 vue-resources：通信 vuex：管理 2.前端三要素 结构层HTML 表现层CSS 代码复用层度低，...
前端面试题-vue-MVC和MVVM-VUE常见指令
qq_44428688的博客
02-02 1403
写在最先，不知不觉更新面试题系列也一个月过去了，在这个过程中查漏补缺良多。也来到了熟悉又不太熟悉的VUE阶段。看这些八股文有用吗，我感觉当然是有用的，扩展自己的思维，当在工作中遇到不会的东西的时候。你虽然不能完全上手，但是你至少知道有这么东西存在，你大概能联想到是这个东西。编程需要天赋这是毋庸置疑的，但是我们也要相信任何东西都是勤能补拙的。既然不是天才，那就和比大多数平凡人去更努力一点吧… 这当然枯燥，但是这也很有趣！
3.VUE的MVVM设计模式
yangwq的博客
08-11 434
标签指令：v-for <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>TodoList</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body>
Vue.js之MVVM设计模式
炑焽的博客
04-22 829
MVC是一种最早出现的软件架构模式，它将应用程序的输入、处理和输出明确地划分为三个部分，使得业务逻辑、数据和界面显示可以独立地进行开发、测试和维护。其中MVC指的是Model（模型）、View（视图）、Controller（控制器）
vue3中，使用23种设计模式
hkduan的博客
11-09 842
适配器模式：使用Vue3的provide和inject来实现适配器模式。适配器模式：使用Vue3的provide和inject来实现适配器模式。迭代器模式：使用Vue3的for…代理模式：使用Vue3的proxy对象来实现数据的代理。代理模式：使用Vue3的proxy对象来实现代理模式。责任链模式：使用Vue3的事件总线来实现责任链模式。建造者模式：使用Vue3的组件选项来实现建造者模式。责任链模式：使用Vue3的事件总线来实现责任链模式。建造者模式：使用Vue3的组件选项来实现建造者模式。
AI问答：前端需要掌握的设计模式/vue项目使用了哪些设计模式/vue项目开发可以使用哪些设计模式
snowball的博客
06-13 1374
中介者模式的核心思想是将对象之间的通信和协作抽象出来，通过中介者来处理这些通信和协作，使得对象之间只需要与中介者交互，而不需要直接交互。这样做的好处是，可以避免使用继承来扩展对象的行为，降低了代码的复杂性，同时提供了更大的灵活性和可维护性。建造者模式使得你可以在不同的步骤中创建对象，这些对象在创建时可能需要不同的步骤，并且可能需要以不同的顺序执行这些步骤。它的主要目的是减少程序所需的内存和计算资源，通过共享对象的方法来有效地支持大量的小型对象。内部状态是可以共享的，而外部状态则是每个对象都不同的。
vue-架构与思想-MVVM模式和MVC模式的区别
Aiken的自由世界
11-29 2405
今天又重新捡起Vue，想用vue做个自己的应用。作为一个后台服务的se，对前台一直是很苦恼的。然后按着这个思路就干起来了，当然就遇到了这个问题，MVVM到底是什么？MVC当然是清楚的。那么找了些资料，学习以记之，与君共享！ 1.MVVM模式和MVC模式的区别 先说结论，再说细节： 1、起源：MVVM模式是由MVC模式衍生出来的； 2、区别：MVVM模式是双向绑定数据，而MVC模式是单向通信； 3、场景：MVVM模式一般用于前端开发的较多，MVC模式在服务端用的较多。 2. MVC模式 2.1 MVC概述
MVC 和 MVVM 的设计模式
weixin_51716058的博客
06-15 324
MVC 和 MVVM 两种设计模式的区别和联系！
VUE设计模式之MVVM和MVC的区别
DavidZhao的博客
03-01 6280
VUE是基于MVVM的设计模式开发的，今天说一下MVC和MVVM的区别。 MVC： m:model数据模型层 v:view视图层 c:controller控制器 原理：c层需要控制model层的数据在view层进行显示 MVC两种方式，图片说明： 代码实例： 我们做一个很简单的DIV显示隐藏的效果，点击toggle可以切换下面div显示隐藏 ht...
Vue3+React18+TS4入门到实战系统学习3大热门技术
03-11
│ [2.2]--2-2MVC设计模式与MVVM设计模式.mp4 │ [2.3]--2-3选项式API的编程风格与优势.mp4 │ [2.4]--2-4声明式渲染及响应式数据实现原理.mp4 │ [2.5]--2-5指令系统与事件方法及传参处理.mp4 |-- {22}--第22章...
Lovely-Vue:这是一个可爱的vue.js 2.0的学习资料库
04-27
基于MVVM（模型-视图-视图模型）模式进行设计，该模式在MVC（模型-视图-控制器）中具有“视图”模型而不是“控制器”。 2.通过在React中选择用作主要功能的组件来捆绑可重用的UI并组织视图层。 3.开发面向模板的。 4...
Vue+SpringBoot员工管理系统（程序+数据库+论文+PPT）
11-11
人事管理在政府机关和企事业单位中占有极其重要的地位,各部门岗位之间协作和工效的提高,是...系统架构基于当前主流的MVVM(Model-View-View Model)模式,前后端分离的SPA(single page web application),即单页富应用程序
front-end-eigineer-documents:前端工程师知识体系、前端学习笔记、前端工程师进阶路线、前端知识框架、前端面试问题
05-17
前端知识体系（zh-ch） Github文档库更新慢，最新内容请关注语雀： 编程基础 ...[设计模式]：MVC/MVVM/MVP 前端开发工具 构建工具 webpack grunt gulp npm yarn 测试工具 Puppeteer Jest mocha 调试
设计模式21——命令模式
最新发布
weixin_43687024的博客
05-29 1079
1、将一个请求封装为一个对象，从而使你可用不同的请求对客户进行参数化，对请求排队或记录请求日志，以及支持可撤销的操作。2、可以在 根据请求执行命令的类 里、设计一个命令队列，把 声明接收者执行哪些命令的类 保存起来；3、允许接受请求的一方拒绝请求。
设计模式 17 组合模式 Composite Pattern
jxusthusiwen的专栏
05-26 1039
组合模式（Composite Pattern），又叫部分整体模式，是用于把一组相似的对象当作一个单一的对象。组合模式依据树形结构来组合对象，用来表示部分以及整体层次。这种类型的设计模式属于结构型模式，它创建了对象组的树形结构。这种模式创建了一个包含自己对象组的类。该类提供了修改相同对象组的方式。它允许你将对象组合成树形结构，以表示“部分-整体”层次关系。
设计模式深度解析：分布式与中心化，IT界两大巨头“华山论剑”
制定明确可量化的目标，坚持默默的做事。
05-26 2542
分布式模式与中心化模式各有其独特的优势和局限性。分布式模式因其高容错性和适应大规模复杂系统的能力，在处理大数据和高并发场景中具有显著优势，然而，其节点间数据传输的安全性要求高，且开发调试难度较大，这是其面临的挑战。相比之下，中心化模式在安全控制和开发维护方面更具优势，适用于对安全性和稳定性要求较高的场景。在选择时，需综合考虑业务需求和技术要求，权衡利弊。未来，随着云计算、边缘计算等技术的发展，两种模式将迎来新的机遇与挑战，需灵活调整策略，确保系统高效稳定运行。
谈一谈对MVC和MVVM的理解 2. 将数据展示在页面上有哪几种方式 3. 事件绑定和属性绑定写法和简写，事件传参的想保留event如何操作 4. Vue中事件修饰符有哪些，有什么用，怎么用 5. Vue中双向数据绑定的指令是？原理是？ 6. 代码实现v-for渲染数 vue指令-v-for为什么设置key： [{name:”张三”,age:”18”,sex:”男”}, {name:”李四”,age:”19”,sex:”女”}, {name:”王五”,age:”20”,sex:”男”}]， 渲染后格式：1
06-10
1. MVC是一种设计模式，将应用程序分为三个部分：模型（Model）、视图（View）和控制器（Controller），用于解耦应用程序的组件和代码逻辑。MVVM是一种衍生自MVC的设计模式，将视图分为两个部分：视图（View）和视图模型（ViewModel），用于将视图与数据绑定在一起，实现数据的自动更新和管理。 2. 将数据展示在页面上的几种方式有：模板引擎、手动拼接HTML字符串、通过DOM操作实现。 3. 事件绑定和属性绑定的写法和简写如下： - 事件绑定：v-on:click="handleClick" 或 @click="handleClick" - 属性绑定：v-bind:title="title" 或 :title="title" 如果想保留event参数，可以使用$event，例如：v-on:click="handleClick($event)" 4. Vue中的事件修饰符有：.stop、.prevent、.capture、.self、.once、.passive。它们分别表示：阻止事件冒泡、阻止默认行为、使用事件捕获、只有在事件触发元素自身时才触发、只触发一次、滚动事件的默认行为立即执行，不等待JS执行完毕。使用方法如下：@click.stop、@click.prevent、@click.capture、@click.self、@click.once、@scroll.passive。 5. Vue中双向数据绑定的指令是v-model。它的原理是通过绑定value属性和input事件实现数据的双向绑定。 6. 代码实现v-for渲染数，vue指令-v-for需要设置key。渲染后的格式如下： ```html <ul> <li v-for="(item, index) in list" :key="item.name"> {{ index + 1 }}、{{ item.name }}，{{ item.age }}岁，{{ item.sex }} </li> </ul> ``` 其中，list数组包含了需要渲染的数据，item表示当前项的数据，index表示当前项的索引，:key绑定item.name作为唯一标识符。渲染后的格式为： ``` 1、张三，18岁，男 2、李四，19岁，女 3、王五，20岁，男 ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ladymorgana

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值