掌握Vue框架，快速构建用户界面“作者提供技术支持和答疑服务

前言

Vue.js是一套构建用户界面的渐进式框架，采用自底向上增量开发的设计。Vue.js的核心库只关注视图层，并且非常容易学习，与其他库或已有项目整合也非常方便，因此Vue.js能够在很大程度上降低Web前端开发的难度，深受广大Web前端开发人员的喜爱。

本书内容

第1章是快速进入Vue.js的世界。内容包括前端开发技术的发展、MV*模式、Vue.js概述、Vue.js的发展历程、Vue.js 3.0的新变化。

第2章介绍搭建开发与调试环境。内容包括安装Vue.js、安装WebStorm、安装vue-devtools、第一个Vue.js程序。

第3章介绍ECMAScript6语法。内容包括ECMAScript6、块作用域构造let和const、模板字面量、默认参数和rest参数、解构赋值、展开运算符、增强的对象文本、箭头函数、Promise实现、Classes、Modules、Webpack、响应式重构Proxy。

第4章介绍Vue.js的语法。内容包括创建应用程序实例、插值、方法选项、生命周期钩子函数、指令、缩写、取消构造函数。

第5章介绍指令。内容包括内置指令、自定义指令、通过指令实现下拉菜单效果。

第6章介绍计算属性。内容包括使用计算属性、计算属性的getter和setter方法、计算属性的缓存、计算属性代替v-for和v-if、使用计算属性设计购物车效果。

第7章是精通监听器。内容包括使用监听器、监听方法、监听对象、使用监听器设计购物车效果。

第8章介绍事件处理。内容包括监听事件、事件处理方法、事件修饰符、按键修饰符、系统修饰键、处理用户注册信息。

第 9 章 介 绍 class 与 style 绑 定 。 内 容 包 括 绑 定 HTML 样 式（Class）、绑定内联样式（style）、设计隔行变色的商品表。

第10章介绍表单输入绑定。内容包括实现双向数据绑定、单行文本输入框、多行文本输入框、复选框、单选按钮、选择框、值绑定、修饰符、设计用户注册页面。

第11章介绍组件和组合API。内容包括组件是什么、组件的注册、使用prop向子组件传递数据、子组件向父组件传递数据、插槽、组合API、setup()函数、响应式API、访问组件的方式、使用组件创建树状项目分类。

第12章介绍设计过渡和动画效果。内容包括单元素／组件的过渡、初始渲染的过渡、多个元素的过渡、列表过渡、商品编号增加器、设计下拉菜单的过渡动画。

第13章介绍Vue CLI和Vite。内容包括脚手架的组件、脚手架环境搭建、安装脚手架、创建项目、分析项目结构、配置Scss、配置Less和Stuly、配置文件gackage.json、构建工具Vite。

第14章介绍使用VueRouter开发单页面应用。内容包括使用VueRouter、命名路由、命名视图、路由传参、编程式导航、组件与VueRouter间解耦。

第15章介绍axios。内容包括什么是axios、安装axios、axios的基本用法、axiosAPI、请求配置、创建实例、配置默认选项、拦截器、显示近7日的天气情况实例。

第16章介绍Vuex。内容包括什么是Vuex、安装Vuex、在项目中使用Vuex。

第17章介绍开发网上购物商城的项目实训。

第18章介绍开发电影购票APP的项目实训。

如果你最近有前端面试方面的需求不妨和我探讨一下，本人总结了今年大厂方面的很多面试原题，以及今年最新的刷题网站，恰好你最近有面试的话，不如让我帮你排疑解惑

以上：https://github.com/encode-studio-fe/natural_traffic/wiki/scan_material5

目录展示

第1章　快速进入Vue.js的世界

在网站前端开发技术的发展过程中，网页变得更加动态化，例如轮播图、图片无缝滚动等效果，这都借助了JavaScript的能力。现在的Web开发者已经把很多传统的服务端代码放到了浏览器中，这样就产生了成千上万行的JavaScript代码，它们连接了许多HTML和CSS文件，但由于缺乏正规的组织形式，所以网站变得越发臃肿。Vue.js框架的出现正是为了解决这个问题。本章将重点学习MV*模式、Vue.js概述和Vue.js 3.0的新变化。

1.1 前端开发技术的发展

Vue.js是基于JavaScript的一套MVVC前端框架。在介绍Vue.js之前，先来了解一下Web前端技术的发展过程。

Web刚起步阶段，只有可怜的HTML，浏览器请求某个URL时，Web服务器就把对应的HTML文件返回给浏览器，浏览器做解析后展示给用户。随着时间推移，为了能给不同用户展示不同的页面信息，就慢慢发展出来基于服务器的可动态生成HTML的语言，例如ASP、PHP、JSP等。

