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

本书目录:点击进入

一、为什么使用Vue框架?

二、什么是MVC设计模式

第一阶段:后端MVC

第二阶段:前后端分离

第三阶段:前端MVC

主要问题:

第四阶段:前端MVVM

三、MVVM设计模式

双向绑定

vue:将MVVM发扬光大

[四、VUE 的核心思想](#四、VUE 的核心思想)

MVVM:view影响data,data影响view,即双向绑定

实战一:如何使用vue

[Stage 1:引入vue](#Stage 1:引入vue)

[Stage 2:编写 view ,model,vm层](#Stage 2:编写 view ,model,vm层)

[Stage 3:演示:修改input ,div中{{message}}同步修改](#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

bash 复制代码
<script src="../vue.global.js"></script>

Stage 2:编写 view ,model,vm层

  • 其中VM层由vue完成

Stage 3:演示:修改input ,div中{{message}}同步修改

相关推荐
To_OC1 分钟前
从一行入口代码啃透 NestJS:工厂模式、装饰器和依赖注入是怎么串起来的
后端·设计模式·nestjs
东方小月2 小时前
从零开发一个 Coding Agent(十二):实现版本化 JSONL 与真实 CLI 入口
前端·设计模式·前端框架
程序员贺加贝4 小时前
轻制造SaaS的生产闭环建模-BOM工单领料报工质检与入库
java·设计模式·架构
嘟嘟07176 小时前
SDD 规范驱动开发:从 vibe coding 崩盘到"两次创造"
设计模式·代码规范·vibecoding
无凭8 小时前
拆解 DeerFlow Memory:Agent 的长期记忆到底怎么做?
人工智能·设计模式
AI大法师10 小时前
品牌焕新不只换 Logo:捷豹案例里的触点重构方法
大数据·人工智能·设计模式·新媒体运营
小小龙学IT12 小时前
Qt 模型/视图框架(Model/View)深度解析:从 MVC 演化到数据展示架构的王者
qt·架构·mvc
盛夏绽放1 天前
Proxy与Reflect详解(二):进阶篇——手写Vue3响应式系统
ui·vue3·proxy
AI人工智能+电脑小能手1 天前
大白话说Java设计模式-23-桥接模式(源码剖析篇)
java·设计模式·jdbc·桥接模式·源码分析·awt·java logging
树码小子1 天前
什么是大语言模型
人工智能·语言模型·mvc