Vue 极简入门

1. Vue 概述

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 是 MVVM 模式的实现者，被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。。

什么是 MVVM 架构？

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

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

Model：Model 是指数据模型，泛指后端进行的各种业务逻辑处理和数据操控，主要围绕数据库系统展开。这里的难点主要在于需要和前端约定统一的接口规则；
View：View 是视图层，也就是用户界面。前端主要由 HTML 和 CSS 来构建，为了更方便地展现 ViewModel 或者 Model 层的数据，已经产生了各种各样的前后端模板语言，比如 FreeMarker, Thymeleaf 等等，各大 MVVM 框架如 Vue.js，AngularJS，EJS 等也都有自己用来构建用户界面的内置模板语言；
ViewModel：连接视图和数据的中间件，Vue.js 就是 MVVM 中的 ViewModel 层的实现者。

在 MVVM 架构中，是不允许数据和视图直接通信的，只能通过 ViewModel 来通信，而 ViewModel 就是定义了一个 Observer 观察者。ViewModel 能够观察到数据的变化，并对视图对应的内容进行更新。ViewModel 能够监听到视图的变化，并能够通知数据发生改变。视图状态和行为都封装在了 ViewModel 里。这样的封装使得 ViewModel 可以完整地去描述 View 层。由于实现了双向绑定，ViewModel 的内容会实时展现在 View 层，这是激动人心的，因为前端开发者再也不必低效又麻烦地通过操纵 DOM 去更新视图。

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

MVVM 已经相当成熟了，主要运用但不仅仅在网络应用程序开发中，当下流行的 MVVM 框架有 Vue.js，AngularJS 等。

2. Vue 程序

下面我们编写第一个 Vue 程序，编写流程如下：

1、创建 HTML 文件，引入 Vue.js，编写 JS 脚本

<div id="app">
    ...
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    var vm = new Vue({
      
      
        el:"#app",  //绑定元素的id
        //Model:数据
        data:{
      
      
            "message":"Hello Vue!",
        }
    })
</script>

el:"#app"：绑定元素的 ID；
data:{message:"Hello Vue!"}：数据对象中有一个名为 message 的属性，并设置了初始值 Hello Vue!；

2、将数据绑定到页面元素

<!--View 视图层-->
<div id="app">
    <h3>{
   
   {message}}</h3>
</div>

说明：只需要在绑定的元素中使用双花括号将 Vue 创建的名为 message 属性包裹起来，即可实现数据绑定功能，也就实现了 ViewModel 层所需的效果。

3、完整的 HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个Vue程序</title>
</head>
<body>
    <!--View 视图层-->
    <div id="app">
        <h3>{
   
   {message}}</h3>
    </div>
    
    <!--导入Vue.js-->
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
        var em = new Vue({
      
      
            el:"#app",  //绑定元素的id
            //Model:数据
            data:{
      
      
                "message":"Hello Vue!",
            }
        })
    </script>
</body>
</html>

4、测试效果

为了能够更直观的体验 Vue 带来的数据绑定功能，我们可以在浏览器的开发者工具中进行测试。测试流程如下：

在浏览器上运行第一个 Vue 应用测试，进入开发者工具；
在控制台输入 vm.message = "Hello World!"，然后回车发现浏览器中显示的内容会直接变成 Hello World！

在这里插入图片描述

Vue.js 的核心是实现了 MVVM 模式，扮演的角色是 ViewModel 层，它的核心就是实现了 DOM 监听与数据绑定，在不改变 DOM 元素，不刷新页面的基础上动态绑定数据。