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

相关推荐
sxlishaobin15 小时前
设计模式之原型模式
设计模式·原型模式
范纹杉想快点毕业16 小时前
嵌入式通信核心架构:从状态机、环形队列到多协议融合
linux·运维·c语言·算法·设计模式
__万波__16 小时前
二十三种设计模式(二十)--解释器模式
java·设计模式·解释器模式
攀登的牵牛花17 小时前
前端向架构突围系列 - 架构方法(一):概述 4+1 视图模型
前端·设计模式·架构
Cherry的跨界思维17 小时前
【AI测试全栈:Vue核心】19、Vue3+ECharts实战:构建AI测试可视化仪表盘全攻略
前端·人工智能·python·echarts·vue3·ai全栈·ai测试全栈
雲墨款哥17 小时前
从一行好奇的代码说起:React的 useEffect 到底是不是生命周期?
前端·react.js·设计模式
cultivator12948019 小时前
设计原则和设计模式助记
设计模式
enjoy编程20 小时前
Spring boot 4 探究netty的关键知识点
spring boot·设计模式·reactor·netty·多线程
用户938169125536020 小时前
Head First 单例模式
后端·设计模式
撩得Android一次心动20 小时前
Android 架构模式的演变(MVC、MVP、MVVM、MVI)
android·架构·mvc·mvvm·mvp