VueJS2 高级教程（一）
原文：Pro Vue.js 2
一、您的第一个 Vue.js 应用
开始使用 Vue.js 的最佳方式是深入研究。在这一章中，我将带你通过一个简单的开发过程来创建一个跟踪待办事项的应用。在第五章第五章–第八章中，我将向你展示如何创建一个更加复杂和真实的应用，但是现在，一个简单的例子将足以展示 Vue.js 应用是如何创建的，以及基本特性是如何工作的。如果您不理解本章的所有内容，也不要担心——这是为了对 Vue.js 的工作方式有一个总体的了解，我会在后面的章节中详细解释所有内容。
注意
如果您想要对 Vue.js 特性的常规描述，那么您可以跳到本书的第二部分，在那里我将开始深入描述各个特性的过程。
准备开发环境
Vue.js 开发需要做一些准备。在接下来的部分中，我将解释如何设置和准备创建您的第一个项目。
安装 Node.js
用于 Vue.js 开发的工具依赖于 Node . js——也称为 Node——它创建于 2009 年，是用 JavaScript 编写的服务器端应用的简单高效的运行时。Node.js 基于 Chrome 浏览器中使用的 JavaScript 引擎，并提供了一个在浏览器环境之外执行 JavaScript 代码的 API。
Node.js 作为应用服务器已经取得了成功，但对于本书来说，它很有趣，因为它为新一代跨平台开发和构建工具提供了基础。Node.js 团队的一些聪明的设计决策和 Chrome JavaScript 运行时提供的跨平台支持创造了一个机会，被热情的工具作者抓住了。简而言之，Node.js 已经成为 web 应用开发的基础。
重要的是，您下载的 Node.js 版本与我在本书中使用的版本相同。尽管 Node.js 相对稳定，但仍不时会有突破性的 API 变化，这可能会使我在本章中包含的示例无法工作。
我使用的版本是 8.11.2，这是我撰写本文时的当前长期支持版本。在您阅读本文时，可能会有更高的版本，但是对于本书中的示例，您应该坚持使用 8.11.2 版本。在 https://nodejs.org/dist/v8.11.2 可以获得完整的 8.11.2 版本，包括 Windows 和 macOS 的安装程序以及其他平台的二进制包。
安装 Node.js 时，请确保选择了将 Node.js 可执行文件添加到路径的选项。安装完成后，运行清单 1-1 中所示的命令。
node -v
Listing 1-1Checking the Node Version
如果安装正常进行，您将会看到下面显示的版本号:
v8.11.2
Node.js 安装程序包括节点包管理器(NPM)，用于管理项目中的包。运行清单 1-2 中所示的命令，确保 NPM 正在工作。
npm -v
Listing 1-2Checking That NPM Works
如果一切正常，您将看到以下版本号:
5.6.0
安装@vue/cli 包
@vue/cli包是开发期间创建和管理 Vue.js 项目的标准方式。您不必使用这个包，但是它提供了开始使用 Vue.js 所需的一切，我在本书中通篇都在使用它。
注意
当我写这篇文章的时候，@vue/cli包已经发布了测试版。在最终发布之前可能会有一些小的变化，但是核心特性应该保持不变。有关任何突破性变化的详细信息，请查看本书的勘误表，可在 https://github.com/Apress/pro-vue-js-2 获得。
要安装@vue/cli，打开一个新的命令提示符并运行清单 1-3 中所示的命令。如果使用的是 Linux 或者 macOS，可能需要使用sudo。
npm install --global @vue/cli
Listing 1-3Installing the Vue Tools Package
安装 Git
需要 Git 修订版控制工具来管理 Vue.js 开发所需的一些包。如果您使用的是 Windows 或 macOS，那么从 https://git-scm.com/downloads 下载并运行安装程序。(在 macOS 上，您可能需要更改安全设置才能打开安装程序，开发人员尚未对该安装程序进行签名。)
Git 已经包含在大多数 Linux 发行版中。如果您想安装最新版本，请查阅 https://git-scm.com/download/linux 上的安装说明。举个例子，对于我使用的 Linux 发行版 Ubuntu，我使用了清单 1-4 中所示的命令。
sudo apt-get install git
Listing 1-4Installing Git
一旦完成安装，打开一个新的命令提示符并运行清单 1-5 中所示的命令，检查 Git 是否已安装并可用。
git --version
Listing 1-5Checking Git
这个命令打印出已经安装的 Git 包的版本。在撰写本文时，针对 Windows 和 Linux 的 Git 最新版本是 2.17，针对 macOS 的 Git 最新版本是 2.16.3。
安装编辑器
Vue.js 开发可以用任何程序员的编辑器来完成，从中有数不尽的选择。一些编辑器增强了对使用 Vue.js 的支持，包括突出显示关键字和表达式。如果您还没有 web 应用开发的首选编辑器，那么表 1-1 描述了一些流行的选项供您考虑。对于这本书，我不依赖任何特定的编辑器，你应该使用任何你觉得舒服的编辑器。
表 1-1
支持 Vue.js 的流行编辑器
|名字
|
描述
|
| --- | --- |
| 崇高的文本 | Sublime Text 是一个商业跨平台编辑器，它有支持大多数编程语言、框架和平台的包。详见www.sublimetext.com。 |
| 原子 | Atom 是一个免费的、开源的、跨平台的编辑器，特别强调定制和可扩展性。详见atom.io。 |
| 括号 | 括号是 Adobe 开发的免费开源编辑器。详见brackets.io。 |
| Visual Studio 代码 | Visual Studio Code 是微软的一款免费、开源、跨平台的编辑器，强调可扩展性。详见code.visualstudio.com。 |
| 可视化工作室 | Visual Studio 是微软的旗舰开发工具。有免费版和商业版可用，它附带了大量集成到 Microsoft 生态系统中的附加工具。 |
安装浏览器
最后要选择的是在开发过程中用来检查工作的浏览器。所有当代浏览器都有良好的开发人员支持，并且与 Vue.js 配合良好，但 Chrome 和 Firefox 有一个名为vue-devtools的有用扩展，它提供了对 Vue.js 应用状态的洞察，在复杂项目中特别有用。安装扩展的细节见 https://github.com/vuejs/vue-devtools ，我在后面章节会用到。在这本书里，我一直使用谷歌浏览器，这是我推荐你使用的浏览器。
创建项目
从命令行创建和管理项目。打开一个新的命令提示符，导航到一个方便的位置，运行清单 1-6 中所示的命令，为本章创建项目。
vue create todo --default
Listing 1-6Creating the Project
在清单 1-3 中，vue命令作为@vue/cli包的一部分被安装，清单 1-6 中的命令创建一个名为todo的新项目，该项目将被创建在一个同名的文件夹中。将创建项目，并下载和安装 Vue.js 开发所需的所有包，这可能需要一段时间，因为即使是简单的项目也需要大量的包。
了解项目结构
使用您喜欢的编辑器打开todo文件夹，您将看到如图 1-1 所示的项目结构。该图显示了我首选的编辑器(Visual Studio)中的布局，如果您选择了不同的编辑器，您可能会看到项目内容的呈现略有不同。
图 1-1
项目结构
项目的布局可能会令人望而生畏，但在本书结束时，你会知道不同的文件和文件夹是做什么用的，以及它们是如何使用的。在表 1-2 中，我简要描述了本章中重要的文件。我在第十章中详细描述了 Vue.js 项目的结构。
表 1-2
项目中的重要文件
|名字
|
描述
|
| --- | --- |
| public/index.html | 这是浏览器加载的 HTML 文件。它有一个显示应用的元素和一个加载应用文件的script元素。 |
| src/main.js | 这是负责配置 Vue.js 应用的 JavaScript 文件。它还用于注册应用所依赖的任何第三方包，这将在后面的章节中演示。 |
| src/App.vue | 这是 Vue.js 组件，它包含将向用户显示的 HTML 内容、HTML 所需的 JavaScript 代码和样式化元素的 CSS。组件是 Vue.js 应用的主要组成部分，你会在本书中看到它们的使用。 |
| src/assets/logo.png | assets文件夹用于存储静态内容，如图像。在一个新项目中，它包含一个名为logo.png的文件，该文件是 Vue.js 徽标的图像。 |
启动开发工具
当您使用vue命令创建一个项目时，会安装一套完整的开发工具，以便项目可以被编译、打包并交付给浏览器。使用命令提示符，运行清单 1-7 中所示的命令，导航到todo文件夹并启动开发工具。
cd todo
npm run serve
Listing 1-7Starting the Development Tools
开发工具启动时有一个初始准备过程，可能需要一段时间才能完成。不要因为准备所花费的时间而推迟，因为这个过程只有在您开始开发会话时才需要。
启动过程完成后，您将看到如下消息，确认应用正在运行，并告诉您要连接到哪个 HTTP 端口:
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.0.77:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
默认端口是 8080，但是如果 8080 不可用，将选择不同的端口。打开一个新的浏览器窗口并导航到http://localhost:8080(或者如果选择了不同的端口，则导航到指定的 URL)，您将看到如图 1-2 所示的占位符内容。(占位符内容会随着开发工具新版本的发布而变化，所以如果您没有看到完全相同的内容，也不用担心。)
图 1-2
运行示例应用
替换占位符内容
Vue.js 应用中的关键构建块被称为组件，它在扩展名为vue的文件中定义。下面是App组件的内容，您可以在src文件夹的App.vue文件中找到:
<template>
<div id="app">
<img src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App" />
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'app',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
该组件由一个包含呈现给用户的 HTML 内容的template元素、一个包含支持模板所需的 JavaScript 代码的script元素和一个包含 CSS 样式的style元素组成。Vue.js 结合了template、script和style元素来创建如图 1-2 所示的占位符内容。
在清单 1-8 中，我替换了template元素中的内容，重置了script元素，并移除了style元素，所有这些将为示例应用提供一个干净的基础。
<template>
<div id="app">
<h4>
To Do List
</h4>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
Listing 1-8Removing the Placeholder Content in the App.vue File in the src Folder
当您保存更改时，应用将自动重新编译，浏览器将重新加载，产生如图 1-3 所示的结果。
图 1-3
移除占位符内容
添加 CSS 框架
新内容不会吸引很多用户。虽然一个组件可以包含 CSS 样式，但我更喜欢使用 CSS 框架，它将允许我在应用中一致地设计 HTML 内容的样式。在本书中，我使用了引导 CSS 框架。使用Control+C停止开发工具，运行todo文件夹中清单 1-9 所示的命令，将引导程序添加到项目中。
npm install bootstrap@4.0.0
Listing 1-9Adding Bootstrap to the Project
您可能会看到关于未满足对等依赖关系的警告，这些警告可以忽略。为了将引导 CSS 文件添加到项目中，我将清单 1-10 中所示的语句添加到了src文件夹中的main.js文件中。
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
import "bootstrap/dist/css/bootstrap.min.css";
new Vue({
render: h => h(App)
}).$mount('#app')
Listing 1-10Adding Bootstrap in the main.js File in the src Folder
import语句确保来自引导框架的 CSS 样式表将包含在应用中。(我在第四章中解释了import语句是如何工作的。)如果你不熟悉 Bootstrap，不要担心，因为我在第三章中描述了我在本书中使用的特性。
为 Vue.js 项目选择 CSS 框架
许多最流行的 CSS 框架——包括 Bootstrap——除了常规的 CSS 样式之外，还有对交互式组件的 JavaScript 支持。这些 JavaScript 特性通常依赖 jQuery 这样的包来访问 HTML 文档中的元素，这与 Vue.js 的工作方式相冲突。因此，要么只使用框架提供的 CSS 样式，要么选择专门为 Vue.js 编写的框架，这一点很重要。
第一种方法——仅使用 CSS 样式——是我在本书中一直使用的方法。这不仅允许我使用熟悉的框架，而且有助于将 Vue.js 提供的功能与内容样式分开。这对于特定于 Vue.js 的框架来说是不可能的，它们通过使用我在本书中描述的特性来工作，这将使解释许多例子变得复杂。
如果你想尝试一个特定于 Vue.js 的框架，那么 Veutify 是一个很好的起点。( https://vuetifyjs.com/ )。还有一个改编 Bootstrap 用于 Vue.js 项目的项目，叫做 Bootstrap-Vue ( https://bootstrap-vue.js.org )。
HTML 元素的样式
既然 Bootstrap 是应用的一部分，我可以对组件的template元素中的内容进行样式化以改善外观，如清单 1-11 所示。
<template>
<div id="app">
<h4 class="bg-primary text-white text-center p-2">
To Do List
</h4>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
Listing 1-11Styling Content in the App.vue File in the src Folder
运行todo文件夹中清单 1-12 中所示的命令来重启应用。
npm run serve
Listing 1-12Restarting the Application
使用浏览器窗口导航至http://localhost:8080，您将看到如图 1-4 所示的内容。如果您看到文本，但它没有样式，然后手动重新加载浏览器窗口。
图 1-4
HTML 内容的样式
添加动态内容
下一步是向应用添加一些数据，并使用它向用户显示动态内容。在清单 1-13 中，我修改了App组件，这样它将显示一个数据值。
<template>
<div id="app">
<h4 class="bg-primary text-white text-center p-2">
{{name}}'s To Do List
</h4>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
name: "Adam"
}
}
}
</script>
Listing 1-13Displaying Data in the App.vue File in the src Folder
添加到template元素的是一个数据绑定，它告诉 Vue.js 在显示 HTML 内容时插入一个数据值。这种类型的数据绑定被称为文本插值绑定，因为它将数据值显示为 HTML 元素的文本内容。它也被称为小胡子捆绑，因为表示捆绑的双花括号({{和}}字符)看起来像车把小胡子。
数据绑定告诉 Vue.js 在显示 HTML 时将name值插入到h4元素中。绑定使用的name值由我对清单 1-13 中的script元素所做的更改提供。data属性为模板提供了data值，当数据绑定被处理时，Vue.js 检查data属性来寻找name值。
小费
不要担心清单 1-13 中数据函数的奇怪语法。当使用 Vue.js 时，这很快成为一种熟悉的模式，我在第十一章解释了它是如何工作的。
当您保存App.vue文件时，Vue.js 开发工具将检测到更改，更新应用，并使浏览器窗口自动重新加载，这将显示如图 1-5 所示的内容。
图 1-5
显示数据值
请注意，当您对项目中的文件进行更改时，不必手动重新加载浏览器窗口。Vue.js 开发工具监控项目的变更，并在检测到变更时自动触发浏览器重新加载。我在第十章更详细地描述了开发工具。
显示任务列表
除了我在前一章中使用的文本插值绑定之外，Vue.js 还支持一系列数据绑定，这些数据绑定可以用来以不同的方式产生动态内容。示例应用的下一步是为用户定义表示待办任务的对象集合并显示它们，如清单 1-14 所示。
<template>
<div id="app">
<h4 class="bg-primary text-white text-center p-2">
{{name}}'s To Do List
</h4>
<div class="container-fluid p-4">
<div class="row">
<div class="col font-weight-bold">Task</div>
<div class="col-2 font-weight-bold">Done</div>
</div>
<div class="row" v-for="t in tasks" v-bind:key="t.action">
<div class="col">{{t.action}}</div>
<div class="col-2">{{t.done}}</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
name: "Adam",
tasks: [{ action: "Buy Flowers", done: false },
{ action: "Get Shoes", done: false },
{ action: "Collect Tickets", done: true },
{ action: "Call Joe", done: false }]
}
}
}
</script>
Listing 1-14Displaying Tasks in the App.vue File in the src Folder
为了显示任务列表，我使用了 Vue.js 特性，该特性为数组中的每个对象重复一组元素。以下是应用了该功能的元素，在创建布局所需的其他元素中很难发现该元素:
...
<div class="row" v-for="t in tasks" v-bind:key="t.action">
<div class="col">{{t.action}}</div>
<div class="col-2">{{t.done}}</div>
</div>
...
这是一个指令的例子，这些指令是特殊的属性，它们的名字以v-开头，应用于 HTML 元素以应用 Vue.js 功能。这是v-for指令，它为数组中的每个对象复制它所应用到的元素——以及任何包含的元素，将每个对象分配给一个变量，以便可以在数据绑定中访问它。
分配给v-for指令的值指定了对象的来源和变量的名称，每个对象在被处理时将被分配给该变量。示例中的表达式是t in tasks，它将一个名为tasks的属性标识为对象的源，将t标识为变量的名称，当枚举对象时，每个对象将被依次分配给该变量。
在v-for指令包含的元素中，可以在数据绑定中使用t变量来访问当前正在枚举的对象，如下所示:
...
<div class="row" v-for="t in tasks" v-bind:key="t.action">
<div class="col">{{t.action}}</div>
<div class="col-2">{{t.done}}</div>
</div>
...
有两个文本插值绑定，它们将把div元素的内容设置为被处理对象的action和done属性。v-bind元素是指令的另一个例子，它在这个例子中的作用是帮助v-for指令跟踪与每个对象相关的元素。
为了给模板提供对象的源，我给数据函数返回的对象添加了一个tasks属性，如下所示:
...
data() {
return {
name: "Adam",
tasks: [{ action: "Buy Flowers", done: false },
{ action: "Get Shoes", done: false },
{ action: "Collect Tickets", done: true },
{ action: "Call Joe", done: false }]
}
...
结果是 Vue.js 将枚举包含在tasks a rray 中的对象，并为每个对象添加一组div元素，数据绑定显示action和done属性的值。
当您保存对App.vue文件的更改时，开发工具将更新应用并重新加载浏览器，以在图 1-6 中显示结果。附加的div元素和它们被分配到的类为内容创建了一个网格布局，并且不是 Vue.js 特性的一部分。
图 1-6
显示任务列表
添加复选框
示例应用已经初具规模，但是使用true / false值来指示任务是否已经完成并不是用户所期望的。Vue.js 包含一些指令，可以用来配置使用数据值的表单元素，在清单 1-15 中，我添加了一个input元素，显示每个tasks对象的done属性的值。
<template>
<div id="app">
<h4 class="bg-primary text-white text-center p-2">
{{name}}'s To Do List
</h4>
<div class="container-fluid p-4">
<div class="row">
<div class="col font-weight-bold">Task</div>
<div class="col-2 font-weight-bold">Done</div>
</div>
<div class="row" v-for="t in tasks" v-bind:key="t.action">
<div class="col">{{t.action}}</div>
<div class="col-2">
<input type="checkbox" v-model="t.done" class="form-check-input" />
{{t.done}}
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
name: "Adam",
tasks: [{ action: "Buy Flowers", done: false },
{ action: "Get Shoes", done: false },
{ action: "Collect Tickets", done: true },
{ action: "Call Joe", done: false }]
}
}
}
</script>
Listing 1-15Adding a Form Element in the App.vue File in the src Folder
v-model指令配置一个input元素，使其显示由表达式指定的值。例如，Vue.js 根据已经应用了v-model指令的input元素的类型来调整其行为，以便在text输入元素中显示值。当输入元素的类型是checkbox时，v-model指令根据它被配置为显示的值来切换复选框。当您将更改保存到App.vue文件时，您将看到复选框如何匹配文本值，如图 1-7 所示。
图 1-7
使用指令显示复选框
这种类型的指令会创建一个双向数据绑定，这意味着当您更改 input 元素时，Vue.js 会更新相应的数据值。通过选中和取消选中其中一个复选框，您可以看到这是如何工作的。每做一次改变，相邻文本数据绑定显示的文本也会改变，如图 1-8 所示。
图 1-8
双向数据绑定的效果
这展示了 Vue.js 应用最重要的一个方面，即应用的数据是“动态的”，当数据发生变化时，所有使用该数据的数据绑定都会更新以反映这种变化。在这种情况下，我添加到input元素的双向数据绑定更新了Collect Tickets待办事项对象的done属性。这种变化反映在显示done属性的文本数据绑定中，说明了数据绑定如何与它们所关联的数据保持关系。
过滤已完成的任务
动态数据模型意味着您可以轻松地添加元素，允许用户管理应用数据的表示。在示例应用中，用户最关心的是未完成的任务，在清单 1-16 中，我添加了一个特性，允许用户过滤掉已经完成的任务。
<template>
<div id="app">
<h4 class="bg-primary text-white text-center p-2">
{{name}}'s To Do List
</h4>
<div class="container-fluid p-4">
<div class="row">
<div class="col font-weight-bold">Task</div>
<div class="col-2 font-weight-bold">Done</div>
</div>
<div class="row" v-for="t in filteredTasks" v-bind:key="t.action">
<div class="col">{{t.action}}</div>
<div class="col-2 text-center">
<input type="checkbox" v-model="t.done" class="form-check-input" />
</div>
</div>
<div class="row bg-secondary py-2 mt-2 text-white">
<div class="col text-center">
<input type="checkbox" v-model="hideCompleted" class="form-check-input" />
<label class="form-check-label font-weight-bold">
Hide completed tasks
</label>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
name: "Adam",
tasks: [{ action: "Buy Flowers", done: false },
{ action: "Get Shoes", done: false },
{ action: "Collect Tickets", done: true },
{ action: "Call Joe", done: false }],
hideCompleted: true
}
},
computed: {
filteredTasks() {
return this.hideCompleted ?
this.tasks.filter(t => !t.done) : this.tasks
}
}
}
</script>
Listing 1-16Filtering Tasks in the App.vue File in the src Folder
在script元素中，我使用一个名为filteredTasks的函数添加了一个computed属性。computed属性用于定义对应用数据进行操作的属性，这允许 Vue.js 有效地检测应用数据的变化，这在复杂的应用中很重要。filteredTask属性使用data部分中新定义的hideCompleted属性的值来确定用户是想要查看所有的任务还是只查看那些未完成的任务。
为了管理hideCompleted属性的值，我给template元素添加了一个复选框，并使用了v-model指令，如下所示:
...
<input type="checkbox" v-model="hideCompleted" class="form-check-input" />
...
为了确保用户看到他们选择的数据，我修改了v-for指令的表达式，使其使用filteredTasks属性，如下所示:
...
<div class="row" v-for="t in filteredTasks" v-bind:key="t.action">
...
当用户切换复选框时，v-model绑定会更新hideCompleted属性，这会改变由filteredTasks属性产生的结果，并向用户呈现他们需要的任务集。保存更改，浏览器将重新加载，产生如图 1-9 所示的结果。
图 1-9
过滤任务
创建新任务
一个不允许用户创建新任务的待办应用没有多大用处。在清单 1-17 中，我向template元素添加了新内容，允许用户输入新待办事项的细节。
<template>
<div id="app">
<h4 class="bg-primary text-white text-center p-2">
{{name}}'s To Do List
</h4>
<div class="container-fluid p-4">
<div class="row">
<div class="col font-weight-bold">Task</div>
<div class="col-2 font-weight-bold">Done</div>
</div>
<div class="row" v-for="t in filteredTasks" v-bind:key="t.action">
<div class="col">{{t.action}}</div>
<div class="col-2 text-center">
<input type="checkbox" v-model="t.done" class="form-check-input" />
</div>
</div>
<div class="row py-2">
<div class="col">
<input v-model="newItemText" class="form-control" />
</div>
<div class="col-2">
<button class="btn btn-primary" v-on:click="addNewTodo">Add</button>
</div>
</div>
<div class="row bg-secondary py-2 mt-2 text-white">
<div class="col text-center">
<input type="checkbox" v-model="hideCompleted" class="form-check-input" />
<label class="form-check-label font-weight-bold">
Hide completed tasks
</label>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
name: "Adam",
tasks: [{ action: "Buy Flowers", done: false },
{ action: "Get Shoes", done: false },
{ action: "Collect Tickets", done: true },
{ action: "Call Joe", done: false }],
hideCompleted: true,
newItemText: ""
}
},
computed: {
filteredTasks() {
return this.hideCompleted ?
this.tasks.filter(t => !t.done) : this.tasks
}
},
methods: {
addNewTodo() {
this.tasks.push({
action: this.newItemText,
done: false
});
this.newItemText = "";
}
}
}
</script>
Listing 1-17Creating New Tasks in the App.vue File in the src Folder
input元素使用v-model指令创建与名为newItemText的变量的绑定，当用户编辑 contents 元素时，Vue.js 将更新该变量的值。为了触发新数据项的创建，我对button元素应用了v-on指令，如下所示:
...
<button class="btn btn-primary" v-on:click="addNewTodo">
...
v-on指令用于响应事件，这些事件通常在用户执行动作时触发。在本例中，我使用了v-on指令来告诉 Vue.js 在button元素上触发click事件时调用一个名为addNewTodo的方法，这将在用户单击按钮时发生。
为了支持template元素中的更改，我对script元素中的 JavaScript 代码做了相应的更改。我添加了一个methods属性，Vue.js 在这里寻找被指令表达式调用的方法。在methods中，我定义了一个名为addNewTodo的方法，使用newItemText属性的值作为action值向tasks数组添加一个新对象。一旦新对象被添加到数组中，我就重置newItemText值。当input元素的内容改变时，更新newItemText值的v-model绑定也在另一个方向工作，这意味着将newItemText设置为空字符串将清除input元素的内容。
保存更改，当浏览器重新加载时，您将看到如图 1-10 所示的内容。在input元素中输入一个任务描述，然后点击 Add 按钮，您会看到一个新的待办事项出现在列表中。
图 1-10
创建新任务
持久存储数据
示例应用中没有持久数据存储，这意味着重新加载浏览器会重置待办事项列表，用户所做的任何更改都会丢失。我将使用现代浏览器中可用的本地存储功能，这样我就可以存储数据，而不必设置服务器，并且还可以演示您可以在 Vue.js 应用中直接使用浏览器提供的功能。我将在后面的章节中向您展示如何使用服务器，但是我将在这个项目中保持简单。在清单 1-18 中，我在组件的script元素中添加了语句来存储和检索待办事项列表数据。(我没有在清单中显示template元素，因为它没有改变。我在第二章中解释了这个惯例。)
...
<script>
export default {
name: 'app',
data() {
return {
name: "Adam",
tasks: [],
hideCompleted: true,
newItemText: ""
}
},
computed: {
filteredTasks() {
return this.hideCompleted ?
this.tasks.filter(t => !t.done) : this.tasks
}
},
methods: {
addNewTodo() {
this.tasks.push({
action: this.newItemText,
done: false
});
localStorage.setItem("todos", JSON.stringify(this.tasks));
this.newItemText = "";
}
},
created() {
let data = localStorage.getItem("todos");
if (data != null) {
this.tasks = JSON.parse(data);
}
}
}
</script>
...
Listing 1-18Using Local Storage in the App.vue File in the src Folder
本地存储特性是通过名为localStorage的全局对象提供的，该对象定义了getItem和setItem方法，并且由浏览器提供。
小费
localStorage对象并不特定于 Vue.js 开发。它是一个标准的 JavaScript 对象，适用于所有的 web 应用，不管它们是如何编写的。参见 https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage 了解本地存储如何工作的详细描述。
添加到组件中的storeData方法使用setItem方法来存储待办事项，并在用户创建新的待办事项或切换现有复选框时被调用。本地存储特性只能存储字符串值，这意味着我必须先将数据对象序列化为 JSON，然后才能存储它们。
我在清单 1-18 中添加到组件中的created方法在 Vue.js 创建组件时被调用，它为我提供了一个在应用的内容呈现给用户之前从本地存储加载数据的机会。清单 1-18 中的最后一个变化是删除了占位符待办事项，因为用户的数据已经永久存储，所以不再需要这些事项。
当您保存更改时，浏览器将重新加载，应用将永久存储您创建的任何待办事项，这意味着当您重新加载浏览器窗口或导航到不同的 URL(如 Apress 网站)时，它们仍然可用，然后返回到http://localhost:8080，如图 1-11 所示。
图 1-11
存储数据
添加最后的润色
我将添加两个特性来完成示例应用。第一个特性是能够删除已完成的待办任务，这一点很重要，因为它们会被永久保存。第二个特性是当没有待办事项时显示一条消息。我将这两个特性都添加到了App组件中，如清单 1-19 所示。
<template>
<div id="app">
<h4 class="bg-primary text-white text-center p-2">
{{name}}'s To Do List
</h4>
<div class="container-fluid p-4">
<div class="row" v-if="filteredTasks.length == 0">
<div class="col text-center">
<b>Nothing to do. Hurrah!</b>
</div>
</div>
<template v-else>
<div class="row">
<div class="col font-weight-bold">Task</div>
<div class="col-2 font-weight-bold">Done</div>
</div>
<div class="row" v-for="t in filteredTasks" v-bind:key="t.action">
<div class="col">{{t.action}}</div>
<div class="col-2 text-center">
<input type="checkbox" v-model="t.done"
class="form-check-input" />
</div>
</div>
</template>
<div class="row py-2">
<div class="col">
<input v-model="newItemText" class="form-control" />
</div>
<div class="col-2">
<button class="btn btn-primary"
v-on:click="addNewTodo">Add</button>
</div>
</div>
<div class="row bg-secondary py-2 mt-2 text-white">
<div class="col text-center">
<input type="checkbox" v-model="hideCompleted"
class="form-check-input" />
<label class="form-check-label font-weight-bold">
Hide completed tasks
</label>
</div>
<div class="col text-center">
<button class="btn btn-sm btn-warning"
v-on:click="deleteCompleted">
Delete Completed
</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
name: "Adam",
tasks: [],
hideCompleted: true,
newItemText: ""
}
},
computed: {
filteredTasks() {
return this.hideCompleted ?
this.tasks.filter(t => !t.done) : this.tasks
}
},
methods: {
addNewTodo() {
this.tasks.push({
action: this.newItemText,
done: false
});
this.storeData();
this.newItemText = "";
},
storeData() {
localStorage.setItem("todos", JSON.stringify(this.tasks));
},
deleteCompleted() {
this.tasks = this.tasks.filter(t => !t.done);
this.storeData();
}
},
created() {
let data = localStorage.getItem("todos");
if (data != null) {
this.tasks = JSON.parse(data);
}
}
}
</script>
Listing 1-19Adding Finishing Touches in the App.vue File in the src Folder
v-if和v-else指令用于有条件地显示元素，我用它们在tasks数组中没有项目时显示一条消息，或者显示任务列表。我还添加了一个button元素，并使用v-on指令来处理click事件，过滤掉已完成的待办事项，然后存储剩余的对象。当您将更改保存到App.vue文件时，应用将重新加载。如果选中隐藏已完成任务复选框并点击删除已完成按钮，您将看到如图 1-12 所示的结果。
图 1-12
添加最后的润色
摘要
在本章中，我创建了一个简单的示例应用，向您介绍 Vue.js 项目和 Vue.js 开发过程。虽然这个例子很简单，但它让我演示了一些重要的 Vue.js 概念。
您已经看到 Vue.js 附带了开发所需的所有工具，当您创建一个项目时，准备和打包应用并将其交付给浏览器进行测试所需的一切都包括在内。
您了解了 Vue.js 应用是围绕组件构建的，这些组件结合了 HTML 和 JavaScript 代码。JavaScript 代码被分成几个部分，比如数据和方法，通过指令和数据绑定进行计算和访问。在所有这些特性的基础上，是反应式数据模型的思想，它允许应用自动反映变化。
Vue.js 还有更多的可用特性，你可以从这本书的篇幅中看出，但是我在本章中创建的基本应用已经向你展示了 Vue.js 开发的最基本的特征，并将为后面的章节提供基础。在下一章，我将 Vue.js 放在上下文中，描述这本书的结构和内容。
二、了解 Vue.js
Vue.js 是一个用于开发客户端应用的灵活而强大的开源框架，它采用了服务器端开发领域的设计原则，并将这些原则应用于 HTML 元素，从而为构建丰富的 web 应用提供了一个基础。在本书中，我解释了 Vue.js 是如何工作的，并演示了它提供的不同特性。
这本书和 Vue.js 发布时间表
Vue.js 开发团队尽最大努力确保 Vue.js API 的变化尽可能小，这是一个令人耳目一新的变化，不同于其他客户端框架不断出现的重大更新。Vue.js 有频繁的更新，但是你应该发现它们通常不会阻止现有的应用工作，这对你的项目和本书中的例子来说是个好消息。
即便如此，Vue.js 版本仍有可能阻止某些示例按预期运行。每当这种情况发生时，要求读者购买这本书的新版本似乎是不公平或不合理的，特别是因为 Vue.js 的大多数功能即使在主要版本中也不太可能改变。取而代之的是，我将在本书 https://github.com/Apress/pro-vue-js-2 的 GitHub 资源库中发布主要版本的更新。
这是我(和 press)正在进行的实验，这些更新可能采取的形式还不确定——尤其是因为我不知道 Vue.js 的主要版本将包含什么——但目标是通过更新书中包含的示例来延长这本书的寿命。
我不承诺更新会是什么样的，它们会采取什么形式，或者在我把它们折叠成这本书的新版本之前，我会花多长时间来制作它们。当新的 Vue.js 版本发布时，请保持开放的态度并检查这本书的存储库。如果您对如何改进更新有任何想法，请发电子邮件至adam@adam-freeman.com告诉我。
该不该用 Vue.js？
Vue.js 不是所有问题的解决方案，知道什么时候应该使用 Vue.js，什么时候应该寻求替代方案是很重要的。Vue.js 提供了过去只有本地应用开发人员才能使用的功能，并使其完全在浏览器中可用。这对浏览器提出了很多要求，浏览器必须运行 Vue.js 应用，处理 HTML 元素，执行 JavaScript 代码，处理事件，并执行启动 Vue.js 应用所需的所有其他任务，就像您在第二章中看到的那样。
这种工作需要时间来执行，时间的长短取决于 Vue.js 应用的复杂程度、浏览器的质量以及设备的处理能力。在功能强大的台式机上使用最新的浏览器时，你不会注意到任何延迟，但功能不足的智能手机上的旧浏览器确实会减慢 Vue.js 应用的初始设置。
因此，目标是尽可能少地执行这种设置，并在执行时向用户交付尽可能多的应用。这意味着仔细考虑您构建的 web 应用的类型。从广义上讲，web 应用有两种:往返和单页。
了解往返应用
很长一段时间以来，web 应用的开发都遵循一个往返模型。浏览器向服务器请求一个初始的 HTML 文档。用户交互——比如单击一个链接或提交一个表单——使浏览器请求并接收一个全新的 HTML 文档。在这种应用中，浏览器本质上是 HTML 内容的呈现引擎，所有的应用逻辑和数据都驻留在服务器上。浏览器发出一系列无状态的 HTTP 请求，服务器通过动态生成 HTML 文档来处理这些请求。
许多当前的 web 开发仍然是针对往返应用的，尤其是业务线项目，尤其是因为它们对浏览器的要求很少，并且拥有尽可能广泛的客户端支持。但是往返应用也有一些严重的缺点:它们让用户在请求和加载下一个 HTML 文档时等待，它们需要一个大型的服务器端基础设施来处理所有请求和管理所有应用状态，并且它们需要更多的带宽，因为每个 HTML 文档都必须是自包含的，这可能导致服务器的每个响应中都包含相同的内容。Vue.js 不太适合往返应用，因为浏览器必须为从服务器接收的每个新 HTML 文档执行初始设置过程。
理解单页应用
单页应用采取了不同的方法。一个初始的 HTML 文档被发送到浏览器，但是用户交互会导致 Ajax 请求将小的 HTML 片段或数据插入到向用户显示的现有元素集中。初始的 HTML 文档永远不会被重新加载或替换，当 Ajax 请求被异步执行时，用户可以继续与现有的 HTML 交互，即使这只是意味着看到一个“数据加载”消息。
单页面应用非常适合 Vue.js 和其他客户端框架，包括 Angular 和 React，因为浏览器初始化应用的工作只需执行一次，之后应用在浏览器中运行，响应用户交互并请求后台所需的数据或内容。
将 Vue.js 与反应和角度进行比较
Vue.js 有两个主要的竞争对手:React 和 Vue.js。它们之间存在差异，但是，在大多数情况下，所有这些框架都很优秀，它们都以相似的方式工作，并且它们都可以用于创建丰富和流畅的客户端应用。
一个关键的区别是 Vue.js 只专注于向用户呈现 HTML 内容，并不直接包括其他功能，如异步 HTTP 请求或 URL 路由。但是这种差异很大程度上是学术性的，因为这些特性是通过由 Vue.js 开发团队认可甚至开发的包提供的，并且大多数 Vue.js 项目使用相同的一组包。
这些框架之间的真正区别在于开发人员的体验。例如，Angular 需要使用 TypeScript 才能有效，而它只是 Vue.js 项目的一个选项。Vue.js 和 React 倾向于混合 HTML 和 JavaScript，这不是每个人都喜欢的。
我的建议很简单:选择你最喜欢的框架，如果你不喜欢，就换一个。这可能看起来是一种不科学的方法，但是这是一个不错的选择，并且您会发现许多核心概念会在框架之间延续，即使您改变了您使用的框架。
如果你想要仔细比较特性，那么请看 https://vuejs.org/v2/guide/comparison.html ，它对 Vue.js 和其他框架进行了全面的比较，尽管它是由 Vue.js 团队编写的。但是不要陷入比较底层特性的泥潭，因为所有这些框架都是好的；它们都可以用来编写大型复杂的项目，最好的框架总是适合您的个人开发风格，并且您在其中最有效率。
了解服务器端呈现
服务器端渲染(也称为 SSR)是另一个与 SPAs 相关的术语，旨在使 web 应用在用户首次导航到 URL 时响应更快，并允许搜索引擎更好地索引 web 应用内容。
SSR 使用 Node.js 作为服务器端 JavaScript 运行时，在服务器上执行 web 应用，以生成呈现给用户的内容。此时，应用是一个往返应用，每次交互都会向服务器发出一个新的 HTTP 请求，服务器继续代表用户执行应用，并将生成的 HTML 发送回浏览器，以便向用户显示。同时，在后台下载执行该应用所需的代码和内容，并用于初始化该应用，此时该应用成为单页应用，用户交互由浏览器中运行的代码处理。
有支持 Vue.js 应用 SSR 的可用包，但我不在本书中描述它们。服务器端的渲染很复杂，仅限于能够执行 JavaScript 的服务器，因为它们负责代表用户运行应用。应用必须注意不要依赖需要浏览器的特性或 API，因为这些特性在服务器上是不可用的。在服务器端呈现和客户端呈现之间无缝切换对用户来说也是困难和困惑的，尤其是在出现问题的时候。这些困难和限制意味着 SSR 不适合大多数 Vue.js 项目，应该谨慎对待。参见 https://vuejs.org/v2/guide/ssr.html 了解关于 Vue.js 的 SSR 支持的更多细节
了解应用的复杂性
在决定 Vue.js 是否适合某个项目时，应用的类型并不是唯一的考虑因素。项目的复杂性也很重要，我经常听到一些读者说，他们已经开始使用客户端框架(如 Vue.js、Angular 或 React)进行项目，而简单得多的框架就足够了。像 Vue.js 这样的框架需要投入大量的时间来掌握(正如本书的篇幅所展示的)，如果你只需要验证一个表单或编程填充一个选择元素，这种努力是不值得的。
在围绕客户端框架的兴奋中，很容易忘记浏览器提供了一组丰富的可以直接使用的 API，这些 API 也是 Vue.js 所有功能所依赖的 API。如果您有一个简单且独立的问题，那么您应该考虑直接使用浏览器 API，从文档对象模型(DOM) API 开始。你会看到本书中的一些例子直接使用了浏览器 API，但是如果你是浏览器开发新手，那么 https://developer.mozilla.org 是一个很好的起点，它包含了浏览器支持的所有 API 的良好文档。
浏览器 API 的缺点，尤其是 DOM API，是它们可能很难使用，并且旧的浏览器倾向于以不同的方式实现特性。jQuery ( https://jquery.org )是直接使用浏览器 API 的一个很好的替代方法，尤其是如果您必须支持旧的浏览器。jQuery 简化了 HTML 元素的使用，并为处理事件、动画和异步 HTTP 请求提供了出色的支持。
像 Vue.js 这样的富客户端框架对于简单的项目需要太多的投资和太多的资源。它们在复杂的项目中发挥了自己的作用，在复杂的项目中，要实现复杂的工作流，要处理不同类型的用户，还要处理大量的数据。在这些情况下，您可以直接使用浏览器 API 或 jQuery，但是管理代码和扩展应用会变得很困难。Vue.js 提供的特性使得构建大型复杂的应用变得更加容易，并且不会陷入大量不可读的代码中，而不采用框架的复杂项目往往会陷入这种困境。
我需要知道什么？
如果您认为 Vue.js 是您项目的正确选择，那么您应该熟悉 web 开发的基础知识，了解 HTML 和 CSS 的工作原理，最好还能掌握 JavaScript 的工作知识。如果你对这些细节有些模糊，我在第三章 3 和第四章 4 中提供了我在本书中使用的 HTML、CSS 和 JavaScript 特性的入门知识。但是，你不会找到关于 HTML 元素和 CSS 属性的全面参考。一本关于 Vue.js 的书没有足够的空间来涵盖所有的 HTML。如果你想温习 HTML、CSS 和 JavaScript 的基础知识，我推荐从 https://developer.mozilla.org 开始。
如何设置我的开发环境？
Vue.js 开发所需的唯一开发工具是您在第一章创建第一个应用时安装的工具。后面的一些章节需要额外的软件包，但是提供了完整的说明。如果你在第一章成功地构建了应用，那么你就为 Vue.js 开发和本书的其余章节做好了准备。
这本书的结构是什么？
这本书分为三部分，每一部分都涵盖了一系列相关的主题。
第一部分:Vue.js 入门
本书的第一部分提供了 Vue.js 开发入门所需的信息。它包括本章和 Vue.js 开发中使用的关键技术的入门/复习章节，包括 HTML、CSS 和 JavaScript。我还将向您展示如何构建您的第一个 Vue.js 应用，并带您完成构建一个更真实的应用(称为 SportsStore)的过程。
第二部分:使用 Vue.js
本书的第二部分将带您了解大多数 Vue.js 项目所需的特性。Vue.js 包括许多内置功能，我将深入描述这些功能，以及将自定义代码和内容添加到项目中以创建定制功能的方式。
第三部分:高级 Vue.js 特性
本书的第三部分解释了如何使用高级 Vue.js 特性来创建更大更复杂的应用。我描述了 Vue.js 应用的生命周期，向您展示了如何创建一个公共数据存储，并解释了如何根据用户的操作显示应用的各个部分。我还将向您展示如何扩展内置的 Vue.js 特性，以及如何在您的项目中执行单元测试。
有很多例子吗？
有个载荷的例子。学习 Vue.js 的最好方法是通过例子，我已经尽可能多地将它们打包到本书中，并附有截图，以便您可以看到每个特性的效果。为了最大限度地增加本书中的示例数量，我采用了一个简单的约定来避免重复列出相同的代码或内容。当我创建一个文件时，我会显示它的全部内容，就像我在清单 2-1 中所做的那样。我在清单的标题中包含了文件及其文件夹的名称，并且用粗体显示了我所做的更改。
<template>
<div class="container-fluid">
<div class="row">
<div class="col"><error-display /></div>
</div>
<div class="row">
<div class="col-8 m-3"><product-display /></div>
<div class="col m-3"><product-editor /></div>
</div>
</div>
</template>
<script>
import ProductDisplay from "./components/ProductDisplay";
import ProductEditor from "./components/ProductEditor";
import ErrorDisplay from "./components/ErrorDisplay";
export default {
name: 'App',
components: { ProductDisplay, ProductEditor, ErrorDisplay },
created() {
this.$store.dispatch("getProductsAction");
}
}
</script>
Listing 2-1Getting Data in the App.vue File in the src Folder
这是第二十一章的列表，显示了在src文件夹中可以找到的一个名为App.vue的文件的内容。不要担心清单的内容或文件的目的；请注意，这种类型的清单包含文件的完整内容，您需要按照示例进行的更改以粗体显示。
Vue.js 应用中的一些文件可能很长，但是我描述的特性只需要一点小小的改变。我没有列出完整的文件，而是使用省略号(三个句点串联)来表示部分列表，它只显示了文件的一部分，如清单 2-2 所示。
...
<script>
let unwatcher;
export default {
data: function () {
return {
editing: false,
product: {}
}
},
methods: {
save() {
this.$store.dispatch("saveProductAction", this.product);
this.product = {};
},
cancel() {
this.$store.commit("selectProduct");
},
selectProduct(selectedProduct) {
if (selectedProduct == null) {
this.editing = false;
this.product = {};
} else {
this.editing = true;
this.product = {};
Object.assign(this.product, selectedProduct);
}
}
},
created() {
unwatcher = this.$store.watch(state =>
state.selectedProduct, this.selectProduct);
this.selectProduct(this.$store.state.selectedProduct);
},
beforeDestroy() {
unwatcher();
}
}
</script>
...
Listing 2-2Preparing for Dynamic Display in the ProductEditor.vue File in the src/components Folder
这是第二十一章的后续清单，它显示了一组只应用于一个大得多的文件的一部分的更改。当您看到部分清单时，您会知道文件的其余部分不必更改，只有粗体部分不同。
在某些情况下，需要在文件的不同部分进行更改，这使得很难显示为部分列表。在这种情况下，我省略了文件的部分内容，如清单 2-3 所示。
import Vue from "vue";
import Vuex from "vuex";
import Axios from "axios";
import PrefsModule from "./preferences";
import NavModule from "./navigation";
Vue.use(Vuex);
const baseUrl = "http://localhost:3500/products/";
export default new Vuex.Store({
modules: {
prefs: PrefsModule,
nav: NavModule
},
state: {
products: [],
selectedProduct: null
},
// ...other data store features omitted for brevity...
})
Listing 2-3Adding a Module in the index.js File in the src/store Folder
更改仍然用粗体标记，清单中省略的文件部分不受此示例的影响。
从哪里可以获得示例代码？
你可以从 https://github.com/Apress/pro-vue-js-2 下载本书所有章节的范例项目。该下载是免费的，它包含了您学习示例所需的一切，而不必键入所有的代码。
你在哪里可以得到这本书的修改？
你可以在 https://github.com/Apress/pro-vue-js-2 找到这本书的勘误表。
你怎么联系我？
如果你在使用本章中的例子时有问题，或者你在书中发现了问题，那么你可以发电子邮件到adam@adam-freeman.com给我，我会尽力帮助你。在联系我之前，请检查这本书的勘误表，看看它是否包含您的问题的解决方案。
摘要
在这一章中，我解释了 Vue.js 何时是项目的好选择，并概述了替代方案和竞争对手。我还概述了这本书的内容和结构，解释了从哪里获得更新，以及如果您对本书中的示例有问题，如何联系我。在下一章中，我将介绍本书中用来演示 Vue.js 开发的 HTML 和 CSS 特性。
三、HTML 和 CSS 入门
开发人员通过许多途径进入 web 应用开发的世界，并不总是基于 web 应用所依赖的基本技术。在这一章中，我提供了一个 HTML 的简单入门，并介绍了引导 CSS 库，我用它来设计本书中的例子。在第四章中，我介绍了 JavaScript 的基础知识，并给出了理解本书其余部分中的例子所需的信息。如果你是一个有经验的开发人员，你可以跳过这些初级章节，直接跳到第五章，在那里我使用 Vue.js 创建了一个更复杂和真实的应用。
小费
您可以从github . com/a press/pro-vue-js-2下载本章以及本书所有其他章节的示例项目。
为本章做准备
对于这一章，我需要一个简单的 Vue.js 项目。我首先运行清单 3-1 中所示的命令来创建一个名为htmlcssprimer的项目。
vue create htmlcssprimer --default
Listing 3-1Creating the Example Project
创建项目的过程可能需要一些时间，因为有大量的软件包需要下载和安装。
注意
在撰写本文时，@vue/cli包已经发布了测试版。在最终发布之前可能会有一些小的变化，但是核心特性应该保持不变。有关任何突破性变化的细节，请查看本书的勘误表，可在github . com/a press/pro-vue-js-2获得。
一旦创建了项目，运行清单 3-2 中所示的命令，导航到项目文件夹并安装 Bootstrap CSS 框架，我在本章(以及整本书)中使用它来管理 Vue.js 应用中内容的外观。
cd htmlcssprimer
npm install bootstrap@4.0.0
Listing 3-2Installing the Bootstrap Package
为了在项目中包含 Bootstrap，我将清单 3-3 中所示的语句添加到了src文件夹中的main.js文件中。我在第四章中解释了import语句是如何工作的，但是现在，简单地添加清单中所示的语句就足够了。
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
import "bootstrap/dist/css/bootstrap.min.css";
new Vue({
render: h => h(App)
}).$mount('#app')
Listing 3-3Adding a Statement in the main.js File in the src Folder
接下来，我用清单 3-4 中的template和script元素替换了App.vue文件中的占位符内容，并完全删除了style元素。
<template>
<div>
<h4 class="bg-primary text-white text-center p-2">
Adam's To Do List
</h4>
<div class="container-fluid p-4">
<div class="row">
<div class="col font-weight-bold">Task</div>
<div class="col-2 font-weight-bold">Done</div>
</div>
<div class="row" v-for="t in tasks" v-bind:key="t.action">
<div class="col">{{t.action}}</div>
<div class="col-2">{{t.done}}</div>
</div>
</div>
</div>
</template>
<script>
export default {
data: function () {
return {
tasks: [{ action: "Buy Flowers", done: false },
{ action: "Get Shoes", done: false },
{ action: "Collect Tickets", done: true },
{ action: "Call Joe", done: false }]
}
}
}
</script>
Listing 3-4Replacing the Content of the App.vue File in the src Folder
这是第一章中待办事项应用的简化版本，有一些基本的动态内容，但没有完成或添加新项目等功能。保存所有的修改并运行清单 3-5 中的命令来启动 Vue.js 开发工具。
npm run serve
Listing 3-5Starting the Vue.js Development Tools
项目的初始准备需要一段时间，之后您会看到一条消息，告诉您应用已经准备好了。打开一个新的浏览器窗口并导航至http://localhost:8080以查看图 3-1 所示的内容。
图 3-1
运行示例应用
理解 HTML 元素
HTML 的核心是元素，它告诉浏览器 HTML 文档的每个部分代表什么样的内容。以下是示例 HTML 文档中的一个元素:
...
<h4 class="bg-primary text-white text-center p-2">
Adam's To Do List
</h4>
...
如图 3-2 所示，这个元素有几个部分:开始标签、结束标签、属性和内容。
图 3-2
HTML 元素的剖析
这个元素的名称(也称为标签名称或者仅仅是标签)是h4，它告诉浏览器标签之间的内容应该被当作一个头。有一系列的头元素，从h1到h6，其中h1通常用于最重要的内容，h2用于稍微不太重要的内容，等等。
在定义 HTML 元素时，首先将标记名放在尖括号中(<和>字符)，然后以类似的方式使用标记结束元素，除了在左尖括号(<)后添加一个/字符，以创建开始标记和结束标记。
标签表明元素的用途，HTML 规范定义了大量的元素类型。在表 3-1 中，我描述了我在清单 3-4 中使用的元素，以及来自后面章节示例中的一些最常见的元素。要获得标签类型的完整列表，您应该查阅 HTML 规范。
表 3-1
示例中使用的常见 HTML 元素
|元素
|
描述
|
| --- | --- |
| a | 表示一个链接(更正式的说法是一个锚)，用户单击它可以导航到当前文档中的新 URL 或新位置。 |
| button | 表示一个按钮；通常用于向服务器提交表单。 |
| div | 通用元素；通常用于为文档添加结构，以用于演示目的。 |
| h1-h6 | 降级标题。 |
| input | 表示用于从用户处收集单个数据项的字段。 |
| table | 表示表格，用于将内容组织成行和列。 |
| tbody | 表示表格的正文(与页眉或页脚相对)。 |
| td | 降级表格行中的内容单元格。 |
| template | 表示将使用 JavaScript 处理的内容。Vue.js 组件使用一个template元素来包含它们的 HTML 内容，该元素还用于应用 Vue.js 特性以避免创建无效的 HTML 文档。 |
| th | 降级表格行中的标题单元格。 |
| thead | 降级表格的标题。 |
| tr | 降级表格中的行。 |
了解元素内容
出现在开始和结束标签之间的就是元素的内容。一个元素可以包含文本(比如本例中的Adam's To Do List)或其他 HTML 元素。下面是清单 3-4 中包含其他 HTML 元素的元素示例:
...
<div class="row">
<div class="col font-weight-bold">Task</div>
<div class="col-2 font-weight-bold">Done</div>
</div>
...
外部元素被称为父元素，而它包含的元素被称为子元素。能够创建元素的层次结构是 HTML 的一个基本特性，它允许创建复杂的布局。父子关系在一个大型 HTML 文档中展开，这样一个元素可以是许多其他元素的前身，所有其他元素都是它的后代。
了解元素内容限制
有些元素对可以成为其子元素的元素类型有限制。上一节中显示的div元素可以包含任何其他元素，并用于添加结构，通常这样可以很容易地对内容进行样式化。其他元素具有更具体的角色，需要将特定类型的元素用作子元素。例如，一个tbody元素，你将在后面的章节中看到，它代表一个表格的主体，可以只包含一个或多个tr元素，每个元素代表一个表格行。
小费
不要担心学习所有的 HTML 元素和它们之间的关系。当你按照后面章节中的例子学习时，你会学到你需要知道的一切，如果你试图创建无效的 HTML，大多数代码编辑器会显示一个警告。
了解空元素
有些元素根本不允许包含任何内容。这些被称为 void 或自闭元素，它们没有单独的结束标记，就像这样:
...
<input />
...
在单个标记中定义了一个 void 元素，并在最后一个尖括号(>字符)前添加了一个/字符。这里显示的元素是 void 元素最常见的例子，它用于在 HTML 表单中收集来自用户的数据。在后面的章节中，你会看到很多关于 void 元素的例子。
了解属性
通过向元素添加属性，可以向浏览器提供额外的信息。下面是应用于图 3-2 中所示的h4元素的属性:
...
<h4 class="bg-primary text-white text-center p-2">
Adam's To Do List
</h4>
...
属性总是被定义为开始标签的一部分，并且大多数属性都有一个名称和一个值，用等号分隔，如图 3-3 所示。
图 3-3
属性的名称和值
这个属性的名称是class，用于将相关的元素组合在一起，这样它们的外观就可以得到一致的管理。这就是为什么在这个例子中使用了class属性，并且属性值将h4元素与许多类相关联，这些类与引导 CSS 包提供的样式相关，我将在本章后面描述。
在属性中引用文字值
Vue.js 依靠 HTML 元素属性来应用它的许多功能。大多数时候，属性的值被作为 JavaScript 表达式来计算，比如这个元素，取自清单 3-4 :
...
<div class="row" v-for="t in tasks" v-bind:key="t.action">
...
属性值包含 JavaScript 片段。属性v-for的值是一个表达式，它将枚举一个名为tasks的数组中的对象，并将每个对象分配给一个名为t的临时变量。清单 3-4 中的script元素中提供了tasks数组，但是有时您需要提供一个特定的值，而不是让 Vue.js 从script元素中读取一个值，这需要额外的引号字符来告诉 JavaScript 它正在处理一个文字值，如下所示:
...
<h3 v-on:click="name = 'Clicked'">{{ name }}</h3>
...
这个元素来自第十四章，属性的值是一个表达式，它将文字字符串Clicked分配给一个名为name的属性。为了表示文字值，Clicked用单引号('字符)括起来，这可以防止 Vue.js 在script元素中查找Clicked值。
应用不带值的属性
并非所有属性都需要值；仅仅定义它们就向浏览器发送了一个信号，表明您需要与该元素相关联的某种行为。下面是一个具有这种属性的元素的例子，你可以在第二十五章中找到:
...
<transition enter-active-class="animated fadeIn"
leave-active-class=" animated fadeOut" mode="out-in"
appear appear-active-class="animated zoomIn">
<router-view />
</transition>
...
这是一个应用了许多属性的元素，但是请注意,appear属性没有值。有效果的是属性的存在，不需要值。
检查实时 HTML 文档
如果你想看到一个网页所使用的底层 HTML，你可能习惯于在浏览器窗口中右击并从弹出窗口中选择 View Page Source(如果你没有使用 Google Chrome，则选择一个类似名称的菜单项)。但是如果您在浏览器显示示例应用时这样做，您将看不到待办事项列表的 HTML。相反，您将看到以下内容:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="/favicon.ico">
<title>htmlcssprimer</title>
<link as="script" href="/app.js" rel="preload">
</head>
<body>
<noscript>
<strong>
We're sorry but htmlcssprimer doesn't work properly without
JavaScript enabled. Please enable it to continue.
</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="/app.js"></script></body>
</html>
您需要使用浏览器的开发人员工具来查看 Vue.js 应用生成的 HTML 元素。当应用运行时，它的 JavaScript 代码被执行，并产生您在浏览器窗口中看到的内容。
大多数浏览器在按下 F12 键时会打开它们的开发工具(这就是为什么它们通常被称为 F12 工具)，但是通常会有一个菜单选项或弹出菜单上的一个项目，当您在浏览器窗口中右键单击时会出现。对于 Google Chrome，这是 Inspect 菜单项，它打开开发者工具并聚焦于你点击的 HTML 元素。
图 3-4 显示了我在浏览器窗口中右键单击 Collect Tickets 文本并从弹出菜单中选择 Inspect 后的开发人员工具显示。它显示了应用生成的 HTML 元素，包括它们的内容、属性以及影响它们的 CSS 样式的细节。
图 3-4
检查 HTML 元素
F12 开发人员工具呈现的视图是实时的，这意味着对 Vue.js 应用生成的内容的更改将反映在您看到的元素中。这是了解应用行为的好方法，尤其是当您没有得到预期的结果时。
了解引导程序
HTML 元素告诉浏览器它们代表什么样的内容，但是它们不提供任何关于内容应该如何显示的信息。关于如何显示元素的信息是使用级联样式表 (CSS)提供的。CSS 由一组全面的属性和一组选择器组成，前者可用于配置元素外观的各个方面，后者允许应用这些属性。
CSS 的一个主要问题是，一些浏览器对属性的解释略有不同，这可能导致 HTML 内容在不同设备上的显示方式有所不同。跟踪和纠正这些问题可能很困难，CSS 框架已经出现，以帮助 web 应用开发人员以简单和一致的方式设计他们的 HTML 内容。
最流行的 CSS 框架是 Bootstrap，它最初是在 Twitter 上开发的，但已经成为一个广泛使用的开源项目。Bootstrap 由一组 CSS 类和一些可选的 JavaScript 代码组成，这些 CSS 类可以应用于元素以保持一致的样式，这些可选的 JavaScript 代码可以执行额外的增强功能(但我不会在本书中使用)。我在自己的项目中使用 Bootstrap 它跨浏览器运行良好，并且使用简单。我在本书中使用了 Bootstrap CSS 样式，因为它们让我不必在每一章中定义和列出我自己的定制 CSS 就可以设计我的例子。Bootstrap 提供了比我在本书中使用的更多的特性；参见 getbootstrap。有关详细信息，请访问。
关于 Bootstrap，我不想说得太详细，因为这不是本书的主题，但是我想给你足够的信息，这样你就可以知道例子的哪些部分是 Vue.js 特性，哪些与 Bootstrap 相关。
应用基本引导类
引导样式是通过class属性应用的，该属性用于将相关元素组合在一起。class属性不仅用于应用 CSS 样式，而且是最常见的用法，它支持 Bootstrap 和类似框架的操作方式。下面是一个带有class属性的 HTML 元素，取自清单 3-4 :
...
<h4 class="bg-primary text-white text-center p-2">
Adam's To Do List
</h4>
...
class属性将h4元素分配给四个类，它们的名称由空格分隔:bg-primary、text-white、text-center和p-2。这些类对应于 Bootstrap 定义的样式集合，如表 3-2 所述。
表 3-2
h4 元素类
|名字
|
描述
|
| --- | --- |
| bg-primary | 该类应用样式上下文来提供关于元素用途的视觉提示。请参见“使用上下文类”一节。 |
| text-white | 这个类应用一种样式，将元素内容的文本颜色设置为白色。 |
| text-center | 这个类应用一种水平居中元素内容的样式。 |
| p-2 | 该类应用一种样式，在元素内容周围增加间距，如“使用边距和填充”一节所述。 |
使用上下文类
使用像 Bootstrap 这样的 CSS 框架的主要优点之一是简化了在整个应用中创建一致主题的过程。Bootstrap 定义了一组样式上下文，用于一致地设计相关元素的样式。这些上下文在表 3-3 中描述，用于将引导样式应用于元素的类的名称中。
表 3-3
自举风格的上下文
|名字
|
描述
|
| --- | --- |
| primary | 该上下文用于指示主要动作或内容区域。 |
| secondary | 该上下文用于指示内容的支持区域。 |
| success | 此上下文用于指示成功的结果。 |
| info | 该上下文用于呈现附加信息。 |
| warning | 该上下文用于显示警告。 |
| danger | 此上下文用于表示严重警告。 |
| muted | 这种语境是用来淡化内容的。 |
| dark | 该上下文通过使用深色来增加对比度。 |
| white | 该上下文用于通过使用白色来增加对比度。 |
Bootstrap 提供了允许样式上下文应用于不同类型元素的类。我在开始本节时使用的h4元素已经被添加到了bg-primary类中，该类设置元素的背景颜色，以表明它与应用的主要目的相关。其他类特定于某一组元素，例如btn-primary，它用于配置button和a元素，使它们显示为按钮，其颜色与主上下文中的其他元素一致。其中一些上下文类必须与配置元素基本样式的其他类结合使用，比如与btn-primary类结合使用的btn类。
使用边距和填充
Bootstrap 包括一组实用程序类，用于添加填充，即元素边缘与其内容之间的空间，以及边距，即元素边缘与其周围元素之间的空间。使用这些类的好处是它们在整个应用中应用一致的间距。
这些类的名称遵循一种定义良好的模式。下面是清单 3-4 中的h4元素:
...
<h4 class="bg-primary text-white text-center p-2">
Adam's To Do List
</h4>
...
将边距和填充应用于元素的类遵循一个定义良好的命名模式:首先是字母m(用于边距)或p(用于填充)，接着是一个可选的字母，用于选择特定的边缘(t用于顶部、b用于底部、l用于左侧、或r用于右侧)，然后是一个连字符，最后是一个数字，用于指示应该应用多少空间(0用于无间距，或1、2、3、4或5用于增加数量)。如果没有字母来指定边缘，则边距或填充将应用于所有边缘。为了帮助将这个模式放在上下文中，添加了h4元素的p-2类将填充级别 2 应用于元素的所有边缘。
使用引导程序创建网格
Bootstrap 提供了样式类，可用于创建不同种类的网格布局，从 1 列到 12 列不等，并支持响应式布局，其中网格的布局根据屏幕的宽度而变化。我在本书的许多例子中使用了网格布局，包括清单 3-4 中的组件，它使用这种布局显示其待办事项，如下所示:
...
<div class="container-fluid p-4">
<div class="row">
<div class="col font-weight-bold">Task</div>
<div class="col-2 font-weight-bold">Done</div>
</div>
<div class="row" v-for="t in tasks" v-bind:key="t.action">
<div class="col">{{t.action}}</div>
<div class="col-2">{{t.done}}</div>
</div>
</div>
...
自举网格布局系统易于使用。一个顶级的div元素被分配给container类(或者是container-fluid类，如果你想让它跨越可用空间的话)。通过将row类应用到div元素来指定列，这具有为div元素包含的内容设置网格布局的效果。
每行定义 12 列，您可以通过指定一个名为col-后跟列数的类来指定每个子元素将占用多少列。例如，类col-1指定一个元素占据一列，col-2指定两列，依此类推，直到col-12，它指定一个元素填充整个行。如果您省略了列数，而只是将一个元素分配给了col类，那么 Bootstrap 将分配等量的剩余列。
使用引导程序设计表格
Bootstrap 包括对样式化table元素及其内容的支持，这是我在后面章节的一些例子中使用的一个特性。表 3-4 列出了使用表的关键引导类。
表 3-4
表格的引导 CSS 类
|名称
|
描述
|
| --- | --- |
| table | 对一个table元素及其行应用常规样式 |
| table-striped | 对table正文中的行应用隔行条带化 |
| table-bordered | 将边框应用于所有行和列 |
| table-sm | 减少表格中的间距以创建更紧凑的布局 |
所有这些类都直接应用于table元素，如清单 3-6 所示，其中我用表格替换了网格布局。
<template>
<div>
<h4 class="bg-primary text-white text-center p-2">
Adam's To Do List
</h4>
<table class="table table-striped table-bordered table-sm">
<thead>
<tr><th>Task</th><th>Done</th></tr>
</thead>
<tbody>
<tr v-for="t in tasks" v-bind:key="t.action">
<td>{{t.action}}</td>
<td>{{t.done}}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data: function () {
return {
tasks: [{ action: "Buy Flowers", done: false },
{ action: "Get Shoes", done: false },
{ action: "Collect Tickets", done: true },
{ action: "Call Joe", done: false }]
}
}
}
</script>
Listing 3-6Using a Table Layout in the App.vue File in the src Folder
小费
注意，在定义清单 3-6 中的表格时，我使用了thead元素。如果一个tbody元素没有被使用，浏览器会自动添加任何tr元素，这些元素是table元素的直接后代。如果在使用 Bootstrap 时依赖于这种行为，您将会得到奇怪的结果，并且在定义表时使用完整的元素集总是一个好主意。
图 3-5 显示用表格代替网格显示待办事项的结果。
图 3-5
样式化 HTML 表格
使用引导程序设计表单
Bootstrap 包括表单元素的样式，允许它们与应用中的其他元素保持一致。在清单 3-7 中，我向示例应用添加了表单元素。
<template>
<div>
<h4 class="bg-primary text-white text-center p-2">
Adam's To Do List
</h4>
<table class="table table-striped table-bordered table-sm">
<thead>
<tr><th>Task</th><th>Done</th></tr>
</thead>
<tbody>
<tr v-for="t in tasks" v-bind:key="t.action">
<td>{{t.action}}</td>
<td>{{t.done}}</td>
</tr>
</tbody>
</table>
<div class="form-group m-2">
<label>New Item:</label>
<input v-model="newItemText" class="form-control" />
</div>
<div class="text-center">
<button class="btn btn-primary" v-on:click="addNewTodo">
Add
</button>
</div>
</div>
</template>
<script>
export default {
data: function () {
return {
tasks: [{ action: "Buy Flowers", done: false },
{ action: "Get Shoes", done: false },
{ action: "Collect Tickets", done: true },
{ action: "Call Joe", done: false }],
newItemText: ""
}
},
methods: {
addNewTodo() {
this.tasks.push({
action: this.newItemText,
done: false
});
this.newItemText = "";
}
}
}
</script>
Listing 3-7Adding Form Elements in the App.vue File in the src Folder
表单的基本样式是通过将form-group类应用于包含label和input元素的div元素来实现的，其中input元素被分配给form-control类。Bootstrap 对元素进行样式化，使label显示在input元素上方，而input元素占据 100%的可用水平空间，如图 3-6 所示。
图 3-6
样式表单元素
摘要
在这一章中，我提供了 HTML 和引导 CSS 框架的简要概述。您需要很好地掌握 HTML 和 CSS，以便在 web 应用开发中真正有效，但最好的学习方法是通过第一手经验，本章中的描述和示例将足以让您入门，并为前面的示例提供足够的背景信息。在下一章，我将继续初级主题，介绍我在本书中使用的最重要的 JavaScript。
四、基本 JavaScript 入门
在这一章中，我快速浏览了 JavaScript 语言应用于 Vue.js 开发的最重要的特性。我没有足够的空间来完整地描述 JavaScript，所以我把重点放在了你需要快速掌握并遵循本书中的例子的要点上。表 4-1 总结了本章内容。
表 4-1
章节总结
|问题
|
解决办法
|
列表
|
| --- | --- | --- |
| 提供将由浏览器执行的指令 | 使用 JavaScript 语句 | five |
| 将语句的执行延迟到需要的时候 | 使用 JavaScript 函数 | 6–8, 11, 12 |
| 定义参数数量可变的函数 | 使用默认和 rest 参数 | 9, 10 |
| 简洁地表达功能 | 使用粗箭头功能 | Fourteen |
| 定义变量和常数 | 使用let和const关键字 | 15, 16 |
| 使用 JavaScript 基本类型 | 使用string、number或boolean关键字 | 17, 18, 20 |
| 定义包含其他值的字符串 | 使用模板字符串 | Nineteen |
| 有条件地执行语句 | 使用if、else和switch关键字 | Twenty-one |
| 比较价值观和身份 | 使用等式和标识运算符 | 22, 23 |
| 转换类型 | 使用类型转换关键字 | 24–26 |
| 分组相关项目 | 定义一个数组 | 27, 28 |
| 读取或更改数组中的值 | 使用索引访问器符号 | 29, 30 |
| 枚举数组的内容 | 使用for循环或forEach方法 | Thirty-one |
| 展开数组的内容 | 使用扩展运算符 | 32, 33 |
| 处理数组的内容 | 使用内置数组方法 | Thirty-four |
| 将相关值收集到一个单元中 | 定义一个对象 | 35–37 |
| 定义可以对对象的值执行的操作 | 定义一种方法 | 38, 39 |
| 将属性和值从一个对象复制到另一个对象 | 使用Object.assign方法 | Forty |
| 群组相关功能 | 定义一个 JavaScript 模块 | 41–49 |
| 观察异步操作 | 定义一个Promise并使用async和await关键字 | 50–54 |
为本章做准备
对于这一章，我需要一个简单的 Vue.js 项目。我首先运行清单 4-1 中所示的命令来创建一个名为jsprimer的项目。
小费
你可以从 https://github.com/Apress/pro-vue-js-2 下载本章以及本书其他章节的示例项目。
vue create jsprimer --default
Listing 4-1Creating the Example Project
将创建项目，并下载和安装应用和开发工具所需的包，这可能需要一些时间才能完成。
注意
在撰写本文时，@vue/cli包已经发布了测试版。在最终发布之前可能会有一些小的变化，但是核心特性应该保持不变。有关任何突破性变化的详细信息，请查看本书的勘误表，可在 https://github.com/Apress/pro-vue-js-2 获得。
一旦创建了项目，使用您喜欢的编辑器将src文件夹中的main.js文件的内容替换为清单 4-2 中所示的语句。对于本章，重点是 JavaScript 而不是 Vue.js，并且不需要现有的代码，因为它初始化一个 Vue.js 应用。
console.log("Hello");
Listing 4-2Replacing the Content of the main.js File in the src Folder
此项目需要更改配置以覆盖项目的默认设置。将清单 4-3 中显示的语句添加到project.json文件中，该文件负责配置项目，我在第十章中对此进行了描述。
...
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {
"no-console": "off",
"no-declare": "off",
"no-unused-vars": "off"
},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
...
Listing 4-3Changing the Project Configuration in the package.json File in the jsprimer Folder
这些改变禁用了我在本章的例子中使用的 JavaScript 特性的警告，由 JavaScript linter 产生，我在第十章描述了它。
保存对main.js和package.json文件的更改；然后打开一个新的命令提示符，运行清单 4-4 中所示的命令，导航到项目文件夹，启动 Vue.js 开发工具。尽管我在本章中没有使用 Vue.js 特性，但我将利用 Vue.js 工具链，它简化了在浏览器中执行 JavaScript 代码的过程。
cd jsprimer
npm run serve
Listing 4-4Starting the Vue.js Development Tools
项目的初始准备需要一段时间，之后您会看到一条消息，告诉您应用已经准备好了。打开一个新的浏览器窗口并导航到http://localhost:8080，这将产生如图 4-1 所示的空窗口。
图 4-1
运行示例应用
如果你打开浏览器的 F12 开发工具并检查控制台选项卡，你会看到清单 4-2 中的语句产生了一个简单的结果，如图 4-2 所示。
图 4-2
浏览器控制台中的一条消息
本章中的所有示例都产生文本输出，所以我将只使用文本，而不是显示控制台选项卡的屏幕截图，如下所示:
[HMR] Waiting for update signal from WDS...
Hello
第一行是来自开发工具的消息，当检测到src文件夹中的更改时，它会自动重新加载浏览器。我不会在后续示例的输出中包含这一点。
使用语句
基本的 JavaScript 构建块是语句。每条语句代表一条命令，语句通常以分号(;)结束。分号是可选的，但是使用分号会使代码更容易阅读，并且允许在一行中有多个语句。在清单 4-5 中，我向 JavaScript 文件添加了语句。
console.log("Hello");
console.log("Apples");
console.log("This is a statement");
console.log("This is also a statement");
Listing 4-5Adding JavaScript Statements in the main.js File in the src Folder
浏览器依次执行每条语句。在本例中，所有语句都只是将消息写入控制台。结果如下:
Hello
Apples
This is a statement
This is also a statement
定义和使用函数
当浏览器收到 JavaScript 代码时，它会按照定义的顺序执行其中包含的语句。这就是上一个示例中发生的情况。main.js文件中的语句被逐一执行，所有语句都向控制台写入一条消息，所有语句都按照它们在main.js中定义的顺序执行。您还可以将语句打包到一个函数中，直到浏览器遇到一个调用该函数的语句，该函数才会被执行，如清单 4-6 所示。
const myFunc = function () {
console.log("This statement is inside the function");
};
console.log("This statement is outside the function");
myFunc();
Listing 4-6Defining a JavaScript Function in the main.js File in the src Folder
定义一个函数很简单:使用const关键字，后跟您想要给函数起的名字，再加上等号(=)和function关键字，再加上括号((和)字符)。您希望函数包含的语句用大括号括起来(字符{和})。
在清单中，我使用了名称myFunc，该函数包含一个向 JavaScript 控制台写入消息的语句。在浏览器到达另一个调用myFunc函数的语句之前，函数中的语句不会被执行，如下所示:
...
myFunc();
...
当您保存对main.js文件的更改时，更新的 JavaScript 代码将被发送到浏览器，在浏览器中执行并产生以下输出:
This statement is outside the function
This statement is inside the function
您可以看到函数内部的语句并没有立即执行，但是除了演示函数是如何定义的以外，这个例子并不是特别有用，因为函数是在定义后立即被调用的。当响应某种变化或事件(如用户交互)而调用函数时，函数会更有用。
您还可以定义函数，这样就不必显式地创建和分配变量，如清单 4-7 所示。
function myFunc() {
console.log("This statement is inside the function");
}
console.log("This statement is outside the function");
myFunc();
Listing 4-7Defining a Function in the main.js File in the src Folder
代码的工作方式与清单 4-6 相同，但大多数开发人员更熟悉，这也是我在本书中通常定义函数的方式，因为它非常适合 Vue.js 开发。
使用现代 JavaScript 特性
近年来，JavaScript 已经现代化，增加了方便的语言特性，并对常见任务(如数组处理)可用的实用函数进行了大量扩展。并不是所有的浏览器都支持最新的特性，因此 Vue.js 开发工具包括 Babel 包，它负责将使用最新特性编写的 JavaScript 转换为可以依赖于在大多数主流浏览器中工作的代码。这意味着您能够享受现代开发体验，而无需关注处理浏览器之间的差异和跟踪每个浏览器支持的功能。这种翻译是特定于 JavaScript 语言的，它没有扩展到您可能想在应用中使用的更广泛的 API，比如我在第一章中使用的本地存储特性。对于这种类型的特性，您需要考虑您的应用必须到达的浏览器，以及您想要的 API 是否可用。一个很好的起点是caniuse.com，它将让您深入了解对一组广泛的 API 和相关特性的支持级别。
用参数定义函数
JavaScript 允许您为函数定义参数，如清单 4-8 所示。
function myFunc(name, weather) {
console.log("Hello" + name + ".");
console.log("It is" + weather + "today.");
}
myFunc("Adam", "sunny");
Listing 4-8Defining Functions with Parameters in the main.js File in the src Folder
我给myFunc函数添加了两个参数，称为name和weather。JavaScript 是一种动态类型语言，这意味着在定义函数时不必声明参数的数据类型。当我在本章后面讲述 JavaScript 变量时，我会回到动态类型。要调用带参数的函数，需要在调用函数时提供值作为参数，如下所示:
...
myFunc("Adam", "sunny");
...
该清单的结果如下:
Hello Adam.
It is sunny today.
使用默认和 Rest 参数
调用函数时提供的参数数量不需要与函数中的参数数量相匹配。如果调用函数时使用的参数少于它拥有的参数，那么任何没有提供值的参数的值都是undefined，这是一个特殊的 JavaScript 值。如果调用函数时使用的参数多于实际参数，那么多余的参数将被忽略。
这样做的结果是，您不能创建两个具有相同名称和不同参数的函数，并期望 JavaScript 根据您在调用函数时提供的参数来区分它们。这被称为多态性，尽管它在 Java 和 C#等语言中受支持，但在 JavaScript 中不可用。相反，如果您定义了两个同名的函数，那么第二个定义将替换第一个定义。
有两种方法可以修改函数，以响应函数定义的参数数量和用于调用函数的参数数量之间的不匹配。默认参数处理实参比参数少的情况，它们允许你为没有实参的参数提供默认值，如清单 4-9 所示。
function myFunc(name, weather = "raining") {
console.log("Hello" + name + ".");
console.log("It is" + weather + "today.");
}
myFunc("Adam");
Listing 4-9Using a Default Parameter in the main.js File in the src Folder
函数中的weather参数已被赋予默认值raining，如果仅使用一个参数调用该函数，将使用该值，产生以下结果:
Hello Adam.
It is raining today.
Rest 参数用于在用附加参数调用函数时捕获任何附加参数，如清单 4-10 所示。
function myFunc(name, weather, ...extraArgs) {
console.log("Hello" + name + ".");
console.log("It is" + weather + "today.");
for (let i = 0; i < extraArgs.length; i++) {
console.log("Extra Arg:" + extraArgs[i]);
}
}
myFunc("Adam", "sunny", "one", "two", "three");
Listing 4-10Using a Rest Parameter in the main.js File in the src Folder
rest 参数必须是函数定义的最后一个参数，其名称以省略号为前缀(三个句点，...)。rest 参数是一个数组，任何额外的参数都将被赋给它。在清单中，该函数将每个额外的参数打印到控制台，产生以下结果:
Hello Adam.
It is sunny today.
Extra Arg: one
Extra Arg: two
Extra Arg: three
定义返回结果的函数
您可以使用return关键字从函数中返回结果。清单 4-11 显示了一个返回结果的函数。
function myFunc(name) {
return ("Hello" + name + ".");
}
console.log(myFunc("Adam"));
Listing 4-11Returning a Result from a Function in the main.js File in the src Folder
这个函数定义了一个参数，并用它来产生一个结果。我调用函数并将结果作为参数传递给console.log函数，如下所示:
...
console.log(myFunc("Adam"));
...
请注意，您不必声明该函数将返回一个结果或表示结果的数据类型。该清单的结果如下:
Hello Adam.
将函数用作其他函数的参数
JavaScript 函数可以被视为对象，这意味着您可以使用一个函数作为另一个函数的参数，如清单 4-12 所示。
function myFunc(nameFunction) {
return ("Hello" + nameFunction() + ".");
}
console.log(myFunc(function () {
return "Adam";
}));
Listing 4-12Using a Function as an Arguments in the main.js File in the src Folder
myFunc函数定义了一个名为nameFunction的参数，它调用这个参数来获取插入到它返回的字符串中的值。我将一个返回Adam作为参数的函数传递给myFunc，它产生以下输出:
Hello Adam.
函数可以链接在一起，从小而容易测试的代码片段中构建更复杂的功能，如清单 4-13 所示。
function myFunc(nameFunction) {
return ("Hello" + nameFunction() + ".");
}
function printName(nameFunction, printFunction) {
printFunction(myFunc(nameFunction));
}
printName(function () { return "Adam" }, console.log);
Listing 4-13Chaining Functions Calls in the main.js File in the src Folder
此示例产生以下输出:
Hello Adam.
使用箭头功能
箭头函数——也称为胖箭头函数或λ表达式——是定义函数的另一种方式，通常用于定义仅用作其他函数参数的函数。清单 4-14 用箭头函数替换了前面例子中的函数。
const myFunc = (nameFunction) => ("Hello" + nameFunction() + ".");
const printName = (nameFunction, printFunction) =>
printFunction(myFunc(nameFunction));
printName(function () { return "Adam" }, console.log);
Listing 4-14Using Arrow Functions in the main.js File in the src Folder
这些函数与清单 4-13 中的函数执行相同的工作。箭头函数有三个部分:输入参数、等号和大于号(“箭头”)，最后是函数结果。只有当 arrow 函数需要执行多条语句时，才需要关键字return和花括号。在这一章的后面有更多的箭头函数的例子，你会在整本书中看到它们的使用。
警告
箭头功能不能用于所有 Vue.js 功能。请密切注意后面章节中的示例，并使用所示的函数类型。
使用变量和类型
let关键字用于声明变量，也可以在一条语句中为变量赋值——与我在前面的例子中使用的const关键字相反，它创建一个不可修改的常量值。
当您使用let或const时，您创建的变量或常量只能在定义它们的代码区域中被访问，这被称为变量或常量的范围，如清单 4-15 所示。
function messageFunction(name, weather) {
let message = "Hello, Adam";
if (weather == "sunny") {
let message = "It is a nice day";
console.log(message);
} else {
let message = "It is" + weather + "today";
console.log(message);
}
console.log(message);
}
messageFunction("Adam", "raining");
Listing 4-15Using let to Declare Variables in the main.js File in the src Folder
在这个例子中，有三个语句使用let关键字来定义一个名为message的变量。每个变量的范围限于定义它的代码区域，产生以下结果:
It is raining today
Hello, Adam
这似乎是一个奇怪的例子，但是还有另一个关键字可以用来声明变量:var。let和const关键字是 JavaScript 规范中相对较新的补充，旨在解决var行为方式中的一些奇怪之处。清单 4-16 以清单 4-15 为例，将let替换为var。
使用 Let 和 Const
对于您不希望更改的任何值，使用const关键字是一个很好的实践，这样，如果试图进行任何修改，您都会收到一个错误。然而，这是我很少遵循的一种做法——一部分是因为我仍然在努力适应不使用var关键字，另一部分是因为我用一系列语言编写代码，并且有一些我避免的功能，因为当我从一种语言切换到另一种语言时它们会绊倒我。如果你是 JavaScript 新手，那么我建议你试着正确使用const和let，避免步我后尘。
function messageFunction(name, weather) {
var message = "Hello, Adam";
if (weather == "sunny") {
var message = "It is a nice day";
console.log(message);
} else {
var message = "It is" + weather + "today";
console.log(message);
}
console.log(message);
}
messageFunction("Adam", "raining");
Listing 4-16Using var to Declare Variables in the main.js File in the src Folder
当您保存列表中的更改时，您将看到以下结果:
It is raining today
It is raining today
问题是var关键字创建的变量的作用域是包含函数，这意味着所有对message的引用都是指同一个变量。这甚至会给有经验的 JavaScript 开发人员带来意想不到的结果，这也是引入更传统的let关键字的原因。
使用可变闭包
如果你在另一个函数内部定义一个函数——创建内部和外部函数——那么内部函数能够访问外部函数的变量，使用一个叫做闭包的特性，就像这样:
function myFunc(name) {
let myLocalVar = "sunny";
let innerFunction = function () {
return ("Hello" + name + ". Today is" + myLocalVar + ".");
}
return innerFunction();
}
console.log(myFunc("Adam"));
这个例子中的内部函数能够访问外部函数的局部变量，包括它的参数。这是一个强大的特性，意味着您不必在内部函数上定义参数来传递数据值，但是需要小心，因为当使用像counter或index这样的普通变量名时，很容易得到意外的结果，您可能没有意识到您正在重用外部函数中的变量名。
使用基本类型
JavaScript 定义了一组基本的原语类型:string、number、boolean。这似乎是一个很短的列表，但是 JavaScript 设法将很多灵活性融入到这些类型中。
小费
我在这里简化。您可能会遇到另外三种原语。已经声明但没有赋值的变量是undefined，而null值用来表示一个变量没有值，就像其他语言一样。最后一个原语类型是Symbol，它是一个不可变的值，表示一个惟一的 ID，但是在编写本文时还没有广泛使用。
使用布尔值
boolean类型有两个值:true和false。清单 4-17 显示了正在使用的两个值，但是这种类型在条件语句中使用时最有用，比如一个if语句。该清单中没有控制台输出。
let firstBool = true;
let secondBool = false;
Listing 4-17Defining boolean Values in the main.js File in the src Folder
使用字符串
您可以使用双引号或单引号字符来定义string值，如清单 4-18 所示。
let firstString = "This is a string";
let secondString = 'And so is this';
Listing 4-18Defining string Variables in the main.js File in the src Folder
您使用的引号字符必须匹配。例如，你不能用单引号开始一个字符串，然后用双引号结束。此列表没有控制台输出。JavaScript 为string对象提供了一组基本的属性和方法，其中最有用的在表 4-2 中有描述。
表 4-2
有用的字符串属性和方法
|名字
|
描述
|
| --- | --- |
| length | 此属性返回字符串中的字符数。 |
| charAt(index) | 此方法返回包含指定索引处的字符的字符串。 |
| concat(string) | 此方法返回一个新字符串，该字符串将调用该方法的字符串和作为参数提供的字符串连接在一起。 |
| indexOf(term, start) | 该方法返回第一个索引，在该索引处term出现在字符串中，如果没有匹配，则返回-1。可选的start参数指定搜索的起始索引。 |
| replace(term, newTerm) | 该方法返回一个新字符串，其中所有的term实例都被替换为newTerm。 |
| slice(start, end) | 此方法返回包含起始和结束索引之间的字符的子字符串。 |
| split(term) | 这个方法将一个字符串分割成一个由term分隔的值数组。 |
| toUpperCase()``toLowerCase() | 这些方法返回所有字符都是大写或小写的新字符串。 |
| trim() | 此方法返回一个新字符串，其中所有的前导和尾随空白字符都已被删除。 |
使用模板字符串
一个常见的编程任务是将静态内容与数据值结合起来，以生成可以呈现给用户的字符串。传统的方法是通过字符串连接，这是我在本章的例子中一直使用的方法，如下所示:
...
let message = "It is" + weather + "today";
...
JavaScript 还支持模板字符串，它允许内联指定数据值，这有助于减少错误，带来更自然的开发体验。清单 4-19 展示了模板字符串的使用。
function messageFunction(weather) {
let message = `It is ${weather} today`;
console.log(message);
}
messageFunction("raining");
Listing 4-19Using a Template String in the main.js File in the src Folder
模板字符串以反斜杠(```js 字符)开始和结束，数据值由花括号表示，前面有一个美元符号。例如，这个字符串将变量weather的值合并到模板字符串中:
...
let message = `It is ${weather} today`;
...
```js
此示例产生以下输出:
It is raining today
#### 使用数字
`number`类型用于表示*整数*和*浮点*(也称为*实数*)。清单 4-20 提供了一个演示。
let daysInWeek = 7; let pi = 3.14; let hexValue = 0xFFFF;
Listing 4-20Defining number Values in the main.js File in the src Folder
您不必指定使用哪种号码。您只需表达您需要的值，JavaScript 就会相应地执行。在清单中，我定义了一个整数值、一个浮点值，并在一个值前面加上了`0x`来表示一个十六进制值。
## 使用 JavaScript 运算符
JavaScript 定义了一组非常标准的操作符。我在表 4-3 中总结了最有用的。
表 4-3
有用的 JavaScript 运算符
<colgroup><col class="tcol1 align-left"> <col class="tcol2 align-left"></colgroup>
|
操作员
|
描述
|
| --- | --- |
| `++, --` | 前或后递增和递减 |
| `+, -, *, /, %` | 加法、减法、乘法、除法、余数 |
| `<, <=, >, >=` | 小于，小于等于，大于，大于等于 |
| `==, !=` | 平等和不平等测试 |
| `===, !==` | 同一性和非同一性测试 |
| `&&, ||` | 逻辑 AND 和 OR (||用于合并空值) |
| `=` | 分配 |
| `+` | 串并置 |
| `?:` | 三操作数条件语句 |
### 使用条件语句
许多 JavaScript 操作符与条件语句一起使用。在本书中，我倾向于使用`if/else`和`switch`语句。清单 4-21 展示了两者的用法，这对大多数开发者来说都是熟悉的。
let name = "Adam";
if (name == "Adam") { console.log("Name is Adam"); } else if (name == "Jacqui") { console.log("Name is Jacqui"); } else { console.log("Name is neither Adam or Jacqui"); }
switch (name) { case "Adam": console.log("Name is Adam"); break; case "Jacqui": console.log("Name is Jacqui"); break; default: console.log("Name is neither Adam or Jacqui"); break; }
Listing 4-21Using Conditional Statements in the main.js File in the src Folder
此示例产生以下结果:
Name is Adam Name is Adam
### 相等运算符与相同运算符
等式和等式运算符特别值得注意。相等运算符将尝试将操作数强制(转换)为相同的类型来评估相等性。这是一个方便的特性，只要你意识到它正在发生。清单 4-22 展示了等式操作符的作用。
let firstVal = 5; let secondVal = "5";
if (firstVal == secondVal) { console.log("They are the same"); } else { console.log("They are NOT the same"); }
Listing 4-22Using the Equality Operator in the main.js File in the src Folder
该示例的输出如下:
They are the same
JavaScript 将两个操作数转换成相同的类型，并对它们进行比较。本质上，相等运算符测试值是否相同，而不管它们的类型如何。如果你想测试确保值*和*的类型是相同的，那么你需要使用恒等运算符(`===`，三个等号，而不是两个等号的运算符)，如清单 4-23 所示。
let firstVal = 5; let secondVal = "5";
if (firstVal === secondVal) {
console.log("They are the same");
} else { console.log("They are NOT the same"); }
Listing 4-23Using the Identity Operator in the main.js File in the src Folder
在本例中，identity 运算符将认为这两个变量是不同的。该运算符不强制类型。结果如下:
They are NOT the same
### 显式转换类型
字符串连接操作符(`+`)优先于加法操作符(还有`+`)，这意味着 JavaScript 将优先于加法连接变量。这可能会造成混乱，因为 JavaScript 也会自由地转换类型以产生结果——而不总是预期的结果，如清单 4-24 所示。
let myData1 = 5 + 5;
let myData2 = 5 + "5";
console.log("Result 1:" + myData1); console.log("Result 2:" + myData2);
Listing 4-24String Concatentation Operator Precedence in the main.js File in the src Folder
这些语句会产生以下结果:
Result 1: 10 Result 2: 55
第二种结果是引起混乱的那种。通过运算符优先级和过急类型转换的组合，原本应该是加法运算的操作被解释为字符串串联。为了避免这种情况，可以显式转换值的类型，以确保执行正确的操作，如以下部分所述。
#### 将数字转换为字符串
如果您正在处理多个数字变量，并希望将它们连接成字符串，那么您可以使用`toString`方法将数字转换成字符串，如清单 4-25 所示。
let myData1 = (5).toString() + String(5);
console.log("Result:" + myData1);
Listing 4-25Using the number.toString Method in the main.js File in the src Folder
注意，我将数值放在括号中，然后调用了`toString`方法。这是因为在调用`number`类型定义的方法之前，您必须允许 JavaScript 将文字值转换成`number`。我还展示了实现相同效果的另一种方法，即调用`String`函数，并将数值作为参数传入。这两种技术具有相同的效果，都是将一个`number`转换成一个`string`，这意味着`+`操作符用于字符串连接而不是加法。该脚本的输出如下:
Result: 55
还有一些其他的方法可以让你更好地控制一个数字如何被表示成一个字符串。我在表 4-4 中简要描述了这些方法。表格中显示的所有方法都由`number`类型定义。
表 4-4
有用的数字到字符串的方法
<colgroup><col class="tcol1 align-left"> <col class="tcol2 align-left"></colgroup>
|
方法
|
描述
|
| --- | --- |
| `toString()` | 此方法返回一个表示以 10 为基数的数字的字符串。 |
| `toString(2)``toString(8)``toString(16)` | 此方法返回以二进制、八进制或十六进制表示法表示数字的字符串。 |
| `toFixed(n)` | 该方法返回一个表示小数点后有`n`位的实数的字符串。 |
| `toExponential(n)` | 该方法返回一个字符串，该字符串使用指数表示法表示一个数字，小数点前有一位数字，小数点后有`n`位数字。 |
| `toPrecision(n)` | 该方法返回一个字符串，该字符串表示一个具有`n`个有效数字的数字，如果需要，可以使用指数符号。 |
#### 将字符串转换为数字
补充技术是将字符串转换为数字，这样您就可以执行加法而不是连接。你可以用`Number`函数来实现，如清单 4-26 所示。
let firstVal = "5"; let secondVal = "5";
let result = Number(firstVal) + Number(secondVal); console.log("Result:" + result);
Listing 4-26Converting Strings to Numbers in the main.js File in the src Folder
该脚本的输出如下:
Result: 10
`Number`函数解析字符串值的方式很严格，但是您可以使用另外两个更灵活的函数，它们会忽略后面的非数字字符。这些功能是`parseInt`和`parseFloat`。我已经在表 4-5 中描述了所有三种方法。
表 4-5
对数字方法有用的字符串
<colgroup><col class="tcol1 align-left"> <col class="tcol2 align-left"></colgroup>
|
方法
|
描述
|
| --- | --- |
| `Number(str)` | 此方法分析指定的字符串以创建整数或实数值。 |
| `parseInt(str)` | 此方法分析指定的字符串以创建整数值。 |
| `parseFloat(str)` | 此方法分析指定的字符串以创建整数或实数值。 |
## 使用数组
JavaScript 数组的工作方式类似于大多数其他编程语言中的数组。清单 4-27 展示了如何创建和填充一个数组。
let myArray = new Array();
myArray[0] = 100;
myArray[1] = "Adam";
myArray[2] = true;
Listing 4-27Creating and Populating an Array in the main.js File in the src Folder
我通过调用`new Array()`创建了一个新数组。这创建了一个空数组，我将它赋给了变量`myArray`。在随后的语句中，我为数组中的不同索引位置赋值。(这个清单没有输出。)
在这个例子中有一些事情需要注意。首先，在创建数组时，我不需要声明数组中的项数。JavaScript 数组会自动调整大小以容纳任意数量的项目。第二点是，我不必声明数组将保存的数据类型。任何 JavaScript 数组都可以包含任何混合的数据类型。在这个例子中，我给数组分配了三个项目:一个`number`、一个`string`和一个`boolean`。
### 使用数组文本
array literal 样式允许您在一条语句中创建和填充一个数组，如清单 4-28 所示。
let myArray = [100, "Adam", true];
Listing 4-28Using the Array Literal Style in the main.js File in the src Folder
在这个例子中，我通过在方括号(`[`和`]`)之间指定我想要的数组中的项目，指定了应该给`myArray`变量分配一个新的数组。(这个清单中没有控制台输出。)
### 读取和修改数组的内容
使用方括号(`[`和`]`)读取给定索引处的值，将所需的索引放在括号之间，如清单 4-29 所示。
let myArray = [100, "Adam", true];
console.log(Index 0: ${myArray[0]});
Listing 4-29Reading the Data from an Array Index in the main.js File in the src Folder
只需给索引赋值，就可以修改 JavaScript 数组中任何位置的数据。就像常规变量一样，您可以在索引处切换数据类型，不会有任何问题。清单的输出如下所示:
Index 0: 100
清单 4-30 展示了如何修改一个数组的内容。
let myArray = [100, "Adam", true];
myArray[0] = "Tuesday";
console.log(Index 0: ${myArray[0]});
Listing 4-30Modifying the Contents of an Array in the main.js File in the src Folder
在这个例子中，我将一个`string`赋值给数组中的位置`0`，这个位置以前是由一个`number`持有的，并产生以下输出:
Index 0: Tuesday
### 枚举数组的内容
使用一个`for`循环或者使用`forEach`方法来枚举数组的内容，该方法接收一个被调用来处理数组中每个元素的函数。两种方法如清单 4-31 所示。
let myArray = [100, "Adam", true];
for (let i = 0; i < myArray.length; i++) {
console.log(Index ${i}: ${myArray[i]});
}
console.log("---");
myArray.forEach((value, index) => console.log(Index ${index}: ${value}));
Listing 4-31Enumerating the Contents of an Array in the main.js File in the src Folder
JavaScript `for`循环的工作方式与许多其他语言中的循环一样。使用`length`属性确定数组中有多少个元素。
传递给`forEach`方法的函数有两个参数:要处理的当前项的值和该项在数组中的位置。在这个清单中，我使用了一个 arrow 函数作为`forEach`方法的参数，这是它们擅长的一种用法(您将在本书中看到这种用法)。清单的输出如下所示:
Index 0: 100 Index 1: Adam Index 2: true
Index 0: 100 Index 1: Adam Index 2: true
### 使用扩展运算符
spread 运算符用于扩展数组，以便其内容可以用作函数参数。清单 4-32 定义了一个函数，该函数接受多个参数，并使用数组中的值调用它，使用或不使用 spread 运算符。
function printItems(numValue, stringValue, boolValue) {
console.log(Number: ${numValue});
console.log(String: ${stringValue});
console.log(Boolean: ${boolValue});
}
let myArray = [100, "Adam", true];
printItems(myArray[0], myArray[1], myArray[2]);
printItems(...myArray);
Listing 4-32Using the Spread Operator in the main.js File in the src Folder
spread 操作符是一个省略号(三个句点的序列)，它导致数组被解包并作为单独的参数传递给`printItems`函数。
... printItems(...myArray); ...
spread 操作符还可以很容易地将数组连接在一起，如清单 4-33 所示。
let myArray = [100, "Adam", true]; let myOtherArray = [200, "Bob", false, ...myArray];
myOtherArray.forEach((value, index) => console.log(Index ${index}: ${value}));
Listing 4-33Concatenating Arrays in the main.js File in the src Folder
使用 spread 操作符，我可以在定义`myOtherArray`时将`myArray`指定为一个项，结果是第一个数组的内容将被解包并作为项添加到第二个数组中。此示例产生以下结果:
Index 0: 200 Index 1: Bob Index 2: false Index 3: 100 Index 4: Adam Index 5: true
### 使用内置数组方法
JavaScript `Array`对象定义了许多可以用来处理数组的方法，表 4-6 中描述了其中最有用的方法。
表 4-6
有用的数组方法
<colgroup><col class="tcol1 align-left"> <col class="tcol2 align-left"></colgroup>
|
方法
|
描述
|
| --- | --- |
| `concat(otherArray)` | 此方法返回一个新数组，该数组将调用它的数组与指定为参数的数组连接起来。可以指定多个数组。 |
| `join(separator)` | 该方法将数组中的所有元素连接起来形成一个字符串。该参数指定用于分隔各项的字符。 |
| `pop()` | 此方法移除并返回数组中的最后一项。 |
| `shift()` | 此方法移除并返回数组中的第一个元素。 |
| `push(item)` | 此方法将指定的项追加到数组的末尾。 |
| `unshift(item)` | 此方法在数组的开头插入一个新项。 |
| `reverse()` | 此方法返回一个新数组，该数组包含逆序排列的项。 |
| `slice(start,end)` | 此方法返回数组的一部分。 |
| `sort()` | 此方法对数组进行排序。可选的比较功能可用于执行自定义比较。 |
| `splice(index, count)` | 该方法从指定的`index`开始，从数组中移除`count`项。移除的项作为方法的结果返回。 |
| `unshift(item)` | 此方法在数组的开头插入一个新项。 |
| `every(test)` | 该方法为数组中的每一项调用`test`函数，如果函数为所有项返回`true`，则返回`true`，否则返回 false。 |
| `some(test)` | 如果为数组中的每一项调用`test`函数至少返回一次`true`，则该方法返回`true`。 |
| `filter(test)` | 该方法返回一个新数组，其中包含了`test`函数返回的`true`项。 |
| `find(test)` | 该方法返回数组中第一个项目，对于该项目，`test`函数返回`true`。 |
| `findIndex(test)` | 该方法返回数组中第一项的索引，对于该数组，`test`函数返回`true`。 |
| `forEach(callback)` | 这个方法为数组中的每一项调用`callback`函数，如前一节所述。 |
| `includes(value)` | 如果数组包含指定的值，这个方法返回`true`。 |
| `map(callback)` | 该方法返回一个新数组，其中包含为数组中的每一项调用`callback`函数的结果。 |
| `reduce(callback)` | 该方法返回通过调用回调函数为数组中的每一项生成的累计值。 |
由于表 4-6 中的许多方法返回一个新数组，这些方法可以链接在一起处理数据，如清单 4-34 所示。
let products = [ { name: "Hat", price: 24.5, stock: 10 }, { name: "Kayak", price: 289.99, stock: 1 }, { name: "Soccer Ball", price: 10, stock: 0 }, { name: "Running Shoes", price: 116.50, stock: 20 } ];
let totalValue = products .filter(item => item.stock > 0) .reduce((prev, item) => prev + (item.price * item.stock), 0);
console.log(Total value: $${totalValue.toFixed(2)});
Listing 4-34Processing an Array in the main.js File in the src Folder
我使用`filter`方法选择数组中`stock`值大于零的项目，并使用`reduce`方法确定这些项目的总值，产生以下输出:
Total value: $2864.99
## 使用对象
有几种方法可以在 JavaScript 中创建对象。清单 4-35 给出了一个简单的例子。
let myData = new Object(); myData.name = "Adam"; myData.weather = "sunny";
console.log(Hello ${myData.name}.);
console.log(Today is ${myData.weather}.);
Listing 4-35Creating an Object in the main.js File in the src Folder
我通过调用`new Object()`创建一个对象，并将结果(新创建的对象)赋给一个名为`myData`的变量。一旦创建了对象，我就可以通过赋值来定义对象的属性，就像这样:
...
myData.name = "Adam";
...
在这个语句之前，我的对象没有名为`name`的属性。当语句执行后，该属性确实存在，并被赋予了值`Adam`。您可以通过将变量名和属性名与句点组合来读取属性值，如下所示:
...
console.log(Hello ${myData.name}.);
...
清单的结果如下:
Hello Adam. Today is sunny.
### 使用对象文字
您可以使用对象文字格式在一个步骤中定义一个对象及其属性，如清单 4-36 所示。
let myData = {
name: "Adam",
weather: "sunny"
};
console.log(Hello ${myData.name}.);
console.log(Today is ${myData.weather}.);
Listing 4-36Using the Object Literal Format in the main.js File in the src Folder
使用冒号(`:`)将您要定义的每个属性与其值分开，使用逗号(`,`)将属性分开。效果与前面的示例相同，清单的结果如下:
Hello Adam. Today is sunny.
#### 使用变量作为对象属性
如果使用变量作为对象属性，JavaScript 将使用变量名作为属性名，变量值作为属性值，如清单 4-37 所示。
let name = "Adam"
let myData = { name,
weather: "sunny" };
console.log(Hello ${myData.name}.);
console.log(Today is ${myData.weather}.);
Listing 4-37Using a Variable in an Object Literal in the main.js File in the src Folder
`name`变量用于给`myData`对象添加一个属性；该房产名为`name`，其价值为`Adam`。当您想要将一组数据值组合成一个对象时，这是一种有用的技术，您将在后面章节的示例中看到它的使用。清单 4-37 中的代码产生以下输出:
Hello Adam. Today is sunny.
### 将函数用作方法
我最喜欢 JavaScript 的一个特性是可以向对象添加函数。定义在对象上的函数被称为*方法*。清单 4-38 展示了如何以这种方式添加方法。
let myData = { name: "Adam", weather: "sunny", printMessages: function () {
console.log(`Hello ${myData.name}.`);
console.log(`Today is ${myData.weather}.`);
}
};
myData.printMessages();
Listing 4-38Adding Methods to an Object in the main.js File in the src Folder
在这个例子中，我使用了一个函数来创建一个名为`printMessages`的方法。注意，为了引用对象定义的属性，我必须使用`this`关键字。当一个函数作为一个方法使用时，该函数通过特殊变量`this`被隐式传递给调用该方法的对象作为参数。清单的输出如下所示:
Hello Adam. Today is sunny.
您也可以不使用`function`关键字来定义方法，如清单 4-39 所示。
let myData = { name: "Adam", weather: "sunny", printMessages() {
console.log(`Hello ${myData.name}.`);
console.log(`Today is ${myData.weather}.`);
}
};
myData.printMessages();
Listing 4-39Defining a Method in the main.js File in the src Folder
至少在我看来，这是一种更自然的定义方法的方式，我在本书的许多例子中都使用了这种方法。该清单的输出如下:
Hello Adam. Today is sunny.
### 将属性从一个对象复制到另一个对象
在后面章节的例子中，我需要将所有属性从一个对象复制到另一个对象，以演示不同的 Vue.js 特性。JavaScript 为此提供了`Object.assign`方法，如清单 4-40 所示。
let myData = {
name: "Adam",
weather: "sunny",
printMessages() {
console.log(Hello ${myData.name}.);
console.log(Today is ${myData.weather}.);
}
};
let secondObject = {};
Object.assign(secondObject, myData);
secondObject.printMessages();
Listing 4-40Copying Object Properties in the main.js File in the src Folder
这个示例创建一个没有属性的新对象，并使用`Object.assign`方法从`myData`对象中复制属性及其值。此示例产生以下输出:
Hello Adam. Today is sunny.
## 理解 JavaScript 模块
前一章中的例子包含在一个 JavaScript 文件中。这对于简单的例子来说没问题，但是复杂的 web 应用可能包含大量的代码和内容，这是不可能在一个文件中管理的。
为了将应用分成更易管理的块，JavaScript 支持*模块*，其中包含应用其他部分所依赖的 JavaScript 代码。在接下来的部分中，我将解释定义和使用模块的不同方式。
### 创建和使用简单的 JavaScript 模块
模块通常在它们自己的文件夹中定义，所以我创建了`src/maths`文件夹，并在其中添加了一个名为`sum.js`的文件，内容如清单 4-41 所示。
export default function(values) { return values.reduce((total, val) => total + val, 0); }
Listing 4-41The Contents of the sum.js File in the src/maths Folder
`sum.js`文件包含一个函数，该函数接受一组值，并使用 JavaScript array `reduce`方法对它们求和并返回结果。这个例子的重要之处不在于它做了什么，而在于函数是在自己的文件中定义的，这是模块的基本构造块。
清单 4-41 中使用了两个你在定义模块时会经常遇到的关键字。`export`关键字用于表示模块外部可用的特性。默认情况下，JavaScript 文件的内容是私有的，必须使用关键字`export`显式共享，然后才能在应用的其余部分使用。当模块包含单个特性时，使用`default`关键字，例如清单 4-41 中使用的函数。`export`和`default`关键字一起用于指定`sum.js`文件中的唯一函数可用于应用的其余部分。
#### 使用简单的 JavaScript 模块
使用模块需要另一个关键字:`import`关键字。在清单 4-42 中，我使用了`import`关键字来访问上一节中定义的函数，以便它可以在`main.js`文件中使用。
import additionFunction from "./maths/sum";
let values = [10, 20, 30, 40, 50];
let total = additionFunction(values);
console.log(Total: ${total});
Listing 4-42Using a Simple JavaScript Module in the main.js File in the src Folder
`import`关键字用于声明对模块的依赖。`import`关键字可以有多种用法，但这是您在处理自己创建的模块时最常使用的格式。图 4-3 示出了关键零件。
图 4-3
声明对模块的依赖
`import`关键字后面是一个标识符，它是函数被使用时的名字；这个例子中的标识符是`additionFunction`。
### 小费
请注意，应用标识符的是`import`语句，这意味着使用模块中函数的代码选择它将被识别的名称，并且应用不同部分中同一模块的多个`import`语句可以使用不同的名称来引用同一函数。
`from`关键字跟在标识符后面，然后是模块的位置。密切关注位置很重要，因为不同的位置格式会产生不同的行为，如侧栏中所述。
在构建过程中，Vue.js 工具将检测到`import`语句，并将`sum.js`文件中的函数包含在发送给浏览器的 JavaScript 文件中，以便浏览器可以执行应用。在`import`语句中使用的标识符可以用来访问模块中的函数，就像使用本地定义的函数一样。
... let total = additionFunction(values); ...
如果您检查浏览器的 JavaScript 控制台，您会看到清单 4-42 中的代码使用该模块的函数产生以下结果:
Total: 150
### 了解模块位置
模块的位置改变了构建工具在创建发送到浏览器的 JavaScript 文件时查找模块的方式。对于您自己定义的模块，位置被指定为相对路径，以一个或两个句点开始，表示该路径相对于当前文件或当前文件的父目录。在清单 4-42 中，位置以句点开始。
... import additionFunction from "./maths/sum"; ...
这个位置告诉构建工具在`sum`模块上有一个依赖项，这个模块可以在`maths`文件夹中找到，这个文件夹与包含导入语句的文件在同一个目录中(注意文件扩展名没有包含在这个位置中)。
指定相对于当前文件的路径的另一种方法是相对于项目文件夹导航，如下所示:
... import additionFunction from "@/maths/sum"; ...
当位置以`@`字符为前缀时，模块相对于`src`文件夹定位。
如果您省略了初始句点和`@`字符，那么`import`语句声明了对`node_modules`文件夹中的一个模块的依赖，该文件夹是在项目设置期间安装的包的安装位置。这种位置用于访问第三方包提供的功能，包括 Vue.js 包，这就是为什么您会在 Vue.js 项目中看到这样的语句:
... import Vue from "vue"; ...
这个`import`语句的位置不是以句点开始的，它将被解释为对项目的`node_modules`文件夹中的`vue`模块的依赖，该文件夹是提供核心 Vue.js 应用特性的包。
### 在模块中定义多个特征
模块可以包含一个以上的函数或值，这对相关特性的分组很有用。为了演示，我在`src/maths`文件夹中创建了一个名为`operations.js`的文件，并添加了清单 4-43 中所示的代码。
export function multiply(values) { return values.reduce((total, val) => total * val, 1); }
export function subtract(amount, values) { return values.reduce((total, val) => total - val, amount); }
export function divide(first, second) { return first / second; }
Listing 4-43The Contents of the operations.js File in the src/maths Folder
该模块定义了三个应用了关键字`export`的函数。与前面的例子不同，没有使用`default`关键字，每个函数都有自己的名称。当使用包含多个功能的模块时，需要不同的方法，如清单 4-44 所示。
import additionFunction from "./maths/sum";
import { multiply, subtract } from "./maths/operations";
let values = [10, 20, 30, 40, 50];
console.log(Sum: ${additionFunction(values)});
console.log(Multiply: ${multiply(values)});
console.log(Subtract: ${subtract(1000, values)});
Listing 4-44Using a Module in the main.js File in the src Folder
`import`关键字后面的括号包围了我要使用的函数列表，在本例中是用逗号分隔的`multiply`和`subtract`函数。我只声明对我需要的函数的依赖，对`divide`函数没有依赖，它在模块中定义，但在清单 4-44 中没有使用。此示例产生以下输出:
Sum: 150 Multiply: 12000000 Subtract: 850
#### 更改模块功能名称
这种方法的一个不同之处是，函数使用的名称现在是由模块定义的，而不是由使用函数的代码定义的。如果您不想使用模块提供的名称，那么您可以使用`as`关键字指定一个名称，如清单 4-45 所示。
import additionFunction from "./maths/sum";
import { multiply, subtract as minus } from "./maths/operations";
let values = [10, 20, 30, 40, 50];
console.log(Sum: ${additionFunction(values)});
console.log(Multiply: ${multiply(values)});
console.log(Subtract: ${minus(1000, values)});
Listing 4-45Using a Module Alias in the main.js File in the src Folder
我使用了`as`关键字来指定`subtract`函数在导入到`main.js`文件时应该被命名为`minus`。该清单产生与清单 4-44 相同的输出。
#### 导入整个模块
列出一个模块中所有函数的名称对于复杂的模块来说是无法控制的。一种更优雅的方法是导入一个模块提供的所有特性，并只使用您需要的特性，如清单 4-46 所示。
import additionFunction from "./maths/sum";
import * as ops from "./maths/operations";
let values = [10, 20, 30, 40, 50];
console.log(Sum: ${additionFunction(values)});
console.log(Multiply: ${ops.multiply(values)});
console.log(Subtract: ${ops.subtract(1000, values)});
Listing 4-46Importing an Entire Module in the main.js File in the src Folder
星号用于导入模块中的所有内容，后跟关键字`as`和一个标识符，通过它可以访问模块函数和值。在这种情况下，标识符是`ops`，这意味着`multiply`、`subtract`和`divide`功能可以作为`ops.multiply`、`ops.subtract`和`ops.divide`来访问。该清单产生与清单 4-44 相同的输出。
### 在一个模块中组合多个文件
模块可以跨越多个文件，并通过定义一个`index.js`文件来组合，该文件集合了模块将提供给应用其余部分的特性。我在`src/maths`文件夹中添加了一个`index.js`文件，代码如清单 4-47 所示。
import addition from "./sum";
export function mean(values) { return addition(values)/values.length; }
export { addition }; export * from "./operations";
Listing 4-47The Contents of the index.js File in the src/maths Folder
这个文件以与前面的例子相同的方式开始，用一个`import`语句声明对`sum.js`文件中的函数的依赖，这个函数用在名为`mean`的导出函数中。
该语句从`sum.js`文件中导出函数，以便可以在模块外部使用。我不需要为这个函数指定位置，因为它已经被导入了，在这种情况下，函数包含在大括号中。
最后一条语句导出在`operations.js`文件中定义的所有特征，而不需要先导入它们。当您想在模块外部使用特性，但不需要在`index.js`文件中直接使用它们时，这很有用。
使用一个`index.js`文件允许所有的特性在一条语句中被导入到`main.js`文件中，如清单 4-48 所示。
import * as math from "./maths";
let values = [10, 20, 30, 40, 50];
console.log(Sum: ${math.addition(values)});
console.log(Multiply: ${math.multiply(values)});
console.log(Subtract: ${math.subtract(1000, values)});
console.log(Mean: ${math.mean(values)});
Listing 4-48Importing an Entire Module in the main.js File in the src Folder
`import`的位置没有指定文件，这是一个简化的语句。在这个例子中，所有的模块特性都可以通过`math`标识符来访问，而不需要知道模块中的哪个文件定义了每个特性。此示例产生以下输出:
Sum: 150 Multiply: 12000000 Subtract: 850 Mean: 30
#### 从多文件模块导入单个特征
您不必从一个模块中导入所有的特性，即使它是用几个文件定义的。在清单 4-49 中，我修改了`import`语句，以便只导入示例中使用的函数，并且我使用了`as`关键字来演示函数可以被重命名。
import { addition as add, multiply, subtract, mean as average} from "./maths";
let values = [10, 20, 30, 40, 50];
console.log(Add: ${add(values)});
console.log(Multiply: ${multiply(values)});
console.log(Subtract: ${subtract(1000, values)});
console.log(Average : ${average(values)});
Listing 4-49Importing Specific Features in the main.js File in the src Folder
这个例子结合了前面清单中的特性，从模块中导入四个函数，并重命名其中的两个。此示例产生以下输出:
Add: 150 Multiply: 12000000 Subtract: 850 Average : 30
## 理解 JavaScript 承诺
一个*承诺*是一个将在未来某个时间点完成的后台活动。在本书中，承诺最常见的用法是使用 HTTP 请求来请求数据，这是异步执行的，当从 web 服务器收到响应时会产生一个结果。
### 理解异步操作问题
web 应用的经典异步操作是 HTTP 请求，通常用于获取用户需要的数据和内容。我将很快讨论 HTTP 请求，但是我需要一些更简单的东西来开始，所以我在`maths`模块的`index.js`文件中添加了一个函数来异步执行任务，如清单 4-50 所示。
import addition from "./sum";
export function mean(values) { return addition(values)/values.length; }
export { addition }; export * from "./operations";
export function asyncAdd(values) {
setTimeout(() => {
let total = addition(values);
console.log(`Async Total: ${total}`);
return total;
}, 500);
}
Listing 4-50Adding a Function in the index.js File in the src/maths Folder
`setTimeout`函数在指定的延迟后异步调用一个函数。在清单中，`asyncAdd`函数接收一个参数，该参数在 500 毫秒的延迟后被传递给`addition`函数，为本章中的示例创建一个不会立即完成的后台操作，并表示更有用的操作，比如发出一个 HTTP 请求。在清单 4-51 中，我已经更新了`main.js`文件以使用`asyncAdd`函数。
import { asyncAdd } from "./maths";
let values = [10, 20, 30, 40, 50];
let total = asyncAdd(values);
console.log(Main Total: ${total});
Listing 4-51Performing Background Work in the main.js File in the src Folder
这个例子说明的问题是，`asyncAdd`函数的结果直到`main.js`文件中的语句被执行后才产生，这可以在浏览器的 JavaScript 控制台的输出中看到:
Main Total: undefined Async Total: 150
浏览器执行`main.js`文件中的语句，并按照指示调用`asyncAdd`函数。浏览器移动到`main.js`文件中的下一条语句，该语句使用`asyncAdd`提供的结果向控制台写入一条消息——但这发生在异步任务完成之前，这就是为什么输出是`undefined`。异步任务随后完成，但是结果被`main.js`文件使用已经太晚了。
### 使用 JavaScript Promise
为了解决上一节中的问题，我需要一种机制，允许我观察异步任务，以便我可以等待它完成，然后写出结果。这就是 JavaScript promise 的作用，我已经将它应用于清单 4-52 中的`asyncAdd`函数。
import addition from "./sum";
export function mean(values) { return addition(values)/values.length; }
export { addition }; export * from "./operations";
export function asyncAdd(values) { return new Promise((callback) => {
setTimeout(() => {
let total = addition(values);
console.log(`Async Total: ${total}`);
callback(total);
}, 500);
});
}
Listing 4-52Using a Promise in the index.js File in the src/maths Folder
在这个例子中很难解开函数。`new`关键字用于创建一个`Promise`，它接受要观察的函数。观察到的函数提供了一个回调，当异步任务完成时调用该回调，并接受任务的结果作为参数。调用回调函数被称为*解析*承诺。
已经成为`asyncAdd`函数结果的`Promise`对象允许观察异步任务，以便在任务完成时执行后续工作，如清单 4-53 所示。
import { asyncAdd } from "./maths";
let values = [10, 20, 30, 40, 50];
asyncAdd(values).then(total => console.log(Main Total: ${total}));
Listing 4-53Observing a Promise in the main.js File in the src Folder
`then`方法接受一个函数，该函数将在使用回调时被调用。传递给回调的结果被提供给`then`函数。在这种情况下，这意味着在异步任务完成并产生以下输出之前，总数不会写入浏览器的 JavaScript 控制台:
Async Total: 150 Main Total: 150
### 简化异步代码
JavaScript 提供了两个关键字——`async`和`await`——支持异步操作，而不必直接使用承诺。在清单 4-54 中，我在`main.js`文件中应用了这些关键字。
### 警告
理解使用`async` / `await`不会改变应用的行为方式是很重要的。操作仍然是异步执行的，直到操作完成，结果才可用。这些关键字只是为了简化异步代码的工作，这样你就不必使用`then`方法了。
import { asyncAdd } from "./maths";
let values = [10, 20, 30, 40, 50];
async function doTask() {
let total = await asyncAdd(values);
console.log(`Main Total: ${total}`);
}
doTask();
Listing 4-54Using async and await in the main.js File in the src Folder
这些关键字只能应用于函数，这就是为什么我在清单中添加了`doTask`函数。`async`关键字告诉 JavaScript 这个函数依赖于需要承诺的功能。在调用返回承诺的函数时使用`await`关键字，其作用是将提供的结果分配给`Promise`对象的回调，然后执行后面的语句，产生以下结果:
Async Total: 150 Main Total: 150
## 摘要
在这一章中，我提供了一个关于 JavaScript 的简单入门，重点放在核心功能上，它将帮助你开始 Vue.js 开发。在下一章中，我将开始构建一个更加复杂和现实的项目，名为 SportsStore。