但是，当浏览器接收到一个HTML后，如果要更新页面的内容，就只能重新向服务器请求获取一份新的HTML文件，即刷新页面。在2G的流量年代，这种体验是很容易让人崩溃的，而且还浪费流量。

1995 年 ， Web 进 入 JavaScript 阶 段 ， 在 浏 览 器 中 引 入 了JavaScript。JavaScript是一种脚本语言，浏览器中带有JavaScript引擎，用于解析并执行JavaScript代码，然后就可以在客户端操作HTML页面中的DOM，这样就解决了不刷新页面情况，动态地改变用户HTML页面的内容。再后来发现编写原生的JavaScript代码太烦琐了，还需要记住各种晦涩难懂的API，最重要还需要考虑各种浏览器的兼容性，就出现了jQuery，并很快占领了JavaScript世界，几乎成为前端开发标配。

直到HTML5的出现，前端能够实现的交互功能越来越多，代码也越来越复杂，从而出现了各种MV*框架，使得网站开发进入SPA（SinglePage Application）时代。SPA也就是单页应用程序，是指只有一个Web页面的应用。单页应用程序是加载单个HTML页面、并在用户与程序交互时动态更新该页面的Web应用程序。浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这个页面上完成，由JavaScript来控制交互和页面的局部刷新。

2015 年 6 月 ， ECMAScript 6 发 布 ， 其 正 式 名 称 为 ECMAScript2015。该版本增加了很多新的语法，从而拓展了JavaScript的开发潜力。Vue.js项目开发中经常会用ECMAScript 6语法。

1.2 MV*模式

MVC是Web开发中应用非常广泛的一种架构模式，之后又演变成MVVM模式。

1.2.1 MVC模式

随着JavaScript发展，渐渐显现出各种不和谐：组织代码混乱、

业务与操作DOM杂合，所以引入了MVC模式。

MVC模式中，M指模型（Model），是后端传递的数据；V指视图（View），是用户所看到的页面；C指控制器（Controller），是页面业务逻辑。MVC模式示意图如图1-1所示。

使用MVC模式的目的是将Model和View的代码分离，实现Web应用系统的职能分工。MVC模式是单向通信，也就是View和Model，需要通过Controller来承上启下。

1.2.2 MVVM模式

随着网站前端开发技术的发展，又出现了MVVM模式。不少前段框架采用了MVVM模式，例如，当前比较流行的Angualr和Vue.js。

MVVM是Model-View-ViewModel的简写。其中MV和MVC模式中的意思一样，VM指ViewModel，是视图模型。MVVM模式示意图如图1-2所示。

ViewModel是MVVM模式的核心，是连接View和Model的桥梁。它有两个方向：

（1）将模型转化成视图，将后端传递的数据转化成用户所看到的页面。

（2）将视图转化成模型，即将所看到的页面转化成后端的数据。

在Vue.js框架中这两个方向都实现了，就是Vue.js中数据的双向绑定。

1.3 Vue.js概述

Vue.js是一套构建前端的MVVM框架，它集合了众多优秀主流框架设计的思想，轻量、数据驱动（默认单向数据绑定，但也提供支持双向数据绑定）、学习成本低，且可与webpack/gulp构建工具结合以实现Web组件化开发、构建和部署等。

Vue.js 本 身 就 拥 有 一 套 较 为 成 熟 的 生 态 系 统 ： Vue+vuerouter+Vuex+webpack+Sass/Less，不仅满足小的前端项目开发，也能完全胜任大型的前端应用开发，包括单页面应用和多页面应用等。

Vue.js可实现前端页面和后端业务分离、快速开发、单元测试、构建优化、部署等。提 到 前 端 框 架 ， 当 下 比 较 流 行 的 有 Vue.js 、 React.js 和Angular.js。Vue.js以其容易上手的API、不俗的性能、渐进式的特性和活跃的社区，从中脱颖而出。截至到目前，Vue.js在Github上的star数已经超过了其他两个框架，成为最热门的框架。

Vue.js的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue.js也完全能够为复杂的单页应用提供驱动。

Vue.js的目标就是通过尽可能简单的API实现响应、数据绑定和组合的视图组件，核心是一个响应的数据绑定系统。Vue.js被定义成一个用来开发Web界面的前端框架，是个非常轻量级的工具。使用Vue.js可以让Web开发变得简单，同时也颠覆了传统前端开发的模式。

Vue.js是渐进式的JavaScript框架，如果已经有一个现成的服务端应用，可以将Vue.js作为该应用的一部分嵌入其中，带来更加丰富的交互体验。或者，如果希望将更多的业务逻辑放到前端来实现，那么Vue.js的核心库及其生态系统，也可以满足用户的各种需求。

和其他前端框架一样，Vue.js允许将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS和JavaScript，如图1-3所示，以用来渲染网页中相应的地方。

这种把网页分割成可复用组件的方式，就是框架“组件化”的思

想。

