Vue.js 事件

在 Vue.js 中，事件用于响应一个动作。假设您要使用 Vue.js 构建一个动态网站，那么您很可能希望它能够响应事件。

例如，如果您的 Vue.js 网站有可点击的按钮、表单等，您肯定希望用户点击按钮、提交表单甚至移动鼠标时，Vue.js 网站能够以某种方式响应。

Vue.js 事件处理

为了使用 Vue.js 处理事件，我们必须将 v-on 指令添加到相关的 DOM 元素中。例如，如果您想处理按钮元素的点击事件，那么您应该将以下代码添加到您的 Vue 模板中

语法

您也可以使用便捷的缩写 @ 代替 v-on 指令。它看起来像这样

我们向 v-on 指令添加一个参数，该参数将是我们想要处理的事件名称。在上面的例子中，它是一个点击事件。之后，我们必须将一个表达式绑定到该指令，该表达式通常是您想要用于处理事件的方法。在本例中，我们将其命名为 clickHandler。

您可以处理的 Vue.js 事件类型

除了点击事件，您还可以处理许多其他 Vue.js DOM 事件。Vue.js 可以处理任何类型的 web 或移动原生事件以及自定义事件。最常用的事件通常包括

• submit
• keyup
• drag
• scroll
• 错误
• abort
• 鼠标悬停
• 鼠标移出
• load 等。

事件处理方法

让我们看一些简单的例子来部署事件处理方法。

点击事件

请看下面的例子，演示 Vue.js 中的点击事件处理。

Index.html 文件

Index.js 文件

让我们使用一个简单的 CSS 文件使输出更具吸引力。

Index.css 文件

程序执行后，您将看到以下输出

输出

当您点击上面的按钮时，您可以看到数字已经增加。请看输出

示例说明

在上面的例子中，我们为 DOM 元素分配了以下点击事件。

当您点击按钮时，它将调用方法 'displaynumbers'，该方法接收事件，然后我们看到输出。

我们也可以使用速记符号 @ 代替 v-on 指令。您可以调用以下事件，结果将是相同的。

鼠标移入和鼠标移出事件

现在，让我们检查两个新的 Vue.js 事件，名为 mouseover 和 mouseout。请看下面的例子。

Index.html 文件

Index.js 文件

程序执行后，您将看到以下输出

输出

您可以在输出中看到默认背景颜色是 红色。现在，将鼠标光标移动到框中，框的颜色将变为 蓝色。请看输出。

现在，将鼠标光标移出框外，框的颜色将变为 棕色。请看输出。

示例说明

在上面的例子中，我们创建了一个 div 元素，宽度和高度都为 100px。这个 div 的默认背景颜色是红色。在 mouseover 时，背景颜色变为蓝色，在 mouseout 时，背景颜色变为棕色。

在鼠标移入时，会调用一个名为 changebgcolor 的方法；一旦我们将鼠标移出 div，会调用一个名为 originalcolor 的方法。

在这里，我们使用了两个事件 mouseover 和 mouseout，并将它们分配给 div。我们创建了一个 styleobj 变量，并给出了要分配给 div 的所需样式。

相同的变量使用 v-bind:style = "styleobj" 绑定到 div。在 changebgcolor 中，我们使用以下代码将颜色更改为绿色。

使用 styleobj 变量，颜色变为绿色。类似地，我们使用以下代码将颜色更改为棕色

Vue.js 事件修饰符

Vue.js 提供了一些可用于 v-on 属性的事件修饰符。我们可以非常容易地在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation()。在这里，.prevent 和 .stop 是事件修饰符。

这些修饰符是通过点符号表示的指令后缀。以下是 v-on 属性上最常见的修饰符列表

• .once
• .prevent
• .stop
• .capture
• .self
• .passive

.once 事件修饰符

它允许事件只执行一次。

语法

在调用修饰符时，您必须添加点运算符，如上面的语法所示。

让我们看一个简单的例子来理解 once 修饰符的概念和工作原理。

示例

Index.html 文件

Index.js 文件

程序执行后，您将看到以下输出

输出

您可以看到我们在上面的例子中创建了两个按钮。带有“仅可点击一次”标签的按钮添加了 once 修饰符，而另一个按钮没有添加任何修饰符。

