Vue中MVVM模型详解

三年之约-第一年

于 2023-03-15 03:30:00 发布

阅读量356

点赞数 1

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

本文链接：https://blog.csdn.net/qq_53568983/article/details/128259921

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

MVVM是一种常见的前端开发模型，由Model、View和ViewModel组成。在Vue中，Model代表数据，View是展示给用户的界面，ViewModel是Vue实例，作为数据和视图的桥梁。通过Vue实例，我们可以将数据绑定到视图上，实现数据驱动的动态渲染。文章还提到了在Vue中如何创建和使用MVVM模型，并强调了数据存储在Vue对象中并能直接反映在界面上。

摘要由CSDN通过智能技术生成

前言

MVVM模型是前端使用的比较多的一个模型，几乎所有的前端框架都是MVVM模型

一、MVVM分析

MVVM分为M，VM， V

M：模型(Model) ：data中的数据
V：视图(View) ：模板代码
VM：视图模型(ViewModel)：Vue实例

如下图所示：

在这里插入图片描述

如上图所示，可以这样理解mvvm模型，model是我们想要显示在页面上的类容，view是我们看到的，我们想要mode中的数据在view中显示，我们就必须按照vue语法，就是vue框架的语法，把model中的数据显示在view中，在代码中的MVVM对应如下所示：

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>理解MVVM</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		 <div id="root">
			<h1>{{name}}</h1>
			<h1>{{address}}</h1>
			<h1>{{_data}}</h1>
			<h1>{{}}</h1>
		 </div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				address:'北京',
			}
		})
		console.log(vm)
	</script>
</html>

二、MVVM注意事项

首先要了解的一件事就是，vue是一个对象,我们使用如下的语法把数据存储在vue对象中：

<script type="text/javascript">
		const vm = new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				address:'北京',
			}
		})
		console.log(vm)
	</script>

data中的数据存储在vue对象当中，vue对象还有一些自定义的函数，对象等，这些都可以显示在界面当中，console.log(vue)你就可以看到有哪些可以进行输出，如下图所示：

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>理解MVVM</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		 <div id="root">
			<h1>{{_data}}</h1>
		 </div>
	</body>
	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		const vm = new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				address:'北京',
			}
		})
		console.log(vm)
	</script>
</html>