Vue.js组件化的理念和React异曲同工——“一切皆组件”。

Vue.js 可 以 将 任 意 封 装 好 的 代 码 注 册 成 组 件 ， 例 如

Vue.component('example',Example)，可以在模板中以标签的形式调用。

Example 是 一 个 对 象 ， 组 件 的 参 数 配 置 ， 经 常 使 用 到 的 是template，它是组件将要渲染的HTML内容。

例如，example组件，调用方式如下：

如果组件设计合理，在很大程度上可以减少重复开发，而且配合Vue.js的单文件组件（vue-loader），可以将一个组件的CSS、HTML和JavaScript都写在一个文件里，做到模块化的开发。此外，Vue.js也可以与vue-router和vue-resource插件配合起来，以支持路由和异步请求，这样就满足了开发SPA的基本条件。

在Vue.js中，单文件组件是指一个后缀名为.vue的文件，它可以由各种各样的组件组成，大至一个页面组件，小至一个按钮组件。在后面章节将详细介绍单文件组件的实现。

SPA即单页面应用程序，是指只有一个Web页面的应用。单页面应用程序是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序。浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这个页面上完成，由JavaScript来控制交互和页面的局部刷新。

1.4 Vue.js的发展历程

Vue.js正式发布于2014年2月，包含了70多位开发人员的贡献。从脚手架、构建、组件化、插件化，到编辑器工具、浏览器插件等，基本涵盖了从开发到测试等多个环节。

Vue.js的发展过程如下：

2013年12月24日，发布0.7.0。

2014年1月27日，发布0.8.0。

2014年2月25日，发布0.9.0。

2014年3月24日，发布0.10.0。

2015年10月27日，正式发布1.0.0。

2016年4月27日，发布2.0的preview版本。

2017年第一个发布的Vue.js的为v2.1.9，最后一个发布的Vue.js为v2.5.13。

2019年发布Vue.js的2.6.10，也是比较稳定的版本。

2020年09月18日，Vue.js 3.0正式发布。

1.5 Vue.js 3.0的新变化

Vue.js 3.0并没有延用Vue.js 2.x版本的代码，而是从头重写了整个框架，代码采用TypeScript进行编写，新版本的API全部采用普通函数，在编写代码时可以享受完整的性能推断。

与Vue.js 2.x版本相比，Vue.js 3.0具有以下新变化。

1．重构响应式系统

Vue.js 2.x利用Object.defineProperty()方法侦查对象的属性变化，该方法有一定的缺点：

（1）性能较差。

（2）在对象上新增属性是无法被侦测的。

（3）改变数组的length属性是无法被侦测的。

Vue.js 3.0 重 构 了 响 应 式 系 统 ， 使 用 Proxy 替 换

Object.defineProperty。Proxy被称为代理，它的Proxy优势如下：

（1）性能更优异。

（2）可直接监听数组类型的数据变化。

（3）监听的目标为对象本身，不需要像Object.defineProperty

一样遍历每个属性，有一定的性能提升。

（ 4 ） Proxy 可 拦 截 apply 、 ownKeys 、 has 等 13 种 方 法 ， 而Object.defineProperty不行。

2．更好的性能

Vue.js 3.0重写了虚拟DOM的实现，并优化了编译模板，提升了组件的初始化速度，更新的性能提升1.32倍，服务器端渲染速度提升了23倍。

3．tree-shaking支持

Vue.js 3.0只打包真正需要的模块，删除掉无用的模块，从而减小了产品发布版本的大小。而在Vue.js 2.x中，很多用不到的模块也会被打包进来。

4．组合API

Vue 3.0中引入的基于函数的组合API。在引入新的API之前，Vue还有其他替代方案，它们提供了诸如mixin、HOC（高阶组件）、作用域插槽之类的组件之间的可复用性，但是所有方法都有其自身的缺点，因此它们未被广泛使用。

（1）一旦应用程序包含一定数量的mixins，就很难维护。开发人员需要访问每个mixin，以查看数据来自哪个mixin。

（2）HOC模式不适用于.vue单文件组件，因此在Vue开发人员中不被广泛推荐或使用。

（3）作用域插槽的内容会进行封装到组件中，但是开发人员最终拥有许多不可复用的内容，并在组件模板中放置了越来越多的插槽，导致数据来源不明确。

组合API的优势如下：

（1）由于API是基于函数的，因此可以有效地组织和编写可重用的代码。

（2）将共享逻辑分离为功能来提高代码的可读性。

（3）可以实现代码分离。

（4）在Vue应用程序中更好地使用TypeScript。

5．Teleport（传送）

Teleport是一种能够将模板移动到DOM中Vue应用程序之外的其他位置的技术。像modals和toast等这样的元素，如果嵌套在Vue的某个组件内部，那么处理嵌套组件的定位、z-index样式就会变得很困难。

