【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}}同步修改

相关推荐
梅头脑7 小时前
学了6种设计模式却写出了同事看不懂的代码——SOLID五原则反例对照,治好了我的"过度设计"
设计模式
workflower10 小时前
案例:大模型驱动的“发现- 研判- 整改- 验证”全闭环治理体系
人工智能·深度学习·机器学习·设计模式·机器人
董员外11 小时前
RAG 系统进化论(九):RAG 评测,怎样证明系统真的变好了?
人工智能·设计模式·程序员
西安小哥12 小时前
AI时代技术工程师的"道法术器势":学习图谱、成长规划与角色重塑
人工智能·设计模式·程序员
莫得感情 o14 小时前
设计模式 08 · 装饰器模式
设计模式·装饰器模式
董员外1 天前
RAG 系统进化论(八):Agentic RAG(智能体式 RAG),从回答问题到完成任务
人工智能·后端·设计模式
IKUN家族1 天前
Spring MVC(四)
java·spring·mvc
董员外1 天前
RAG 系统进化论(七):Multimodal RAG(多模态 RAG),当知识存在于表格、图片和页面中
人工智能·后端·设计模式
大山同学1 天前
第 2 篇(03-04 章):代理设计原则与工具使用设计模式
设计模式
java1234_小锋2 天前
Vue3专题 - 响应式基础
vue·vue3·响应式