“笨“方法学习Vue中的MVVM模式

最新推荐文章于 2024-03-02 08:15:00 发布

我与代码的故事

最新推荐文章于 2024-03-02 08:15:00 发布

阅读量182

点赞数

分类专栏：前端文章标签： es6 vue.js 前端 mvvm 设计模式

本文链接：https://blog.csdn.net/xing7290/article/details/107069949

版权

前端专栏收录该内容

21 篇文章 2 订阅

订阅专栏

一：前言

Vue设计受到了MVVM模型的启发，所以，在Vue的用法中，有很多MVVM模式的体现。因此，笔者想通过一个小demo来讲解Vue中的MVVM模式。

二：操作

1.简介

MVVM是Model-View-ViewModel的缩写，MVVM模式提供了对View和View Model的双向数据绑定，使得ViewModel的状态改变可以自动传递给View。
①.Model层
数据模型，描述了数据修改和操作的业务逻辑。
②.View层
展示数据，像CSS,JQuery,Html等。
③.View Model层
同步View和Model的对象。

2.文字版

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>首页</title>
		<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
	</head>
	<body>
		<h1>欢迎来到Vue世界！</h1>
		<!-- view层 -->
		<div id="app">
			{{message}} 
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',	
				/* model层 */
				data: {			
					message: 'hello Vue Application!'
				}
			});			
		</script>
	</body>
</html>

这个demo中的Model层就是：数据部分

data: {			
		message: 'hello Vue Application!'
}

这个demo中的View层就是：展示部分

<div id="app">
	{{message}} 
</div>

这个demo中的View Model层就是：new出来的Vue实例，app对象

var app = new Vue({
})

3.图解版

MVVM图

三：尾言

理解好MVVM模式，可以让我们更好的学会Vue。因此，我们应该学好这个设计模式。

我与代码的故事

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
“笨“方法学习Vue中的MVVM模式

一：前言Vue设计受到了MVVM模型的启发，所以，在Vue的用法中，有很多MVVM模式的体现。因此，笔者想通过一个小demo来讲解Vue中的MVVM模式。二：操作1.简介MVVM是Model-View-ViewModel的缩写，MVVM模式提供了对View和View Model的双向数据绑定，使得ViewModel的状态改变可以自动传递给View。①.Model层数据模型，描述了数据修改和操作的业务逻辑。②.View层展示数据，像CSS,JQuery,Html等。③.View Model层
复制链接

扫一扫

专栏目录