很多情况下，需要将它与Vue应用的DOM完全剥离，管理起来会容易很多，此时就需要用到Teleport。

6．fragment（碎片）

Vue 2.x的Vue文件必须有一个唯一的根节点，Vue 3.0将不再限于模板中的单个根节点，可以有多个节点。

7．更好的TypeScript支持

Vue 3.0是用TypeScript编写的库，可以享受自动的类型定义提示。JavaScript和TypeScript中的API相同，从而无须担心兼容性问题。结合使用支持Vue 3.0的TypeScript插件，开发更加高效，还可以拥有类型检查、自动补全等功能。

1.6 疑难解惑

疑问1：前端开发的技术体系是什么？

目前的前端技术已经形成了一个大的技术体系。

（1）以Github为代表的代码管理仓库。

（2）以NPM和Yarn为代表的包管理工具。

（3）ECMAScript 6、TypeScript及Babel构成的脚本体系。

（4）HTML5、CSS3及其相应的处理技术。

（5）以React、Vue、Angular为代表的前端框架。

疑问2：在Vue.js中怎么理解MVVM？

MVVM是Model-View-ViewModel的缩写。Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。View代表UI组件，它负责将数据模型转化成UI展现出来。

ViewModel监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View和Model的对象，连接Model和View。

在MVVM架构下，View和Model之间并没有直接的联系，而是通过ViewModel进行交互，Model和ViewModel之间的交互是双向的，因此View数据的变化会同步到Model中，而Model数据的变化也会立即反映到View上。

ViewModel通过双向数据绑定把View层和Model层连接起来，而View和Model之间的同步工作完全是自动的，无须人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM，不需要关注数据状态的同步问题，复杂的数据状态维护完全由MVVM来统一管理。

第2章　搭建开发与调试环境

在开发Vue前端页面之前，首先需要搭建开发和调试环境，主要包括安装Vue.js的方法，安装开发工具WebStorm，安装调试工具vuedevtools，最后通过一个Vue.js程序，检验开发和调试环境是否搭建成功。

2.1 安装Vue.js

Vue.js的安装有4种方式：

（1）使用CDN方式。

（2）使用NPM方式。

（3）使用命令行工具（Vue Cli）方式。

（4）使用Vite方式。

2.1.1 使用CDN方式

CDN的全称是Content Delivery Network，即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络堵塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。

使用CDN方式来安装Vue框架，就是选择一个提供稳定Vue.js链接的CDN服务商。选择好CDN后，在页面中引入Vue的代码如下：

2.1.2 NPM

NPM是一个Node.js包管理和分发工具，也是整个Node.js社区最流行、支持第三方模块最多的包管理器。在安装Node.js环境时，安装包中包含NPM，如果安装了Node.js，则不需要再安装NPM。

用Vue构建大型应用时推荐使用NPM安装。NPM能很好地和诸如webpack或Browserify模块打包器配合使用。

使用NPM安装Vue 3.0：

由于国内访问国外的服务器非常慢，而NPM的官方镜像就是国外的

服务器，为了节省安装时间，推荐使用淘宝NPM镜像CNPM，在命令提示

符窗口中输入下面的命令并执行：

以后可以直接使用cnpm命令安装模块。代码如下：

Vue提供了一个官方的脚手架（Vue CLI），使用它可以快速搭建一个应用。搭建的应用只需要几分钟的时间就可以运行起来，并带有热重载、保存时lint校验，以及生产环境可用的构建版本。

例如想构建一个大型的应用，可能需要将东西分割成各自的组件和文件，如图2-1所示，此时便可以使用Vue CLI快速初始化工程。

因为初始化的工程，可以使用Vue的单文件组件，它包含了各自的HTML、JavaScript以及带作用域的CSS或者SCSS，格式如下：

Vue CLI工具假定用户对Node.js和相关构建工具有一定程度的了解。如果是初学者，建议先在熟悉Vue本身之后再使用Vue CLI工具。

本书后面章节，将具体介绍脚手架的安装以及如何快速创建一个项目。

2.1.4 使用Vite方式

Vite是Vue的作者尤雨溪开发的Web开发构建工具，它是一个基于浏览器原生ES模块导入的开发服务器。在开发环境下，利用浏览器去解析import，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随启随用。本书后面章节，将具体介绍Vite的使用方法。

2.2 安装WebStorm

WebStorm是一款前端页面开发工具。该工具的主要优势是有智能提示、智能补齐代码、代码格式化显示、联想查询和代码调试等。对于初学者而言，WebStorm不仅功能强大，而且非常容易上手操作，被广大前端开发者誉为Web前端开发神器。

下面以WebStorm英文版为例进行讲解。首先打开浏览器，输入网址

www.jetbrains.com/webstorm/do…#section=windows，进入WebStorm官网下载页，如图2-2所示。单击“Download”按钮，即可开始下载WebStorm安装程序。

1．安装WebStorm 2019

