_ 作者选择了开源精神疾病作为写给捐赠计划的一部分的捐赠。

介绍

在Vue.js开发中,客户端的网页浏览器会读取HTML和JavaScript,并使得网页基于开发者为其编写的指令. 但网页或应用程序不仅需要处理数据,还需要处理用户互动. 要做到这一点,开发人员使用在用户与HTML元素交互时执行代码的[JavaScript中_events_(https://andsky.com/tech/tutorials/understanding-events-in-javascript).

一个事件可以通过用户界面按钮或物理键盘或鼠标捕捉用户的任何交互。在JavaScript中,你会创建 event listeners等待该事件发生,然后执行代码块。在Vue.js中,你不需要听到一个事件;这是通过v-on:指令自动完成的。

在本教程中,您将使用 Vue 中的事件创建一个机场代码应用程序. 当用户选择机场代码时,该应用程序将该机场添加到喜爱集合中。

前提条件

要完成本教程,您将需要:

在您的计算机上安装了`14.17.0'或以上的节点。要在macOS或Ubuntu 20.04上安装,请遵循macOS上的如何安装节点和创建本地开发环境或[在Ubuntu 20.04上安装节点的PPA 部分(https://andsky.com/tech/tutorials/how-to-install-node-js-on-ubuntu-20-04)。
Vue CLI 安装在您的机器上,方法是遵循Sep 1 [如何用Vue CLI (https://andsky.com/tech/tutorials/how-to-generate-a-vue-js-single-page-app-with-vue-create)来生成一个Vue.js 单页 App (Vue CLI). 你会用它来创建您的此教程的第一步为 Vue 应用程序。
联合国您还需要JavaScript, HTML, CSS 的基本知识, 您可以在 [How To Build a website With HTML (https://www.digitalocean.com/community/tutorial_series/how-to-build-a-website-with-html) 系列, [How To Build a website With CSS (https://www.digitalocean.com/community/tutorial_series/how-to-build-a-website-with-css) 系列, 以及 [How To Code in JavaScript (https://www.digitalocean.com/community/tutorial_series/how-to-code-in-javascript) 中找到这些知识。 .

步骤1 - 设置项目

本教程的第一步将是设置一个演示项目,在视图中显示一些数据. 这将包括包含空港数据的 JavaScript 对象的 array和一个 Vue component来重复和渲染数据。

首先,使用 Vue CLI 生成一个项目:

1vue create favorite-airports

这将创建一个名为favorite-airports的项目,本教程将使用Vue 3,因此当提示时,请选择Default (Vue 3) ([Vue 3] babel, eslint)选项:

1[secondary_label Output]
2Vue CLI v4.5.6
3? Please pick a preset:
4  Default ([Vue 2] babel, eslint)
5❯ Default (Vue 3) ([Vue 3] babel, eslint)
6  Manually select features

一旦您创建了项目,创建一个目录,以保持该项目的所有本地数据。

1cd favorite-airports

接下来,在src目录中创建一个数据目录:

1mkdir src/data

在所选的文本编辑器中,打开名为 `src/data/airports.js 的文件。

 1[label favorite-airports/src/data/airports.js]
 2export default [
 3  {
 4    name: 'Cincinnati/Northern Kentucky International Airport',
 5    abbreviation: 'CVG',
 6    city: 'Hebron',
 7    state: 'KY',
 8  },
 9  {
10    name: 'Seattle-Tacoma International Airport',
11    abbreviation: 'SEA',
12    city: 'Seattle',
13    state: 'WA',
14  },
15  {
16    name: 'Minneapolis-Saint Paul International Airport',
17    abbreviation: 'MSP',
18    city: 'Bloomington',
19    state: 'MN',
20  },
21  {
22    name: 'Louis Armstrong New Orleans International Airport',
23    abbreviation: 'MSY',
24    city: 'New Orleans',
25    state: 'LA',
26  },
27  {
28    name: `Chicago O'hare International Airport`,
29    abbreviation: 'ORD',
30    city: 'Chicago',
31    state: 'IL',
32  },
33  {
34    name: `Miami International Airport`,
35    abbreviation: 'MIA',
36    city: 'Miami',
37    state: 'FL',
38  }
39]

这些数据是一组由美国几个机场组成的对象,接下来,您将重复这些数据,生成由名称、缩写、城市和州属性组成的卡片。

保存并关闭airport.js文件。

要渲染数据,创建一个单文件组件(SFC)名为src/components/AirportCard.vue,并在文本编辑器中打开它。

将以下内容添加到文件中:

 1[label favorite-airports/src/components/AirportCard.vue]
 2<template>
 3  <div class="airport">
 4    <p>{{ airport.abbreviation }}</p>
 5    <p>{{ airport.name }}</p>
 6    <p>{{ airport.city }}, {{ airport.state }}</p>
 7  </div>
 8</template>
 9
10<script>
11export default {
12  props: {
13    airport: {
14      type: Object,
15      required: true
16    }
17  }
18}
19</script>
20
21<style scoped>
22.airport {
23  border: 3px solid;
24  border-radius: .5rem;
25  padding: 1rem;
26}
27
28.airport p:first-child {
29  font-weight: bold;
30  font-size: 2.5rem;
31  margin: 1rem 0;
32}
33
34.airport p:last-child {
35  font-style: italic;
36  font-size: .8rem;
37}
38</style>

此组件包含一个 prop,在 Vue.js 中,它是将数据从父母组件传递到儿童组件的一种方式。模板部分然后渲染这些数据。有关单个文件组件的更多信息,请参阅如何使用 Vue 单个文件组件创建可重复使用的代码块。

在AirportCard.vue组件中,包装器<div>包含了机场的类别。本CSS通过添加边界来增加生成的HTML,使每个机场看起来像一个卡片。

保存文件并离开您的文本编辑器。

接下来,修改现有的App.vue组件,重复通过airports.js数据并渲染一系列AirportCards.vue组件。

 1[label favorite-airports/src/App.vue]
 2<template>
 3  <div class="wrapper">
 4    <div v-for="airport in airports" :key="airport.abbreviation">
 5      <airport-card :airport="airport" />
 6    </div>
 7  </div>
 8</template>
 9
10<script>
11import { ref } from 'vue'
12import allAirports from '@/data/airports.js'
13import AirportCard from '@/components/AirportCard.vue'
14
15export default {
16  components: {
17    AirportCard
18  },
19  setup() {
20    const airports = ref(allAirports)
21    return { airports }
22  }
23}
24</script>
25
26<style>
27#app {
28  font-family: Avenir, Helvetica, Arial, sans-serif;
29  -webkit-font-smoothing: antialiased;
30  -moz-osx-font-smoothing: grayscale;
31  text-align: center;
32  color: #2c3e50;
33  margin-top: 60px;
34}
35
36.wrapper {
37  display: grid;
38  grid-template-columns: 1fr 1fr 1fr;
39  grid-column-gap: 1rem;
40  max-width: 960px;
41  margin: 0 auto;
42}
43</style>

这将导入数据和SFC,然后使用v-for指令对数据进行迭代,为airport.js数组中的每个对象创建一个机场地图。

保存和退出文件. 随着项目现在的设置,使用以下命令运行本地开发服务器:

1npm run serve

这将启动您的本地主机上的服务器,通常在端口:8080,打开您所选择的网页浏览器,然后访问本地主机:8080,以找到以下内容:

A view of the airport data rendered on cards, with the airport abbreviation, full name, and location rendered in black, sans-serif font.

现在您已经设置了样本项目,您将使用v-on指令下一步探索内置的事件。

步骤2 — 通过`v-on`指令聆听事件

如前所述,当用户在[DOM (Document Object Model (https://www.digitalocean.com/community/tutorial_series/understanding-the-dom-document-object-model) 中与 HTML 元素交互时,事件是执行函数的一种方式. 当写出香草JavaScript时,要执行某个事件上的函数,您可以写出一个叫_event 聆听器_. 一个事件收听器是等待该交互发生的函数,然后执行一些代码. 不过,通过Vue,您可为此目的使用v-onDirect。指令是开发者可以用来操纵DOM的可再用代码. " v-on " 指令由Vue.js提供.

在此步骤中,您将在您的应用程序中创建一个函数,该函数在用户点击卡时运行,打开您选择的文本编辑器中的src/components/AirportCard.vue组件。

创建一个函数,通过添加以下突出代码通知机场的用户他们点击了:

 1[label favorite-airports/src/components/AirportCard.vue]
 2...
 3<script>
 4export default {
 5  props: {
 6    airport: {
 7      type: Object,
 8      required: true
 9    }
10  },
11  setup() {
12    function selectAirport(airport) {
13      alert(`You clicked on ${airport.abbreviation}. It's located in ${airport.city}, ${airport.state}.`)
14    }
15
16    return { selectAirport }
17  }
18}
19</script>
20...

在 Vue.js 3 中,需要在设置组件方法中定义和导出反应函数,这告诉 Vue 可以在模板中执行选择Airport函数。

如前所述,您可以使用v-on指令并附加一个名为click的事件;这是 Vue.js 提供的事件。

1[label favorite-airports/src/components/AirportCard.vue]
2<template>
3  <div class="airport" v-on:click="selectAirport(airport)">
4    <p>{{ airport.abbreviation }}</p>
5    <p>{{ airport.name }}</p>
6    <p>{{ airport.city }}, {{ airport.state }}</p>
7  </div>
8</template>
9...

添加此代码后,保存并退出文件。

现在,当您点击卡片时,会出现一个警告,并显示所提供的消息. 例如,如果您点击CVG,您会发现以下内容:

Vue site with alert pop-up that reads "localhost:8080 says You clicked on CVG. It's located in Hebron, KY."

点击事件并不是Vue.js为您提供的唯一事件,事实上,您可以使用任何原生JavaScript事件的v-on,例如:

关键字: 点击点击点击点击点击点击点击点击点击点击点击点击

接下来,你会将这个v-on:click倾听器更改为mouseover,以说明Vue.js如何倾听事件。

再次打开src/components/AirportCard.vue,并使用以下突出代码更新您的文件:

1[label favorite-airports/src/components/AirportCard.vue]
2<template>
3  <div class="airport" @mouseover="selectAirport(airport)">
4    <p>{{ airport.abbreviation }}</p>
5    <p>{{ airport.name }}</p>
6    <p>{{ airport.city }}, {{ airport.state }}</p>
7  </div>
8</template>

如本文所示,Vue 还为 v-on: 事件提供缩写语法. 若要使用缩写语法,您将 v-on 替换为 @. 保存并退出文件。

现在,当您访问localhost:8080并浮动在卡片上时,该函数将执行并显示原始警报。

此功能适用于测试目的,但可能不受欢迎,因为它每次用户转过卡时都会显示警报. 一个更好的体验可能是只在用户首次转过卡时显示它. 在vanilla JavaScript中,您可以跟踪用户转过卡的次数,然后防止进一步执行。

在下一节中,您将探索事件编辑器并使用它们以获得更好的用户体验。

步骤 3 – 使用事件和关键修改

在上一节中,您在点击和鼠标转换事件上执行了一项函数,您还了解了v-on事件的 Vue.js 缩写,现在您将通过将修改器附加到此鼠标转换事件中,以便您的函数只执行一次。

Vue.js 为您提供一系列事件编辑器,其中包括:

.stop: 停止事件扩散 * .prevent: 防止 HTML 元素的默认行为 * .capture: 处理在选定的元素 * .self 之前针对内部元素的事件: 仅在 event.target 是元素本身的情况下启动处理器 * .once: 只执行函数一次 * .passive: 允许元素的默认行为立即发生,而不是等待事件,可用于优化移动设备滚动性能

在文本编辑器中,打开AirportCard.vue组件并将编辑器添加到现有的mouseover事件中:

1[label favorite-airports/src/components/AirportCard.vue]
2<template>
3  <div class="airport" @mouseover.once="selectAirport(airport)">
4    <p>{{ airport.abbreviation }}</p>
5    <p>{{ airport.name }}</p>
6    <p>{{ airport.city }}, {{ airport.state }}</p>
7  </div>
8</template>

访问您的应用程序在浏览器中,你会发现该事件只在第一个鼠标转移事件中一次。

接下来,您将继续使用 key modifiers 来探索编辑器. 这些关键编辑器与按键事件相关联,如keyup。对于下一个部分,想象一下,您想要让这个点击操作更明确一些。

要做到这一点,请将@mouseover更改为@click,然后添加.shift修改器:

1[label favorite-airports/src/components/AirportCard.vue]
2<template>
3  <div class="airport" @click.shift="selectAirport(airport)">
4    <p>{{ airport.abbreviation }}</p>
5    <p>{{ airport.name }}</p>
6    <p>{{ airport.city }}, {{ airport.state }}</p>
7  </div>
8</template>

保存變更並在瀏覽器中開啟應用程式. 如果您點擊卡片而不持有「SHIFT」鍵,警告不會有任何效果.現在,請嘗試在點擊卡片時持有「SHIFT」鍵。

在本节中,您了解了Vue的内置事件以及与这些事件相关的修改程序. 您可以通过这些内置事件完成很多工作,但会有一些时候您需要有自定义事件。

步骤4:创建自定义事件

在 Vue.js 中开发应用程序时,会有一些时候你需要通过自定义事件将数据传递给一个家长组件的时刻。Props是由家长传递给孩子的仅读数据,但通过$emit的自定义操作是相反的。

要将事件从儿童组件发送给家长,您可以使用$emit函数,在实现此之前,本教程将引导您通过一个示例来展示该功能的运作方式。

$emit函数接受两个参数:动作名称(字符串)和要传递给家长的值. 在下面的示例中,当用户点击按钮时,您正在向家长组件发送CVG值,并在favoriteAirport操作下:

1[label ChildComponent.vue]
2<template>
3  <button @click="$emit('favoriteAirport', 'CVG')">A button</button>
4</template>

在主组件中,你会使用v-on指令并听到favoriteAirport事件。

 1[label ParentComponent.vue]
 2<template>
 3  <child-component @favoriteAirport="favoriteAirport = $event" />
 4</template>
 5
 6<script>
 7import { ref } from 'vue'
 8export default {
 9  setup() {
10    const favoriteAirport = ref('')
11
12    return { favoriteAirport }
13  }
14}
15</script>

在这种情况下,$event实际上是CVG,然后您将其存储在名为favoriteAirport的反应数据属性中。

现在你知道一个自定义事件是什么样子,你会通过将这个自定义事件实现到你的应用程序中来实施它。

在您的文本编辑器中打开AirportCards.vue组件. 在@click事件中,删除该函数的引用,并将其替换为$emit(FavoriteAirport,机场)。

1[label favorite-airports/src/components/AirportCard.vue]
2<template>
3  <div class="airport" @click="$emit('favoriteAirport', airport)">
4    <p>{{ airport.abbreviation }}</p>
5    <p>{{ airport.name }}</p>
6    <p>{{ airport.city }}, {{ airport.state }}</p>
7  </div>
8</template>
9...

现在,当用户点击机场卡时,一个自定义事件将启动并传递那个机场对象。

接下来,打开src/App.vue,将一些HTML添加到模板中. 您将在已经存在的六张卡片后显示最喜欢的机场列表:

 1[label favorite-airports/src/App.vue]
 2<template>
 3  <div class="wrapper">
 4    <div v-for="airport in airports" :key="airport.abbreviation">
 5      <airport-card :airport="airport" />
 6    </div>
 7    <h1 v-if="favoriteAirports.length">Favorite Airports</h1>
 8    <div v-for="airport in favoriteAirports" :key="airport.abbreviation">
 9      <airport-card :airport="airport" />
10   </div>
11  </div>
12</template>
13
14<script>
15import { ref } from 'vue'
16import allAirports from '@/data/airports.js'
17import AirportCard from '@/components/AirportCard.vue'
18
19export default {
20  components: {
21    AirportCard
22  },
23  setup() {
24    const airports = ref(allAirports)
25    const favoriteAirports = ref([])
26
27    return { airports, favoriteAirports }
28  }
29}
30</script>
31...

在此代码片段中,您正在创建一个名为favoriteAirports的反应性数据属性,该属性是空数组。

现在您需要为您的自定义事件添加v-on事件:

 1[label favorite-airports/src/App.vue]
 2<template>
 3  <div class="wrapper">
 4    <div v-for="airport in airports" :key="airport.abbreviation">
 5      <airport-card :airport="airport" @favoriteAirport="favoriteAirports.push($event)" />
 6    </div>
 7    <h1 v-if="favoriteAirports.length">Favorite Airports</h1>
 8    <div v-for="airport in favoriteAirports" :key="airport.abbreviation">
 9      <airport-card :airport="airport" />
10   </div>
11  </div>
12</template>
13...

在@favoriteAiport自定义事件中,您使用JavaScript push()方法将孩子($event)的机场添加到favoriteAirports的反应数据属性。

打开您的浏览器并导航到您的项目在localhost:8080。当您点击机场地图之一时,该地图将出现在 最喜欢的机场 下。

Vue airport app with a list of favorite airports that includes the CVG airport card.

在本节中,您了解了自定义事件,它们是什么,以及如何使用它们。自定义事件是通过Vue提供的$emit函数将数据传输到母组件的一种方式。

结论

在本教程中,您了解了Vue.js如何聆听一些内置事件,例如点击和鼠标转换。此外,您还尝试了事件和关键修改器,您将附加到您的事件的小代码,以提供额外的功能。

Vue 提供了一种高效的方式来聆听事件,允许您专注于操纵数据,并通过手动设置事件倾听器。

要了解有关 Vue 组件的更多信息,建议阅读 Vue 文档。有关 Vue 的更多教程,请参阅如何使用 Vue.js 开发网站系列页面。

如何在 Vue 中使用事件创建用户交互

介绍

前提条件

步骤1 - 设置项目

步骤2 — 通过v-on指令聆听事件

步骤 3 – 使用事件和关键修改

结论

步骤2 — 通过`v-on`指令聆听事件