\ 与任何框架一样，Vue 允许我们通过事件为我们的应用程序和网站添加响应性。 Vue 事件的伟大之处在于它们模仿了 Vanilla Javascript，因此您习惯在 Javascript 中使用的所有事件也可以在 Vue 中使用。
\
Vue 中的事件
Vue 以及大多数 Javascript 中最常用的最基本事件是click 。下面的组件是一个简单的计数器，每次单击按钮时都会增加 1。为此，我们使用内联@click事件：
\
<script> export default { data() { return { counter: 0 } } } </script> <template> <button @click="++counter"> </button> </template>
\ 由于我们可以将内联 Javascript 直接写入我们的事件，我们可以简单地编写++counter来增加我们的计数器数据。因此，每当我们单击按钮并将其显示在我们的button元素中时，上述内容都会增加counter 。
\ 如前所述，我们不仅限于@click 。所有其他 Javascript 事件也以相同的格式工作。这意味着您可以使用：
-
@keydown -
@mousedown -
@pointerdown -
@pointerup -
@scroll - 等等
\ 我们不仅限于根据我们的活动运行 Javascript。如果在我们的 Vue Javascript 中定义了一个方法或函数，我们可以触发它。这是使用方法代替的相同代码：
\
<script> export default { data() { return { counter: 0 } }, methods: { incrCounter: function() { ++this.counter } } } </script> <template> <button @click="incrCounter"> </button> </template>
\
Vue 中v-on vs @
您可能已经看到写成v-on:click与@click的事件。这两者的含义相同，并且可以互换，因此请使用您喜欢的任何一个！
\
鼠标特定事件
我们可以使用left 、 middle和right修饰符进一步修改任何鼠标事件。
\ 如果您正在触发与鼠标相关的事件，例如click或mousedown ，则mousedown.right将仅跟踪鼠标右键单击，或者mousedown.middle将仅跟踪鼠标中键单击。
\
<!-- left mouse clicks --> <button @mousedown.left="incrCounter"> </button> <!-- right mouse clicks --> <button @mousedown.right="incrCounter"> </button> <!-- middle mouse clicks --> <button @mousedown.middle="incrCounter"> </button>
\
如何为 Vue 事件使用事件数据？
有时，我们想访问事件中的事件或e对象。在我们只想在没有其他参数的情况下访问e本身的情况下，我们不必提及e – 它会自动直接传递给函数。
\ 例如，每当用户单击按钮时，以下代码仍将控制台记录e.clientX和e.clientY ：
\
<script> export default { data() { return { counter: 0 } }, methods: { incrCounter: function(e) { ++this.counter console.log(e.clientX, e.clientY) } } } </script> <template> <button @click="incrCounter"> </button> </template>
\ 当你有超过 2 个参数时，事情会变得有点棘手。
\ 在这些情况下，有两种方法可以访问event数据。封装函数或使用预定义的$event变量。
\ 例如，假设我们想将计数器增加一个自定义数量，并继续控制台日志e.clientX和e.clientY 。这可以通过使用$event将事件数据传递给我们的函数来实现：
\
<script> export default { data() { return { counter: 0 } }, methods: { incrCounter: function(amount, e) { ++this.counter console.log(e.clientX, e.clientY) } } } </script> <template> <button @click="incrCounter(5, $event)"> </button> </template>
\ 或者，我们也可以将e对象直接传递给函数，如下所示：
\
<button @click="(e) => incrCounter(5, e)"> </button>
\
Vue 事件中的自定义键事件
Vue 试图尽可能地简化事件。如果你过去做过关键事件，你就会知道我们经常只想访问一个特定的键。
\ 因此，通过键事件，我们可以将常用键直接绑定到事件。例如，在这个输入中，我们将在用户按下keyup事件时触发一个事件：
\
<input @keyup="someFunction" />
\ 但是，如果您只想在用户按下enter时触发@keyup ，我们可以使用以下事件来实现：
\
<input @keyup.enter="someFunction" />
\ 您可以使用任何已定义的键盘键值，转换为 kebab 大小写。例如， PageDown是键盘键定义的值，但在 Vue 中，我们写page-down ：
\
<input @keyup.page-down="someFunction" />
\ 最后，Vue 定义了一些常用的键，这些键是未定义的值。这些是enter 、 tab 、 delete 、 esc 、 space 、 up 、 down 、 left 、 right ，以及键盘修饰符ctrl 、 alt 、 shift和meta 。
\
键盘修饰符和键
我们刚刚提到了键盘修饰符ctrl 、 alt 、 shift和meta ，它们可以与我们之前的键值组合，以添加另一层功能。
\ 例如，以下将触发keydown事件，因此someFunction ，只要在输入中同时按下shift和enter ：
\
<input @keydown.shift.enter="someFunction" />
\
精确修饰符
最后，我们可以通过使用来确保只按下一个exact 。例如，下面的内容只有在单独按下enter时才会触发。
\ 如果与其他键组合按下enter ，事件将不会触发：
<input @keydown.enter.exact="someFunction" />
\
最后的想法
Vue 中的事件控制是构建任何完整的 Vue 应用程序的基本元素。我希望你喜欢这个指南。
\
也在这里发布
你可以在这里找到更多的 Vue 内容。
原文： https://hackernoon.com/a-basic-guide-to-event-handling-in-vue?source=rss