下载完成后，即可进行安装，具体操作步骤如下：

（1）双击下载的安装文件，进入安装WebStorm的欢迎界面，如图2-3所示。

（ 2 ） 单 击 “Next” 按 钮 ， 进 入 选 择 安 装 路 径 窗 口 ， 单 击“Browse...”按钮，即可选择新的安装路径，这里采用默认的安装路径，如图2-4所示。

（3）单击“Next”按钮，进入选择安装选项窗口，勾选所有复选框，如图2-5所示。

（4）单击“Next”按钮，进入选择开始菜单文件夹窗口，默认为JetBrains，如图2-6所示。

（5）单击“Install”按钮，开始安装软件并显示安装进度，如图2-7所示。

（6）安装完成后，单击“Finish”按钮，如图2-8所示

2．创建和运行HTML文件

（1）单击Windows桌面上“WebStorm 2019.3.2 x64”快捷键，打开WebStrom欢迎界面，如图2-9所示。

（2）单击“Open”按钮，在弹出的对话框中选择创建好的文件夹codeHome，如图2-10所示。

（3）单击“OK”按钮，进入WebStorm主界面，选择“File”

→“New”→“HTML File”命令，如图2-11所示。

（ 4 ） 打 开 “New HTML File” 对 话 框 ， 输 入 文 件 名 为“index.html”，选择文件类型为“HTML 5 file”，如图2-12所示。

（5）按Enter键即可查看新建的HTML5文件，接着就可以编辑HTML5 文 件 。 例 如 ， 在 标 记 中 输 入 文 字 “ 大 家 一 起 学 习Vue.js”，如图2-13所示。

（6）在谷歌浏览器（下文的浏览器表示谷歌浏览器）中打开文件的路径，或者打开软件中右上角浏览器工具栏，如图2-14所示，选择指定的浏览器，单击即可打开。

在浏览器中显示的效果如图2-15所示。

2.3 安装vue-devtools

vue-devtools是一款调试Vue.js应用的开发者浏览器扩展，可以在浏览器开发者工具下调试代码。不同的浏览器有不同的安装方法，以浏览器为例，其具体安装步骤如下：

（1）打开浏览器，单击“自定义和控制”按钮，在打开的下拉菜单中选择“更多工具”菜单选项，然后在弹出的子菜单中选择“扩展程序”菜单项，如图2-16所示。

（2）在“扩展程序”界面中单击“Chrome网上应用店”链接，如

图2-17所示。

（3）在“chrome网上应用店”搜索“vue-devtools”，如图2-18所示。

（4）添加搜索到的扩展程序Vue.js devtools，如图2-19所示。

（5）在弹出的窗口中单击“添加扩展程序”按钮，如图2-20所

示。

（6）添加完成后，回到扩展程序界面，可以发现已经显示了Vuedevtools调试程序，如图2-21所示。

（7）单击“详细信息”按钮，在展开的页面中选择“允许访问文件网址”选项，如图2-22所示。

第3章　熟悉ECMAScript 6语法

ECMAScript 6（简称ES6）目前基本成为业界标准，它的普及速度比ES5要快很多，主要原因是现代浏览器对ES6的支持相当迅速，尤其是Chrome和Firefox浏览器，已经支持ES6中绝大多数的特性。本章将重点学习ES 6中常用的语法规则和精简压缩生产环境的webpack。

3.1 ECMAScript 6介绍

1995年12月，Sun公司与网景公司一起研发了JavaScript。1996年3月，网景公司发表了支持JavaScript的网景导航者（浏览器）2.0说明。由于JavaScript作为网页的客户端脚本语言非常成功，微软于1996年8月引入了Internet Explorer 3.0，该软件支持与JavaScript兼容的Jscript。1996年11月，网景公司将JavaScript提交给欧洲计算机制造商协会（ECMA）进行标准化。ECMA-262的第一个版本于1997年6月被ECMA组织采纳，这也是ECMAScript（简称ES）的由来。

3.1.1 ES6的前世今生

ECMAScript是一种由ECMA国际（前身为欧洲计算机制造商协会）通过ECMA-262标准化的脚本程序设计语言，该语言在互联网上应用广泛，往往被称为JavaScript或JScript，但实际上后两者是ECMA-262标准的实现和扩展。

迄今为止有7个ECMA-262版本发布，代表着一次次的JavaScript更新，具体的版本和详细更新内容如表3-1所示。

ECMAScript 6是对语言的重大更新，是自2009年ES5标准化以来语

言的首次更新。有关ES6语言的完整规范，请参阅ES6标准。

第4章　熟悉Vue.js的语法

Vue.js使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。所有Vue.js的模板都是合法的HTML，所以能被遵循规范的浏览器和HTML解析器解析。在底层的实现上，Vue将模板编译成虚拟DOM渲染函数。结合响应系统，Vue能够智能地计算出最少需要重新渲染的组件数量，并把DOM操作次数减到最少。本章将讲解Vue.js语法中数据绑定的语法和指令的使用。

