一:前言
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模式,可以让我们更好的学会Vue。因此,我们应该学好这个设计模式。