VUE——MVC、MVVM的关系图解 & vue基本代码

本文介绍了前端开发中的MVVM架构,强调VM作为数据和视图的调度者的重要作用,以及数据双向绑定的概念。文章还提到了在Vue应用中,app.js作为入口模块,router.js负责路由分发,而业务逻辑处理和数据CRUD则分别在controller和Model层进行。
摘要由CSDN通过智能技术生成

MVVM是前端视图层的分层开发思想,主要把每个页面分成了M、V和VM。其中,VM是MVVM思想的核心;因为VM是M和V之间的调度者。
M:保存的是每个页面中单独的数据。
VM:是一个调度者,分隔了M和V。每个V层想要获取和保存数据的时候,都要由VM做中间的处理。
V:就是每个页面中的HTML结构

前端页面中使用MVVM的思想,主要是为了让我们开发更加方便,因为MVVM提供了数据的双向绑定;
注意:数据的双向绑定是由VM提供的。

app.js
项目的入口模块,一切请求都要先进入这里进行处理。
注意:app.js并没有路由分发功能,需要调用
router.js模块进行路由分发处理

router.js
路由分发处理模块。
【为了保证路由模块职能单一,router.js只负责分发路由,不负责具体业务逻辑的处理】
如果涉及到业务逻辑处理的操作:router.js无能为力,只能调用controller模块进行业务逻辑处理。

controller
业务逻辑处理层
在这个模块中,封装了一些具体业务逻辑处理的逻辑代码,但也是为了保证职能单一,此模块只负责处理业务,不负责处理数据的CRUD,如涉及到数据的CRUD,需调用Model层。

Model层
职能单一,只负责操作数据库,执行对应的SQL语句,进行数据的CRUD
C:create
R:Read
U:Update
D:Delete

View视图层请求
每当用户操作了界面,如果需要进行业务的处理,都会通过网络请求,去请求后端的服务器,此时我们这个请求,就会被后端的App.js监听到。

<!DOCTYPE html>
<html lang="en<
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值