4.1 创建应用程序实例

在一个使用Vue.js框架的页面应用程序中，最终都会创建一个应用程序的实例对象并挂载到指定DOM上。这个实例将提供应用程序上下文，应用程序实例装载的整个组件树将共享相同上下文。

在Vue 3.0中，应用程序的实例创建语法规则如下：

应用程序的实例充当了MVVM模式中的ViewModel。createAPP()是一个全局API，它接受一个根组件选项对象作为参数，该对象可以包含数据、方法、组件生命周期钩子等，然后返回应用程序实例本身。Vue3.0引入createAPP()是为了解决Vue 2.x全局配置代理的一些问题。

创建了应用程序的实例后，可以调用实例的mount()方法，制定一个DOM元素，在该DOM元素上装载应用程序的根组件，这样这个DOM元素中的所有数据变化都会被Vue框架所监控，从而实现数据的双向绑定。

【例4.1】创建应用程序实例（源代码\ch04\4.1.html）。

在组件选项对象中会有一个data()函数，Vue在创建组件实例时会调用该函数。data()函数返回一个数据对象，Vue会将这个对象包装到它的响应式系统中，即转化为一个代理对象，此代理使Vue能够在访问或修改属性时执行依赖项跟踪和改进通知，从而自动渲染DOM。数据对象的每一个属性都会被视为一个依赖项。

在浏览器中运行程序4.1.html，结果如图4-1所示。

第5章　指令

指令是Vue模板中最常用的一项功能，它带有前缀v-，主要职责是当其表达式的值改变时，相应地将某些行为应用在DOM上。本章将介绍Vue的内置指令，以及自定义指令的注册与使用。

5.1 内置指令

内置指令顾名思义就是Vue内置的一些指令，它是针对一些常用的页面功能提供了以指令来封装的使用形式，以HTML属性的方式使用。

5.1.1 v-show

v-show指令会根据表达式的真假值，切换元素的display CSS属性，来显示或者隐藏元素。当条件变化时，该指令会自动触发过渡效果。

【例5.1】v-show指令（源代码\ch05\5.1.html）。

在浏览器中运行程序，按F12键打开控制台并切换到“Elements”选项，展开

标签，结果如图5-1所示。

从上面的示例可以发现，“苹果”并没有显示，是因为v-show指令计算“no”的值为false，所以元素不会显示。

在浏览器的控制台中可以看到，使用v-show指令，元素本身是被渲染到页面的，只是通过CSS的display属性来控制元素的显示或者隐藏 。 如 果 v-show 指 令 计 算 的 结 果 为 false ， 则 设 置 器 样 式 为

“display:none;”。

在浏览器的控制台中，双击代码后修改“苹果”一栏中display为true，可以发现页面中就显示了苹果，如图5-2所示。

第6章　计算属性

在Vue中，可以很方便地将数据使用插值表达式的方式渲染到页面元素中，但是插值表达式的设计初衷是用于简单运算，不应该对差值做过多的操作。当需要对差值做进一步处理时，可以使用Vue中的计算属性来完成这一操作。本章将介绍Vue的计算属性。

6.1 使用计算属性

计算属性在Vue的computed选项中定义，它可以在模板上进行双向数据绑定展示出结果或者用作其他处理。

通常用户会在模板中定义表达式，非常便利，Vue设计初衷也是用于简单运算的。但是在模板中放入太多的逻辑，会让模板变得臃肿且难以维护。例如：

上面插值语法中的表达式调用了3个方法来实现字符串的反转，逻辑过于复杂，如果在模板中还要多次使用此处的表达式，就更加难以维护了，此时应该使用计算属性。

计算属性比较适合对多个变量或者对象进行处理后返回一个结果值，也就是说多个变量中的某一个值发生了变化，则绑定的计算属性也会发生变化。

下面是完整的字符串反转的示例，定义了一个reversedMessage计算属性，在input输入框中输入字符串时，绑定的message属性值发生变化，触发reversedMessage计算属性，执行对应的函数，最终使字符串反转。

【例6.1】使用计算属性（源代码\ch06\6.1.html）。

在浏览器中运行程序，输入框下面则会显示对象的反转内容，效

果如图6-1所示。

在上面示例中，当message属性的值改变时，reversedMessage的值也会自动更新，并且会自动同步更新DOM部分。

在浏览器的控制台中修改message的值，按下回车键执行代码，可以发现reversedMessage的值也发生了改变，如图6-2所示。

第7章　精通监听器

监听器是一个对象，以key-value的形式表示。key是需要监听的表达式，value是对应的回调函数。value也可以是方法名，或者包含选项的对象。Vue实例将会在实例化时调用$watch()遍历watch对象的每一个property。同时，当差值数据变化时，执行异步或开销较大的操作时，可以通过采用监听器的方式来达到目的。本章将讲解监听器对象的用法。

