简介

本节将带领大家了解 Vue.js 是一个什么样的前端框架，与其他框架的区别以及它的特点，怎么去安装使用它。

知识点

• Vue 与其他框架的对比及特点
• 安装 Vue 的方法
• node 的安装
• vue-cli 的安装
• Vue 开发者工具的安装
• Vue 创建实例
• Vue 数据的双向绑定及响应式

官网

• 中文：https://cn.vuejs.org/
• 英文：https://vuejs.org/

Vue.js

Vue.js 是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。<信息来源：vue 官网>

作者

尤雨溪毕业于上海复旦附中，在美国完成大学学业，本科毕业于上 Colgate University，后在 Parsons 设计学院获得 Design & Technology 艺术硕士学位，任职于纽约 Google Creative Lab。<信息来源：百度百科>

作用

Vue.js 框架的作用主要注重动态的构建用户界面，前端工程化和模块化开发。

Vue 与其他框架的对比

更多对比细节：vue 官网：https://cn.vuejs.org/v2/guide/comparison.html

Vue 是一个推陈出新的前端框架，吸收了很多前端框架的优点。例如，Vue 借鉴了 React 的组件化和虚拟 DOM ，借鉴了 Angular 的模块化和数据绑定。因此，我们以 Vue.js 作为入手，以后深入学习其他框架，你会发现他们的共通之处，更好地高效地学习。

选择 Vue.js 的更多原因是，就框架的 API 而言，对比之下，Vue 更加轻便简洁。Vue 自身拥有开箱即用的生态开发包（Vuex,Vue-Router）等，复杂性低、学习成本低，是一门比较好入门的前端框架。

如果你刚开始学习前端开发，将框架作为你的第一步可能不是最好的选择，推荐进入实验楼前端基础知识课程。假入你已掌握了关于HTML、CSS和JavaScript的中级知识，那让我们进入 Vue 的学习吧!

安装

<script>标签引入

标签引入模式，和平常引入JQuery一样，直接下载并用<script>标签引入

下载地址：https://vuejs.org/js/vue.js

<script src="js/vue.min.js"></script>

CDN引入

不用下载到本地，即引即用，学习推荐使用这种模式：

推荐 2 个较稳定的 cdn,以下任选其一

<script src="https://cdn.bootcss.com/vue/2.6.6/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

由于非会员用户无法访问外网，所以后续的代码中，统一使用引用链接为https://labfile.oss.aliyuncs.com/courses/1262/vue.min.js。

脚手架工具

由于安装需要使用到外网，非会员用户不能访问外网。所以实验楼提供的在线环境已经安装好了所需工具，可以直接使用。步骤 1、2、3 可以直接略过。

1、vue-cli是基于npm的，所以应该先安装node环境，通过node官网：http://nodejs.cn/下载系统对应的node安装程序。

注意： NPM 是随同 Node.js 一起安装的包管理工具。因此当我们安装好 Node.js 的时候，也安装好了 NPM。由于实验楼的环境下已经安装好了 Node.js，大家可以直接使用，实验楼环境中跳过安装 Node 步骤，直接进行第二步。

2、node安装完毕使用，npm包管理工具全局安装vue-cli

npm install -g vue-cli

3、命令行输入vue，出现 Usage 表示安装成功。

4、使用指令生成一个 vue 应用

vue init webpack sylApp  # sylApp 这里是项目名AppName

参考上图在命令行中输入对应的内容。

5、命令行进入刚刚创建的 app 的文件夹内，输入npm run start将 vue 应用运行起来

cd sylApp
npm run start

6、成功执行命令行后，我们打开浏览器输入http://localhost:8080，即可看到一个vue 应用。

这是正常的操作流程，由于实验楼环境特殊，使用该方法需要额外的配置，我们需要修改一些文件：打开 sylApp/build/webpack.dev.conf.js,修改devServer选项下的 host 配置代码为host: HOST || '0.0.0.0', 在 devServer 中添加disableHostCheck:true,,修改成下图，所示

接着我们重复第五步的步骤，构建成功后，我们打开工具中的 Web 服务：

vue 开发者工具安装

