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

相关推荐
晨米酱9 小时前
JavaScript 中"对象即函数"设计模式
前端·设计模式
数据智能老司机14 小时前
精通 Python 设计模式——分布式系统模式
python·设计模式·架构
数据智能老司机15 小时前
精通 Python 设计模式——并发与异步模式
python·设计模式·编程语言
数据智能老司机15 小时前
精通 Python 设计模式——测试模式
python·设计模式·架构
数据智能老司机15 小时前
精通 Python 设计模式——性能模式
python·设计模式·架构
使一颗心免于哀伤15 小时前
《设计模式之禅》笔记摘录 - 21.状态模式
笔记·设计模式
数据智能老司机1 天前
精通 Python 设计模式——创建型设计模式
python·设计模式·架构
数据智能老司机1 天前
精通 Python 设计模式——SOLID 原则
python·设计模式·架构
烛阴2 天前
【TS 设计模式完全指南】懒加载、缓存与权限控制:代理模式在 TypeScript 中的三大妙用
javascript·设计模式·typescript
李广坤2 天前
工厂模式
设计模式