7.1 使用监听器

监听器在Vue实例的watch选项中定义。它包括两个参数，第一个参数是监听数据的新值，第二个是旧值。

下面示例监听了data()函数中的message属性，并在控制台中打印新值和旧值。

【例7.1】使用监听器（源代码\ch07\7.1.html）。

在浏览器中运行程序，这里将分别监听数据属性time和minute的变化，当其中一个数据的值发生变化时，就会调用对应的监听器，经过计算得到另一个数据属性的值，结果如图7-1所示。

注意，不要用箭头函数来定义watch函数。例如：

因为箭头函数绑定了父级作用域的上下文，所以this将不会按照期望指向Vue实例，this.time和this.minute都是undefined。

7.2 监听方法

在使用监听器的时候，除了直接写一个监听处理函数外，还可以接收一个加字符串形式的方法名，方法在methods选项中定义。

【例7.2】使用监听器方法（源代码\ch07\7.2.html）。

在示例中监听了yuan和jiao属性，后面直接加上字符串形式的方法名method1和method2，最后在页面中使用v-model指令绑定yuan和jiao属性。

在浏览器中运行程序，在第一个输入框中输入6，可以发现第二个输入框的值相应地变为60，如图7-2所示。同样，在第二个输入框中输入内容，第一个输入框也会相应地变化。

第8章　事件处理

在第4章中简单讲解过v-on的基本用法。本章将继续深入学习Vue实 现 绑 定 事 件 的 方法 ， 使 用 v-on 指 令 监 听 DOM 事件 来触发一 些JavaScript代码。通过本章的学习，读者可以更加深入地掌握Vue中事件处理的技巧。

8.1 监听事件

事件其实就是在程序运行当中，可以调用方法改变对应的内容。下面先来看一个简单的示例。

运行的结果为“期末考试总成绩是：360分”。

在上面示例中，如果想要改变考试成绩，就可以通过事件来完成。

在JavaScript中可以使用的事件，在Vue.js中也都可以使用。使用事件时，需要v-on指令监听DOM事件。

下面看一个示例，它在上面示例的基础上添加两个按钮，当单击

按钮时增加或减少考试成绩。

【例8.1】添加单击事件（源代码\ch08\8.1.html）。

在浏览器中运行程序，多次单击“增加1分”按钮，期末考试总成绩会不断增加，结果如图8-1所示。

第9章　class与style绑定

在Vue中，操作元素的class列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以可以用v-bind进行处理：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易出错。

因此，在将v-bind用于class和style时，Vue.js做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。本章将讲解class和style的用法。

9.1 绑定HTML样式（class）

在Vue中，动态的样式类在“v-on:class”中定义，静态的类名写在class样式中。

9.1.1 数组语法

Vue中提供了使用数组进行绑定样式的方式，可以直接在数组中写上样式的类名。

【例9.1】class数组语法（源代码\ch09\9.1.html）。

在浏览器中运行程序，打开控制台，可以看到渲染的样式，如图

9-1所示。

如果想要以变量的方式定义样式，就需要先定义好这个变量。示

例中的样式与上例样式相同。

在数组语法中，还可以使用对象语法，根据值的真假来控制样式

是否使用。

第10章　表单输入绑定

对于Vue来说，使用v-bind并不能解决表单域对象双向绑定的需

求。所谓双向绑定，就是无论是通过input还是通过Vue对象，都能修

改绑定的数据对象的值。Vue提供了v-model进行双向绑定。本章将重

点讲解表单域对象的双向绑定方法和技巧。

10.1 实现双向数据绑定

对于数据的绑定，不管是使用插值表达式（{{}}）还是v-text指令，对于数据间的交互都是单向的，只能将Vue实例里的值传递给页面，页面对数据值的任何操作却无法传递给model。

MVVM模式最重要的一个特性，可以说是数据的双向绑定，而Vue作为一个MVVM框架，肯定也实现了数据的双向绑定。在Vue中使用内置的v-model指令完成数据在View与Model间的双向绑定。

可以用v-model指令在表单、及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

v-model会忽略所有表单元素的value、checked、selected特性的初始值，而总是将Vue实例的数据作为数据来源。这里应该通过JavaScript在组件的data选项中声明初始值。

10.2 单行文本输入框

下面讲解最常见的单行文本输入框的数据双向绑定。

【例10.1】绑定单行文本输入框（源代码\ch10\10.1.html）。

在浏览器中运行程序，效果如图10-1所示；在输入框中输入“白

玉盘中看却无”，可以看到下面的内容也发生了变化，如图10-2所

示。

第11章　组件和组合API

