vue2基础-MVVM MVC

前端女孩

已于 2022-11-17 08:38:34 修改

阅读量155

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 前端文章标签： vue.js 前端

于 2022-11-10 09:32:03 首次发布

本文链接：https://blog.csdn.net/weixin_45002586/article/details/127768424

vue 同时被 2 个专栏收录

11 篇文章

订阅专栏

前端

11 篇文章

订阅专栏

本文介绍了MVVM和MVC两种软件设计模式。MVVM模式中，Model负责数据处理，View展示数据，ViewModel作为桥梁实现数据双向绑定；Vue实例展示了MVVM的划分，通过v-model实现数据双向传递。而在MVC模式中，View、Controller和Model分别处理用户界面、业务逻辑和数据存储，形成单向数据流。这两种模式在前端开发中广泛应用，各有特点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、MVVM

（1）mvvm

M : Model 数据模型(保存数据, 处理数据业务逻辑)
V : View 视图(展示数据, 与用户交互)
VM: View Model 数据模型和视图的桥梁

(2) MVVM特点：支持数据的双向传递

M -> VM -> V
V -> VM -> M

(3) Vue中MVVM的划分

被控制的区域: View
Vue实例对象 : View Model
实例对象中的data: Model

	<body>
		<!-- MVVM中的V：视图 -->
		<div id="app">
		<p>{{ name }}</p>
		</div>
	</body>
	<script>
		// MVVM中的VM：数据模型和视图的桥梁：vue实例对象
		let vue = new Vue({
			el: '#app',
			// MVVM中的M：数据模型
			data: {
				name: "xhl"
			}
		})
	</script>

(4) Vue中数据的单向传递

我们把"数据"交给"Vue实例对象", “Vue实例对象"将数据交给"界面”
Model -> View Model -> View

(5) VUE中数据双向绑定

Vue默认情况是单向传递的，但是在、及元素上可以用 v-model 指令创建双向数据绑定。
v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值，而总是将 Vue 实例的数据作为数据来源

(6) VUE数据绑定的特点

只要数据发生变化, 界面就会跟着变化

2、mvc

视图（view）:用户界面（UI），用于实现页面展示
控制器（Controller）：业务逻辑，串联view和model，用来实现业务的逻辑代码。
模型（Model）：数据存储，用于实现数据持久化

在MVC模式中，用户的交互行为在view中触发，由view去通知controller去进行对应的逻辑处理，处理完成以后通知model改变状态，model完成状态改变后，找到对应view去更新用户界面的显示内容，完成对用户交互行为的反馈。由此可见，整个流程由view发起，最终在view中做出改变，这是一个单向的过程。