Vue基础知识（MVC、MVP、MVVM对比）

最新推荐文章于 2023-01-08 00:34:38 发布

chenfthh

最新推荐文章于 2023-01-08 00:34:38 发布

阅读量574

点赞数

分类专栏： vue 文章标签： vue web js

本文链接：https://blog.csdn.net/weixin_44828960/article/details/109048052

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Vue基本知识
Vuejs是最火爆的mvvm设计开发框架。

MVC设计模式：
【MySQL】：数据库存储持久化
【Module】模型层：工具程序、【RPC分布式】业务逻辑
【controller】控制层：接受请求、数据拦截、模型层调用、操作返回
【view】显示层
用户
每一个MVC设计模式实际上都由专业人员开发编写，就当前而言，模型层：springcloud技术或者RPC技术、对于控制层使用springboot开发技术、显示层：jquery、angularJS、reactor、vue.js进行项目开发。

Mvp设计模式（最具代表的是jquery）
显示设计模式提供一种MVP设计开发框架、MVP是运行在显示层上的设计模式，核心组成：model层（数据模型层）、view层、presenter层。
Web2.0时代开启者：AJAX
【Web端】：跨域访问
【Module】数据模型
【presenter】表示层（中间层）：数据模型解析、DOM元素创建
【view】数据显示
代码实现范例：
创建html文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vuejs开发框架</title>
		<script type="text/javascript" src="jquery/jquery.min.js"></script>
		<script type="text/javascript" src="js/mvp.js"></script>
	</head>
	<body>
		<div id="controlDiv">
			输入数据：<input type="text" id="msg" />
			<button id="addBut">追加数据</button>
		</div>
		<div id="massageDiv">
			<select id="msgList" multiple></select>
		</div>
	</body>
</html>

创建js文件：

$(function(){
	$(addBut).on("click",function(){
		messageValue=$(msg).val();
		$(msgList).append("<option>"+messageValue+"</option>");
	});
})

运行结果：
在这里插入图片描述

以上代码解读：先所给定的mvp.js文件，起到了数据获取的功能（未使用异步访问，而是使用jquery实现动态访问），文件混乱，维护难。
改善：采用面向对象思想，采用类的形式封装，进行jqurey改善，修改mvp.js，
修改代码：

$(function(){
	var message=new Message();
	message.init();//初始化
})
function Message(){}
$.extend(Message.prototype,{
	init:function(){
		this.bindMessageEvent();
	},
	bindMessageEvent:function(){
		$(addBut).on("click",$.proxy(this.messageHandler,this));
	},
	messageHandler:function(){
		messageValue=$(msg).val();
		$(msgList).append("<option>"+messageValue+"</option>");
		$(msg).val("");
	}
})

依旧存在大量js代码，维护难，但规格化起一定规范作用。核心问题：需要由开发者进行DOM操作，提出MVVM。

**MVVM【Model-View-ViewModel】**介绍：通过viewmodel双向关联
【view】显示层
【View model】数据模型层：数据绑定-双向绑定-DOM监听
开发人员只关注数据的来源和数据的绑定
【Module】数据模型
【Web端】

chenfthh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础知识（MVC、MVP、MVVM对比）

Vue基本知识Vuejs是最火爆的mvvm设计开发框架。MVC设计模式：【MySQL】：数据库存储持久化【Module】模型层：工具程序、【RPC分布式】业务逻辑【controller】控制层：接受请求、数据拦截、模型层调用、操作返回【view】显示层用户每一个MVC设计模式实际上都由专业人员开发编写，就当前而言，模型层：springcloud技术或者RPC技术、对于控制层使用springboot开发技术、显示层：jquery、angularJS、reactor、vue.js进行项目开发。
复制链接

扫一扫