Vue系列教程（07）- Vue第一个程序（MVVM）-CFANZ编程社区

文章目录

1. 引言
2. MVVM设计理念

2.1 什么是MVVM
2.2 为什么要用MVVM模式？
2.3 MVVM组成

2.3.1 View
2.3.2 Model
2.3.3 ViewModel

2.4 Vue里面的MVVM

3. 第一个Vue程序

3.1 新建项目
3.2 创建第一个文件
3.3 启动程序并演示VM

1. 引言

通过前面的章节，我们已经了解了Vue的开发要素以及前端的基础知识了，有兴趣的同学可以参阅下：

本文来讲讲Vue的第一个Hello World程序，顺便引入MVVM的设计模式这个概念。

2. MVVM设计理念

在本专栏的第一篇博客《Java程序员从零开始学Vue（01）- 前端发展史》已经讲解过了MVVM的设计理念，下面来简单的回顾下：

2.1 什么是MVVM

MVVM(Model-View-ViewModel) 是一种软件架构设计模式，由微软WPF(用于替代WinForm，以前就是用这个技术开发桌面应用程序的)和 Silverlight(类似于 Java Applet，简单点说就是在浏览器上运行的WPF) 的架构师 Ken Cooper和 Ted Peters开发，是一种简化用户界面的事件驱动编程方式。由 John Gossman(同样也是WPF和 Silverlight的架构师)于 2005 年在他的博客上发表。

MVVM 源自于经典的MVC(Model-View-Controller)模式。MVVM的核心是 ViewModel 层，负责转换 Model 中的数据对象来让数据变得更容易管理和使用，其作用如下:

该层向上与视图层进行双向数据绑定
向下与 Model 层通过接口请求进行数据交互

MVVM 已经相当成熟了，当下流行的 MVVM 框架有Vue.js ， AngularJS等。

2.2 为什么要用MVVM模式？

所有的架构本质都是为了解耦!

MVVM 模式和 MVC 模式一样，主要目的是分离视图(View)和模型(Model)，有几大好处:

低耦合: 视图(View)可以独立于 Model 变化和修改，一个 ViewModel 可以绑定到不同的 View 上，当 View 变化的时候 Model 可以不变，当 Model 变化的时候 View 也可以不变。
可复用: 你可以把一些视图逻辑放在一个 ViewModel 里面，让很多 View 重用这段视图逻辑。
独立开发: 开发人员可以专注于业务逻辑和数据的开发(ViewModel)，设计人员可以专注于页面设计。
可测试: 界面素来是比较难于测试的，而现在测试可以针对 ViewModel 来写。

2.3 MVVM组成

mvvm的整体结构图：

Vue系列教程（07）- Vue第一个程序（MVVM）_vue.js_02

2.3.1 View

View 是视图层，也就是用户界面。前端主要由 HTML和CSS 来构建，为了更方便地展现ViewModel 或者 Model层的数据，已经产生了各种各样的前后端模板语言，比如 FreeMarker、 Thymeleaf等等，各大 MVVM 框架如 Vue.js，AngularJS，EJS等也都有自己用来构建用户界面的内置模板语言。

2.3.2 Model

Model 是指数据模型，泛指后端进行的各种业务逻辑处理和数据操控，主要围绕数据库系统展开。这里的难点主要在于需要和前端约定统一的接口规则

2.3.3 ViewModel

ViewModel 是由前端开发人员组织生成和维护的视图数据层。在这一层，前端开发者对从后端获取的Model数据进行转换处理，做二次封装，以生成符合View层使用预期的视图数据模型。

需要注意的是 ViewModel 所封装出来的数据模型包括视图的状态和行为两部分，而Model层的数据模型是只包含状态的。

比如页面的这一块展示什么，那一块展示什么这些都属于视图状态(展示)
页面加载进来时发生什么，点击这一块发生什么，这一块滚动时发生什么这些都属于视图行为(交互)
视图状态和行为都封装在了ViewModel里。这样的封装使得ViewModel可以完整地去描述 View层。
由于实现了双向绑定，ViewModel的内容会实时展现在View层，这样前端开发者再也不必低效又麻烦地通过操纵DOM去更新视图。

MVVM框架已经把最脏最累的一块做好了，我们开发者只需要处理和维护 ViewModel，更新数据然后视图就会自动得到相应更新，真正实现事件驱动编程。

View层展现的不是 Model层的数据，而是 ViewModel的数据，由ViewModel负责与 Model层交互，这就完全解耦了View层和 Model层，这个解耦是至关重要的，它是前后端分离方案实施的重要一环。

2.4 Vue里面的MVVM

Model：模型层，在这里表示JavaScript对象（数据）
View：视图层，在这里表示DOM (HTML操作的元素)
ViewModel：连接视图和数据的中间件，Vue.js 就是MVVM中的ViewModel层的实现者

在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信,而ViewModel就是定义了一个Observer观察者

ViewModel 能够观察到数据的变化，并对视图对应的内容进行更新
ViewModel能够监听到视图的变化，并能够通知数据发生改变

总结：Vue.js就是一个MVVM的实现者，它的核心就是实现了DOM监听与数据绑定。

3. 第一个Vue程序

注意：首先要安装Debugger for Chrome插件，可以参考参考《Java程序员从零开始学Vue（04）- VsCode断点调试》

3.1 新建项目

首先创建一个目录，并使用vscode导入（open）：

Vue系列教程（07）- Vue第一个程序（MVVM）_html_03

3.2 创建第一个文件

新建helloworld.html文件，点击上图按钮，并写入内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个VUE程序</title>
    <!--1.导入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>

<body>
    <!--2.准备一个div-->
    <div id="app">
        {{message}}
    </div>

    <!--3.编写代码-->
    <script>
        var vm=new Vue({
            el: "#app",
            data:{
                message:"hello vue"
            }
        });
    </script>
</body>
</html>