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

技术2022-07-11 88

一：前言

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>  <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。因此，我们应该学好这个设计模式。

Processed: 0.015, SQL: 9