2023年7月7日发(作者：)

第一章 入门

在学习Vue前，您应该有HTML，CSS和JavaScript的基本知识。本教材使用WebStrom工具开发并调试，案例源码基于 Vue 2.6.1 版本测试，样式表使用LayUI样式实现。

本章要点



了解什么是



了解Vue中的MVVM模式



Vue开发环境的准备与配置



了解Vue项目目录结构

 实例化Vue对象、数据与方法



通过综合实例学习Vue原理与开发过程

1.1 Vue简述

1.1.1 什么是

的作者为Evan You（尤雨溪），曾任职于Google Creative Lab，虽然是Vue是一个个人项目，但在发展前景上个人认为绝不输于Google的和Facebook的。

（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架,是当下很火的一套响应式系统的JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。类似其他前端开发库也有很多，比如，等。是前端主流框架中的集大成者，它吸取了，的经验，支持各种模式写法，入门非常简单，相比于和，提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用。

1 / 23

自身不是一个全能框架，它只聚焦于视图层，采用自底向上增量开发的设计，因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时， 也能完美地驱动复杂的单页应用。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

如果你之前已经习惯了用jQuery操作DOM，学习时请先抛开手动操作DOM的思维，因为是数据驱动的，你无需手动操作DOM。它通过一些特殊的HTML语法，将DOM和数据绑定起来，一旦你创建了绑定，DOM将和数据保持同步，每当变更了数据，DOM也会相应地更新。

1.1.2

的特性

1.遵循MVVM模式（m->model(数据对象) v->view(视图) vm->view

model）；

2.编码简洁，体积小，运行效率高，适合移动端/PC端；

3.它本身只关注UI，可以轻松引入Vue插件或其他第三方库开发项目；

Vue扩展插件：

vue-cli:Vue脚手架

vue-resource(axios):ajax请求

vue-router:路由

vuex:状态管理

vue-lazyload:图片懒加载

vue-scroller:页面滑动相关

mint-ui:基于Vue的UI组件库（移动端）

2 / 23

1.1.3 Vue优势

1. 可进行组件化开发，使代码量减少；

2. 可对数据进行双向绑定；

3. 编写出来界面效果本身是响应式的，使网页能显示好看效果；

4. 实现网络页面之间跳转，与Vue 路由相比，超链接不会页面刷新；

1.1.4 为什么使用Vue

由于近两年前端技术变革速度太快，vue不论针对web项目开发，网站制作，还是app，小程序开发，都越来越流行，其便捷性及易用程度都让你不得不考虑去学习。如果仅仅还是采用传统的各种开源代码建站仿站，显然你的技术已经跟不上了，如果你开发的项目数据交互较多，并且前后端分离明显，那么vue将会是你未来技术增长的不二选择。

简单来说，在传统web开发中，我们搭建项目都以html结构为基础，然后通过jquery或者js来添加各种特效功能，需要去选中每一个元素进行命令。这些内容在简单的项目中或者不变的项目中还能应付得来，一旦项目改动或者项目工程较大，代码的修改将是复杂繁琐的，而这时候如果用了，这些问题都不复存在。比如一些单网页制作成的应用程序，一般涉及到数据交互的内容都很多，而应用了Vue之后也将大大缩减工作量。

再简单来说，当前端页面和后端数据做一些操作的时候，可以通过AJAX请求对后端做数据持久化，不需要刷新整个页面，只需要改动DOM里需要改动的那部分数据即可。

1.2 MVVM模式

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。

3 / 23

下图1-1不仅概括了MVVM模式（Model-View-ViewModel），还描述了在中ViewModel是如何和View以及Model进行交互的。

图 1-1 MVVM模式交互图

ViewModel是的核心，它是一个Vue实例。Vue实例是作用于某一个HTML元素上的，这个元素可以是HTML的body元素，也可以是指定了id的某个元素。

当创建了ViewModel后，双向绑定是如何达成的呢？

首先，我们将上图1-1中的DOM Listeners和Data Bindings看作两个工具，它们是实现双向绑定的关键。

从View层看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；

从Model层看，当我们更新Model中的数据时，Data Bindings工具会帮我们更新页面中的DOM元素。

专家提示

Vue必须在ES5版本以上的环境下使用，一些不支持ES5的旧浏览器无法运行Vue。

4 / 23

1.3 的下载及使用

安装步骤：

1. 查看 npm 的版本号并安装 Vue

2. 安装脚手架 vue-cli

3. 创建一个基于 webpack 模板的新项目

4. 使用 cd 命令进入项目 my-project 中，并安装项目依赖项

5. 使用 cnpm run dev 运行项目

6. 成功执行以上命令后访问

第一步：首先安装，搭建Vue环境

访问官网（/en/download/）进行安装包下载。

下载成功之后运行安装程序，进行安装。建议不要安装在系统盘（如C：）。

如果是用安装程序进行安装，在安装过程中会自动进行Nodejs环境变量的配置，如果是通过其他方式进行安装，可能需要手动配置环境变量。

5 / 23

完成安装后，可以打开命令行，直接使用node命令，进入交互模式。然后可以输入("Hello World！");测试安装。

第二步：使用Npm安装Vue

第三步：安装Webpack模板：npm install webpack -g

第四步：安装Vue脚手架：npm install vue-cli -g

6 / 23

vue-cli脚手架是提供的一个官方命令行工具，用于快速搭建大型单页应用。

第五步：创建一个基于Webpack模板的新项目，新项目名称myproject。

第六步：进入myproject项目中，并安装项目依赖项

第七步：使用npm run dev运行项目

7 / 23

第八步：打开浏览器，输入localhost:8080/#/ 进行测试