当您点击第一个按钮时，它会调用 "buttonclickedonce" 方法；点击第二个按钮后，它会调用 "buttonclicked" 方法。

我们还在 clicknum 和 clicknum1 中定义了两个变量。当按钮被点击时，两者都会递增。两个变量都初始化为 0。您可以在上面的输出中看到它。

当您点击第一个按钮时，变量 clicknum 增加 1。第二次点击时，数字不会增加，因为修饰符阻止它执行或执行在按钮点击时分配的任何操作项。

当您点击第二个按钮时，会执行相同的操作，即变量递增。每次点击时，值都会递增并显示。请看下面的输出

在两个按钮都点击五次后，您可以看到第一个按钮只显示点击了一次，第二个按钮显示点击了 5 次。

.prevent 事件修饰符

当您不希望通过点击按钮打开特定 ID 或 URL 时，可以使用 .prevent 事件修饰符。

语法

让我们看两个例子，一个不带 .prevent 事件修饰符，一个带它，以便清楚地理解它。

Index.html 文件

Index.js 文件

程序执行后，您将看到以下输出

输出

当您点击“Click Me”按钮时，您将看到一个弹出消息。请看下图。

点击“确定”按钮后，目标 URL 将打开，如下图所示

现在，我们将使用 .prevent 事件修饰符来查看结果。将以下代码添加到 Index.html 文件中。

添加代码后，如果我们点击按钮，它会发送一个警告消息，但不再打开 URL。

用以下代码替换 Index.html 文件

输出

点击“Click Me”按钮，您将看到弹出框已打开。

现在，点击“确定”按钮，您将看到指定的 URL 不再打开。

Vue.js 事件按键修饰符

在 Vue.js 中，按键修饰符用于处理和控制事件处理。在监听键盘事件时，我们需要检查特定的按键。Vue.js 提供了一种为 v-on 添加按键修饰符的方法，同时监听按键事件。

例如，假设您有一个文本框，并且只想在按下回车键时调用方法。您可以通过向事件添加按键修饰符来实现，如下所示。

语法

示例： 如果您想将 keyup 和回车按钮应用于您的事件，您可以使用以下代码来实现

注意：您也可以为事件使用多个按键名称。例如：让我们使用 keyup、ctrl 和 enter 按键名称。

让我们看一个例子来演示 Vue.js 事件的按键修饰符并很好地理解它。

Index.html 文件

Index.js 文件

程序执行后，您将看到以下输出

输出

在文本框中输入一些内容，然后查看结果。

在上面的输出中，您可以看到即使在文本框中输入了名称，它也没有出现在结果中。现在，按下回车按钮，名称将被显示。请看下面的输出

您可以将以下按键修饰符与事件一起使用。

• .enter
• .tab
• .delete (它读取“Delete”和“Backspace”键)
• .esc
• .space
• .up
• .down
• .left
• .right

Vue.js 自定义事件

当我们告诉父组件我们想在子组件中进行更改时，可以使用自定义事件。父组件可以通过 prop 属性将数据传递给其组件。

父组件可以使用 v-on 属性监听子组件事件。

让我们看一个例子

Index.html 文件

Index.js 文件

程序执行后，您将看到以下输出

输出

如果您点击任何按钮，它将显示在输出中。让我们点击 Python 按钮并查看结果。

示例说明

上面的例子演示了父组件和子组件之间的数据传输。父组件使用以下代码创建。

在这里，v-for 属性将循环遍历包含语言列表的 languages 数组。我们必须将详细信息发送到子组件，因此数组的值存储在 item 和 index 中。

要使用数组的值，首先将其绑定到一个变量，然后通过 props 属性引用该变量

事件的名称是 showlanguage，它调用一个名为 languagedisp 的方法，该方法在 Vue 实例中定义。

在组件中，模板定义如下 -

方法 displayLanguage 用于调用 this.$emit('showlanguage', lng);

$emit 用于调用父组件方法。方法 showlanguage 是组件上带有 v-on 的事件名称。

现在，我们传递了一个参数。传递的参数是点击的语言名称，传递给主父 Vue 实例的方法。它定义如下

现在，emit 触发 showlanguage，后者又从 Vue 实例方法中调用 languagedisp。它将点击按钮的值分配给变量 languageclicked，然后将点击的值 language 显示在输出中，您已在上面的图像中看到。