本书是用Vue.js构建Web应用的全方位指南。作者运用细致入微的讲解方式带你领略Vue.js的独特魅力,致力于协助你从零开始基于Vue.js创建一个Web应用。本书共7章:第1章介绍Vue的安装及基本用法,覆盖大量Vue核心技术,诸如响应式原理、生命周期钩子等;第2章到第6章进入Vue高阶世界,通过在丰富的组件特性中遨游,教你使用vue-router和vuex来实现客户端路由和状态管理,以此完善整个Web应用的功能;最后一章介绍如何使用vue-test-utils这一官方测试利器来为组件编写单元测试,从而保证Web应用的正常运行;附录分别介绍vue-cli用法及Vue 与React之间的异同。
本书适合对HTML和JavaScript已有一定了解,正在准备或已经使用Vue.js进行Web应用开发的从业者,也适合希望通过学习框架使用来提升对其认识的开发人员,有React使用经验的读者同样可从中获得启发。
真正的快速入门 完整的工具链导航 彻底的从零基础到实战上手
译者序
在掘金网站上的一篇名为《我为什么要立刻放弃 React 而使用 Vue ?》的译文中,评论里有人说道 :“面试过一些前端,10 个 9 个培训的 vue,基础一问三不知,而培 react 的几乎没有”。我认为,基础修行在个人,这当然可以归功于 React,但却没有理由怪罪Vue。相反,这种现象恰恰展现了 Vue 的优势——上手极快。我想,这大概是我们在这个快速迭代的时代里,选择 Vue 的一个潜在原因,它能我们快速体验到成功开发一个可用应用的快感,并借着这份快感,进一步深入,最终迭代出一个满意的应用。这就像大学里学 C 语言,如果一开始不是教找素数这么枯燥的程序,而是从一个简单的贪吃蛇游戏入手,会不会我们学习语言的积极性会更高呢?当然,前提是 Vue 的性能可以和react、angular 等前端框架比肩,上手极快才有意义。关于性能方面的比较,可以查阅官方说明(https://cn.vuejs.org/v2/guide/comparison.html)。
对于现代化前端开发体系,MVVM 框架无疑已经成为其中必不可少的一环。当下主流框架中,React、Angular、Vue 三足鼎立,我们和本书的原作者一样,在经过对它们的了解和实践以后,最终都惊叹于 Vue 简单而不失优雅的开发风格。如果没有深厚的编程功底以及设计能力,想要优雅地使用 React 会存在一些障碍 ;而对于 Angular 来说,对于个人开发者和中小型的应用又略显得“重”了,学习曲线也比较陡峭。但 Vue 对于个人开发者和中小型应用更友好,学习曲线也是渐进性的,非常适合用来入门和学习 MVVM框架中所涉及的通用知识和开发理念。
说到底,JavaScript 是一门特殊的语言,自诞生二十几年来,不断被赋予更多的责任,谓之为移动互联网浪潮的支柱之一不足为过。而在前端开发领域中,从 jQuery 的插件化开发,到模块化和组件化 ;从刀耕火种的“蛮荒时代”,到愈加完善的工程化时代 ;前端开发的质量和效率有了飞跃式的提升,对前端开发从业者的职业素养要求也不断提高。
时至今日,Angular、React 和 Vue 三大框架覆盖了前端开发的大部分场景,其配套生态在社区的支持下不断完善,为前端开发带来极大的帮助。在享受其便利之时,我们更要去深入掌握其背后的语言基础,并思考如果提升和进步,才可能在下一个浪潮中成为时代的弄潮儿。希望这本指南能为将来弄潮儿的你起到些许推波助澜的作用。
最后,非常高兴能形成一个团队共同完成本书的翻译工作,一起经历了一段默契的时光。在翻译工作过程中,我们往往会发现,作为一名前端开发,自认为对 Vue 是有所了解的,但仍然时不时会在书中发现一些不曾注意到的用法,这实在让人很是开心。此外,原作的内容往往通俗易懂,但翻译时,有时候就难免生涩,需要不断推敲用词、组织语句 ;好在,团队成员彼此都非常热心,互相给出了很多有益的意见,并且形成了相互纠正错误的良好氛围,这些都让翻译成果变得更好。在此,感谢团队的付出,感谢所有支持和帮忙本书翻译的老师和编辑们。如果在翻译方面有错误和不足的地方,恳请读者批评指正。
前言
前端开发领域一直在改变。网站变得越来越丰富,交互性也越来越强,作为前端开发者,我们需要不断增加复杂的功能和使用更加强大的工具。使用 jQuery 在某个页面中更改一部分文本很简单,但我们要做的事可不止这些——比如更新页面中大量具有交互性的部分、处理复杂的状态、使用客户端路由、高效简洁地编写和组织代码——在这种情况下,使用 JavaScript 框架会让我们的工作变得更加轻松。
框架是一种 JavaScript 工具,它使开发者能够更容易地创建丰富而又具有交互性的网站。框架所包含的功能使我们能够创建一个功能完备的 Web 应用程序,包括操作复杂的数据并将其显示在页面上、处理客户端路由而不是依赖服务端、有时甚至允许我们只需访问服务器一次并完成初始下载就能构建一个完整的网站。Vue.js 是一款近来十分流行的JavaScript 框架,同时它的普及性还在扩大。当时还在 Google 工作的 Evan You 在 2014年编写并发布了 Vue.js 的第一版。在写本书时,Vue.js 在 GitHub 上已经拥有超过 75000个星标,这使得它成为 GitHub 上受关注度排名第八位的代码仓库,同时这个数量还在迅速上涨 。Vue 拥有上百位合作者,它在 npm 上 每天约有 40000 次的下载量。它包含在开发网站和应用程序时非常有用的功能 :一种功能强大、能够创建 DOM 和监听事件的模板语法,无须操心数据变化带来相应模板更新的响应式原理以及使维护数据变得更容易的功能。
适合读者
如果你已经对 HTML 和 JavaScript 有一定了解,并希望通过学习如何使用框架来提升对它们的认识,则这本书是为你而准备的。你没有必要精通 JavaScript,但是我在代码示例中没有解释任何有关 Vue.js 功能以外的 JavaScript 代码,所以了解一些 JavaScript 的基础知识将会很有帮助。代码示例也使用 JavaScript 的最新规范 ECMAScript 2015 进行编写,因此其中会包含诸如常量、箭头函数和解构等新的语言特性。如果你对 ES2015不熟悉,不要担心——有大量高质量的文章和资源能够帮助你 ,同时示例代码也拥有很好的可读性。
如果你有使用 React 的经验,这本书仍然适合你,但花一些时间查看附录 B 是值得的,其中解释了 Vue.js 中涉及的一些概念,并与你在 React 中已经了解的内容做了比较。
各章简介
本书包含 7 章和两个附录。
第 1 章 Vue.js 基础
本章介绍 Vue.js 的基础知识和核心技术。阐述如何安装并将 Vue.js 引入网页,以及如何使用它在页面上展示数据。
第 2 章 Vue.js 组件
Vue.js 允许并鼓励你将代码拆分为多个可在代码库中复用的组件。这一章将详细阐述如何创建一个易于维护和理解的代码库。
第 3 章 使用 Vue 添加样式
本书中的每一部分都会涉及 HTML 和 JavaScript,但在这一章中,将介绍更多在创建网站中关于视图层的内容。将阐述如何在 Vue 中使用 CSS 来定制化网站和应用,以及使用内置的辅助函数来协助你完成这项工作。
第 4 章 render 函数和 JSX
如果你看过了很多 Vue 代码或已经阅读完入门指南,就会熟知模板语法,但除了这个,Vue 还支持自定义渲染函数,它允许你使用 JSX 语法——一种 React 用户熟悉的语法。在本章中还将阐述如何在 Vue 中使用 JSX 语法。
第 5 章 使用 vue-router 实现客户端路由
Vue 本身只是一个视图层。要创建一个具有多个页面且无须新的额外请求即可访问的应用程序(或者用专业的说法 :单页应用),需要将 vue-router 添加到网站中,可以使用它来处理客户端路由——比如说请求指定的路径时,代码如何执行和展示数据。这一章将阐述如何做到这一点。
第 6 章 使用 vuex 实现状态管理
在一个具有多级组件层级、更加复杂的应用中,在组件中传递数据会变得有些棘手。Vuex 使你能够在一个集中的空间里处理应用的状态,本章将阐述如何使用它来轻松处理复杂应用的状态。
第 7 章 对 Vue 组件进行测试
到此,已经学习到了能够使网站正常运作所需要了解的一切,但是如果需要在未来继续维护网站,你应该为它编写测试。这一章将介绍如何使用 vue-test-utils 来为组件编写单元测试以确保它们在未来的运行中不会出现问题。
附录 A 搭建 Vue 开发环境
vue-cli 使你能够从给定的模板中,快速构建 Vue 应用,本附录向你展示它是如何工作的以及它提供的一些模板。
附录 B Vue 与 React
如果你拥有使用 React 的经验,那么可能已经很熟悉 Vue 中的诸多概念。本附录重点介绍 Vue 和 React 之间的异同点。
v-bind:value 应为 v-model
watcher:{count(){}}
应为
watch:{count(){}}