注意： 由于实验楼环境使用的是 Preview 或 Mini Browser 是一个轻量级的浏览器，不支持插件安装，如需安装，请在自己的电脑上对应安装。

在使用 Vue 时，我们推荐在你的浏览器上安装Vue Devtools。它允许你在一个更友好的界面中审查和调试 Vue 应用。

1、下载对应浏览器的 Vue Devtools

• Get the Chrome Extension/ (beta channel)
• Get the Firefox Addon/ (beta channel)
• Get standalone Electron app (works with any environment!)

2、打开浏览器，打开设置>开发工具>扩展程序，将下载好的 Vue Devtools 拖到界面中，即可完成安装(谷歌浏览器为例)。

3、你就可以在浏览器中轻松调试你的 vue 应用

更多安装方式

其他安装方式请参考：官网教程

使用

根据上面的安装教程，初学者不推荐采用 vue-cli 的方式，因为你可能对 npm 包管理工具不太了解，推荐大家使用<script>引入或者 cdn 引入的方法，后续教程也将采用 cdn 引入这种方式，那么我们开始创建第一个 Vue 应用。

创建第一个实例

每个 Vue 应用都是通过用Vue函数创建一个新的 Vue 实例 开始的：

var app = new Vue({
  // 选项
});

由于实验楼使用是 WebIDE 的在线环境，所以有不熟悉对同学请阅读下：实验楼 WebIDE 使用指南，前端开发部分的内容。

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统，我们新建一个.html 后缀的文件，输入以下代码，运行（右击文件 > open with > Preview 或 Mini Browser），你就会看到 {{msg}} 被渲染成 hello

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>syl-vue-test</title>
    <!-- 通过cdn方式引入 vue.js -->
    <script src="https://labfile.oss.aliyuncs.com/courses/1262/vue.min.js"></script>
  </head>
  <body>
    <div id="app">{{msg}}</div>
    <script>
      var app = new Vue({
        el: "#app", //dom挂载点
        data: {
          //数据项
          msg: "hello syl",
        },
      });
    </script>
  </body>
</html>

运行效果：

说明： el 为实例挂载点，上面表示挂载在 id 为 app 的 dom 元素中。data 选项为数据选项，存放绑定数据。除了这两个之外还有实例选项，methods（实例方法）、computed（计算属性） 等，后面我们会学习到。

理解 Vue 的 MVVM 模式

M：Model 即数据逻辑处理

V：View 即视图（用户界面）

VM：ViewModel 即数据视图，用于监听更新，View 与 Model 数据的双向绑定

所以，Vue 一大特点就是数据双向绑定，另一大特点就是响应式，接下来，我们来看看他的魅力。

数据双向绑定

在 Vue 中数据双向绑定随处可见，最常见的是表单数据中的双向绑定，例如：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>syl-vue</title>
    <!-- 通过cdn方式引入 vue.js -->
    <script src="https://labfile.oss.aliyuncs.com/courses/1262/vue.min.js"></script>
  </head>
  <body>
    <!-- 数据双向绑定 -->
    <div id="app">
      <input type="text" v-model="msg" />
      <p>{{msg}}</p>
    </div>
    <script>
      var app = new Vue({
        el: "#app", //el: 挂载点
        data: {
          //data:数据选项
          msg: "hello",
        },
      });
    </script>
  </body>
</html>

在我们对文本框输入值时，实例 data 中的 msg 值也随之变化。运行效果：

感受响应式

上面我们了解到 Vue 是一个 MVVM 架构的框架，成功创建了一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是 响应式的。我们可以看看他是不是响应式的，打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改app.msg的值，你将看到上例相应地更新，更改数据也触发视图的相应更新。

注：由于实验楼环境特殊，上述操作需要在自己电脑上的浏览器中完成。

总结

我们学习了以下内容：

• Vue 与其他框架的对比及特点
• 安装 Vue 的方法
• node 的安装
• vue-cli 的安装
• Vue 开发者工具的安装
• Vue 创建实例
• Vue 数据的双向绑定及响应式

本节内容让我们掌握了 vue 的基础安装，以及怎么样去实例化第一个 vue 应用，需要自己亲手去写代码，初步感受一下 vue 的神奇之处。