零、前言
直到几年前，直接 DOM 操作还是前端开发中的标准，jQuery 是其中的佼佼者。随着现代 JavaScript 库和框架（主要是 Angular 和 React）的普及，所有这些都开始发生变化。然后，在 2014 年 2 月，Vue 发布了它的初始版本
由于大型 IT 公司同时支持 Angular 和 React，目前尚不清楚 Vue 将如何开拓自己的市场。Vue 最初由单个开发人员 Evan You 在短短四年内开发，没有公司的支持，Vue 从一个单一开发人员的有趣小项目变成了一个不太可能与大男孩竞争的对手，贡献者超过 300 人。这不再是一场单人秀了。
如今，Vue 被 NASA、GitLab、阿里巴巴、Grammarly、WizzAir、EuroNews、小米、Adobe、Behance、任天堂、Chess.com 和许多其他公司使用。
结论 Vue 会留下来。尽管有人在讨论学习 Elm、React、Angular、Ember 或其他完全不同的东西是否更好，但这个讨论基本上是无关的。每个库和框架都可以提供一些功能，最后，只需尝试一下，看看它是否适合您。
我们开发人员需要接受在技术浪潮中冲浪的必要性，并接受学习新的框架和范例只是我们职业生涯的一部分。因此，问题不在于我们是否应该学习 Vue 或任何其他经过战斗测试和验证的技术。
Vue 已经取得了排名，它与大男孩们在同一个联赛中比赛。唯一的问题是，我如何有效地学习它？这本书试图回答这个问题。
这本书是给谁的
本书针对的是没有 Vue 或其他 VDOM JavaScript 库经验的初级到中级前端 web 开发人员。对读者来说，掌握一些 JavaScript 和 CSS 知识将是有益的。它旨在让读者快速了解 Vue 的设置以及运动部件如何协同工作。它的目的是为您提供几乎整个 Vue 环境的概览，简洁明了，并提供大量示例
本书的目标很简单——快速有效地向您介绍 Vue，并让您轻松进入框架，而无需投入大量时间和精力。预期的结果是，您将获得巨大的投资回报——获得足够的框架实用知识，在您阅读本书时，您将有信心解决一些更高级的 Vue 项目和概念。
这本书涵盖的内容
第一章介绍了 Vue，讨论了什么是 Vue，并从胡须模板开始。我们将研究 Vue 解决的问题以及使用 Vue 的原因。
第 2 章Vue 2的基本概念，讨论了反应性、计算性质和方法。我们还介绍组件、模板、属性、观察者和生命周期挂钩。
第 3 章使用 Vue CLI、组件、属性和插槽演示了如何安装 Vue CLI 以及如何设置代码编辑器以更有效地使用 Vue。我们将检查基于 vue cli 的项目的结构，了解如何向子组件添加基本功能，以及如何将数据从子组件传递到父组件。
第 4 章过滤器和混合器介绍了如何使用过滤器。我们将介绍语法、用例和一些示例。我们还研究了如何使用 mixin。
第 5 章制作您自己的指令和插件，介绍了通过制作我们自己的自定义指令来扩展 Vue 的方法。我们还从头开始构建自己的插件，并学习如何通过 npm 发布它。
第 6 章过渡和动画让读者一步一步地将 CSS 过渡与 CSS 动画进行比较，了解它们之间的差异，以及如何开始将它们与 Vue 集成。然后，我们讨论了使用转换和转换组组件、转换挂钩作为 CSS 类、命名转换挂钩和 JavaScript 转换挂钩在 Vue 中组织转换和动画的各种方法。
第 7 章使用 Vuex向读者从头开始展示了状态的确切含义及其重要性。它还解释了拥有存储的原因——集中式状态——以及其内部如何工作。我们还修改了一些代码示例，以从这个集中的商店控制我们的应用程序。
第 8 章使用 Nuxt.js 和 Vue 路由介绍 SPA 的工作原理、存在的问题以及如何通过服务器端渲染和代码拆分来克服这些问题。然后，我们将看到如何构建一个非常简单的 Nuxt.js 应用程序，其中包含一些页面和一些附加的转换
充分利用这本书
如果您能做到以下几点，本书将最适合您：
- 代码基本 HTML、CSS 和 JavaScript
- 大致了解 internet 和浏览器的工作原理
- 有一些使用代码编辑器和控制台程序的经验
- 愿意下载示例（或从 CodePen 获得）
本书中的 JavaScript 代码大部分是用 ES5 编写的，但随着本书的深入，有时 ES6 已经潜入其中。使用 ES5 的原因是，不假定读者理解 ES6 语法。同样，我们也不认为读者以前没有使用过 ES6，因此，我们做出了一个妥协：不关注 ES6 的特性，但也不完全忽视它们。作者的拙见是，这种方法将把重点转移到重要的地方：理解 Vue。
下载示例代码文件
您可以从您的账户www.packt.com下载本书的示例代码文件。如果您在其他地方购买了本书，您可以访问www.packt.com/support并注册，将文件通过电子邮件直接发送给您。
您可以通过以下步骤下载代码文件：
- 登录或注册“T0”www.packt.com“T1”
- 选择“支持”选项卡。
- 点击代码下载和勘误表。
- 在搜索框中输入图书名称，然后按照屏幕上的说明进行操作。
下载文件后，请确保使用以下最新版本解压或解压缩文件夹：
- WinRAR/7-Zip for Windows
- 适用于 Mac 的 Zipeg/iZip/UnRarX
- 适用于 Linux 的 7-Zip/PeaZip
该书的代码包也托管在 GitHub 上的https://github.com/PacktPublishing/Vue.js-Quick-Start-Guide 。如果代码有更新，它将在现有 GitHub 存储库中更新。
我们的丰富书籍和视频目录中还有其他代码包，请访问https://github.com/PacktPublishing/ 。看看他们！
下载彩色图像
我们还提供了一个 PDF 文件，其中包含本书中使用的屏幕截图/图表的彩色图像。您可以在这里下载：https://www.packtpub.com/sites/default/files/downloads/9781789344103_ColorImages.pdf 。
使用的惯例
本书中使用了许多文本约定。
CodeInText：表示文本中的码字、数据库表名、文件夹名、文件名、文件扩展名、路径名、虚拟 URL、用户输入和 Twitter 句柄。下面是一个示例：“将下载的WebStorm-10*.dmg磁盘映像文件作为系统中的另一个磁盘装载。”
代码块设置如下：
...
data: {
// the model goes here
}
...
当我们希望提请您注意代码块的特定部分时，相关行或项目以粗体显示：
div,.thetemplate {
font-size: 30px;
padding: 20px;
color: limegreen;
font-family: Arial;
任何命令行输入或输出的编写方式如下：
cd quickstart-vue
粗体：表示一个新术语、一个重要单词或您在屏幕上看到的单词。例如，菜单或对话框中的单词出现在文本中，如下所示。下面是一个示例：“从管理面板中选择系统信息。”
Warnings or important notes appear like this. Tips and tricks appear like this.
联系
我们欢迎读者的反馈。
一般反馈：如果您对本书的任何方面有疑问，请在邮件主题中注明书名，并发送电子邮件至customercare@packtpub.com。
勘误表：尽管我们已尽一切努力确保内容的准确性，但还是会出现错误。如果您在本书中发现错误，如果您能向我们报告，我们将不胜感激。请访问www.packt.com/submit-errata，选择您的书籍，点击 errata 提交表单链接，并输入详细信息。
盗版：如果您在互联网上发现我们作品的任何形式的非法复制品，请您提供我们的位置地址或网站名称，我们将不胜感激。请通过copyright@packt.com与我们联系，并提供该材料的链接。
如果您有兴趣成为一名作家：如果您对某个主题有专业知识，并且您有兴趣撰写或贡献一本书，请访问authors.packtpub.com。
评论
请留下评论。一旦你阅读并使用了这本书，为什么不在你购买它的网站上留下评论呢？然后，潜在读者可以看到并使用您的无偏见意见做出购买决定，我们 Packt 可以了解您对我们产品的看法，我们的作者可以看到您对他们书籍的反馈。非常感谢。
有关 Packt 的更多信息，请访问Packt.com。
版权属于：月萌API www.moonapi.com，转载请注明出处