在前端应用程序开发中，如果所有的实例都写在一起，必然会导致代码又长又不好理解。组件就解决了这个问题，它是带有名字的可复用实例，不仅可以重复使用，还可以扩展。组件是Vue.js最核心的功能。组件可以将一些相似的业务逻辑进行封装，重用一些代码，从而达到简化代码的目的。另外，Vue.js 3.0新增了组合API，它是一组附加的、基于函数的API，允许灵活地组合组件逻辑。本章将重点学习组件和组合API的使用方法和技巧。

11.1 组件是什么

组件是Vue中的一个重要概念，它是一种抽象，是一个可以复用的Vue实例。它拥有独一无二的组件名称，可以扩展HTML元素，以组件名称的方式作为自定义的HTML标签。因为组件是可复用的Vue实例，所以它们与new Vue()接收相同的选项，例如data、computed、watch、methods以及生命周期钩子等。唯一的例外是el选项，这是只用于根实例特有的选项。

在大多数的系统网页中，网页都包含header、body、footer等部分，很多情况下，同一个系统中的多个页面，可能仅仅是页面中body部分显示的内容不同，因此，这里就可以将系统中重复出现的页面元素设计成一个个的组件，当需要使用到的时候，引用这个组件即可。

在为组件命名的时候，需要使用多个单词的组合，例如组件名称可以命名为：todo-item、todo-list。但Vue中的内置组件例外，不需要使用单词的组合，例如内置组件名称：App、和。

这样做可以避免自定义组件的名称与现有的Vue内置组件名称以及未来的HTML元素相冲突，因为所有的HTML元素的名称都是单个单词。

11.2 组件的注册

在Vue中创建一个新的组件之后，为了能在模板中使用，这些组件必须先进行注册以便Vue能够识别。在Vue中有两种组件的注册类型：

全局注册和局部注册。

11.2.1 全局注册

全局注册组件使用应用程序实例的component()方法来注册组件。

该方法有两个参数，第一个参数是组件的名称，第二个参数是函数对象或者选项对象。语法格式如下：

因为组件最后会被解析成自定义的HTML代码，因此，可以直接在

HTML中使用组件名称作为标签来使用。全局注册组件示例如下所示。

【例11.1】全局注册组件（源代码\ch11\11.1.html）。

在浏览器中运行程序，按F12键打开控制台并切换到“Elements”

选项，效果如图11-1所示。

从控制台中可以看到，自定义的组件已经被解析成了HTML元素。

需要注意一个问题，当采用小驼峰（myCom）的方式命名组件时，在使用这个组件的时候，需要将大写字母改为小写字母，同时两个字母之间需要使用“-”进行连接，例如。

第12章　过渡和动画效果

Vue在插入、更新或者移除DOM时，提供多种不同方式的应用过渡效果。包括以下工具：

（1）在CSS过渡和动画中自动应用class。

（2）可以配合使用第三方CSS动画库，如Animate.css。

（3）在过渡钩子函数中使用JavaScript直接操作DOM。

（4）可以配合使用第三方JavaScript动画库，如Velocity.js。

为什么网页需要添加过渡和动画效果那？因为过渡和动画能够提高用户的体验，帮助用户更好地理解页面中的功能。本章将重点学习如何设计过渡和动画效果。

12.1 单元素／组件的过渡

Vue提供了transition的封装组件，在下列情形中，可以给任何元素和组件添加进入／离开过渡：

（1）条件渲染（使用v-if）。

（2）条件展示（使用v-show）。

（3）动态组件。

（4）组件根节点。

12.1.1 CSS过渡

常用的过渡都是使用CSS过渡。下面是一个没有使用过渡效果的示例，通过一个按钮控制p元素显示和隐藏。

【例12.1】控制p元素显示和隐藏（源代码\ch12\12.1.html）。

在浏览器中运行程序，单击按钮后的效果如图12-1所示。

当单击按钮时，会发现p标签出现或者消失，但没有过渡效果，给用户体验不太好。可以使用Vue的transition组件来实现消失或者隐藏的过渡效果。使用Vue过渡的时候，首先把过渡的元素添加到transition组件中。其中.v-enter、.v-leave-to、.v-enter-active

和.v-leave-active样式是定义动画的过渡样式。

【例12.2】添加CSS过渡效果（源代码\ch12\12.2.html）。

在浏览器中运行程序，单击“古诗欣赏”按钮，可以发现，p元素刚开始在下侧200px的位置开始，透明度为0.2，如图12-2所示；然后过渡到初始的位置，如图12-3所示。

好了，今天的内容就先分享到这里，完整内容可以

以上：github.com/encode-stud…

找我，金九银十已经落幕，不知道你们对于前端开发这个岗位做了多少准备，有多少迷茫，都可以和我探讨一下

身为一个前端开发，本人致力于面试上的各种整理，也许能帮助到你们，加油！！！

作者：困不困
链接：https://juejin.cn/spost/7570247858864439336
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。