如果看到下图1-2结果，说明项目环境已经创建完成。

图1-2 Vue测试成功页面

1.4 使用Webstorm创建并且运行vue项目

1、打开WebStorm工具

8 / 23

新建工程

然后一路Next，看到下图工程目录结构

9 / 23

使用webstorm，调出控制台

输入npm run dev

10 / 23

通过测试正常显示

但是每次都打开命令窗口比较麻烦， 可以在webstorm内进行配置，从webstorm内启动 这样更加的方便，那么怎样在Webstorm中快速启动Vue项目配置，请看下面启动配置。

Webstorm快速启动Vue项目配置：

1、点击右上角，添加npm配置。

11 / 23

单击OK启动

通过测试正常显示

提示：环境配置步骤和方式不只有这一种，可以根据自身理解进行测试。

1.5 解读Vue项目文件目录结构

利用WebStrom工具我们可以很快的搭建一个Vue项目，搭建完成后我们可以看到生成的文件夹中包含的文件。

12 / 23

下面介绍一下Vue项目的目录结构：

1、build目录：webpack相关配置文件（打包项目时用到的文件）；

build目录存放的是webpack的相关配置文件，它包含有如下配置文件：

：生产环境构建文件；

：版本检查（node,npm）；

：构建相关工具；

：CSS加载器配置；

：webpack基础配置；

：webpack开发环境配置；

：webpack生产环境配置；

：开发服务器的热重载（用于实现页面的自动刷新）；

：构建本地服务器（npm run dev 即运行它）；

2、config目录：

vue基本配置文件目录（配置监听端口、打包输出等），存放的是vue的配置文件，包含有如下这些文件：

13 / 23

：项目开发环境配置文件；

：项目主要配置（包括监听端口、打包路径等）；

：项目生产环境配置；

3、node-modules目录：

vue的依赖包目录；

4、src目录：

src目录存放的是我们开发项目的源代码文件，它们都是项目的核心文件。

assets目录：存放项目静态资源文件（如：css、图片等）；

components目录：项目公共组件目录；

router目录：项目路由配置文件目录；

：项目根组件文件；

：项目入口文件；

5、static目录：存放静态资源目录。

1.6 实例化Vue对象、数据和方法

如果了解一门语言，或者学习一门新技术，编写“你好，世界！”示例是我们的必经之路。

【例1-1】 输出“你好，世界！”

1.

2.

3.

4.

5.

6.

7.

8.

9.

10.

14.

15.

34.

35.

使用Vue的过程就是定义MVVM各个组成部分的过程，下面对上述示例做了详细解释。

1.6.1 定义View

1.

1.6.2 定义Model

1. var exampleData={

2. message:"世界！"

3. }

1.6.3 创建一个Vue实例

1. new Vue({

2. el: '#app',

3. data: exampleData,

4. methods: {

5. say:function () {

6. return "你好，"+e;

7. }

8. }

9. })

10. //它用于连接View和Model

在创建Vue实例时，需要传入一个选项对象，选项对象可以包含数据、挂载元素、方法、模生命周期钩子函数等等。

在这个示例中：

a) 对象的el属性指向View，el: '#app'表示该Vue实例将挂载到

这个元素上；

b) data属性指向Model，data: exampleData表示我们的Model是exampleData对象。

c) methods属性是方法，定义被调用的方法。

d) 有多种数据绑定的语法，最基础的形式是文本插值，使用一对大括号语法，在运行时{{ message }}会被数据对象的message属性替换，所以页面上会输出"你好，世界！"。结果如图1-3 所示：

16 / 23

图1-3 演示创建Vue实例

1.6.4 双向数据绑定

MVVM模式本身是实现了双向数据绑定的，在中可以使用v-model指令在表单元素上创建双向数据绑定。

将message绑定到文本框，当更改文本框的值时，

{{ message }}

中的内容也会被更新。

17 / 23

反过来，如果改变message的值，文本框的值也会被更新，我们可以在Chrome浏览器的控制台进行调试。

专家提示:

Vue实例的data属性指向exampleData，它是一个引用类型，改变了exampleData对象的属性，同时也会影响Vue实例的data属性。

1.6.5 将数据挂载到DOM页面

这里通过一个示例分析Vue如何把数据挂载到DOM页面中，何时更新DOM数据。

【例1-2】将数据挂载到DOM页面

1.

2.

3.

4.

5.

6.

7.

8.

9.

10.

15.

16.

34.

35.

运行结果

图1-4 挂载数据

19 / 23

图1-5 更新DOM

1.7 综合示例-简单计算器

【例1-3】实现简单计算器

1.

2.

3.

4.

5.

6.

7.

8.

9.

10.

11.

28.

29.

53.

54.

运行结果如图1-6：

图1-6 运行结果

22 / 23

个人认为前端的一些框架技术都是相通的，学习一门语言或者框架本身并不是为了学习它的技术，最重要的是学习它的思维，只有思维层面得到了延伸，学习其他技术的时候会发现得心应手。Vue会带给我们解决前端问题一种解决问题的新的思维。

本章小结

本章主要对Vue初级知识进行了简单的介绍，包括Vue的概述，MVVM模式，Vue环境安装，使用WebStrom来创建并运行Vue项目，解读Vue项目文件目录结构等，通过这些内容的学习，读者可以对Vue有初步的了解，为以后的学习奠定基础。

习题

1-1

1-2

1-3

1-4

1-5

简单描述什么是Vue及特点？

列举常用编写Vue的开发工具有哪些？

如何使用npm方式搭建Vue单页面应用？

熟悉Vue项目目录结构？

使用WebStorm工具编写Hello World！应用？

23 / 23