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

相关推荐
J_liaty1 小时前
Java设计模式全解析:23种模式的理论与实践指南
java·设计模式
资深web全栈开发4 小时前
设计模式之观察者模式 (Observer Pattern)
观察者模式·设计模式
逆境不可逃7 小时前
【从零入门23种设计模式03】创建型之建造者模式(简易版与导演版)
java·后端·学习·设计模式·职场和发展·建造者模式
趣魂9 小时前
心跳信令通常不采用NACK机制
设计模式·软件工程·软件构建
逆境不可逃10 小时前
【从零入门23种设计模式01】创建型之工厂模式(简单工厂+工厂方法+抽象工厂)
java·spring·设计模式·简单工厂模式·工厂方法模式·抽象工厂模式·工厂模式
测试工坊11 小时前
内存泄漏自动检测(下):对症下药,5 种泄漏 5 种抓法
设计模式
逆境不可逃12 小时前
【从零入门23种设计模式02】创建型之单例模式(5种实现形式)
java·spring boot·后端·单例模式·设计模式·职场和发展
逆境不可逃12 小时前
【从零入门23种设计模式04】创建型之原型模式
java·后端·算法·设计模式·职场和发展·开发·原型模式
HrxXBagRHod21 小时前
三菱FX5U与3台三菱E700变频器专用协议通讯实战
设计模式
麦麦大数据21 小时前
M003_中药可视化系统开发实践:知识图谱与AI智能问答的完美结合
人工智能·flask·llm·vue3·知识图谱·neo4j·ner