Vue 事件处理基本指南

Posted on by

与任何框架一样，Vue 允许我们通过事件为我们的应用程序和网站添加响应性。Vue 事件的伟大之处在于它们模仿了 Vanilla Javascript，因此您习惯在 Javascript 中使用的所有事件也可以在 Vue 中使用。

Vue 中的事件

Vue 以及大多数 Javascript 中最常用的最基本事件是click. 下面的组件是一个简单的计数器，每次单击按钮时都会增加 1。为此，我们使用内联@click事件：

<script>
export default {
    data() {
        return {
            counter: 0
        }
    }
}
</script>
<template>
    <button @click="++counter">
        {{ counter }}
    </button>
</template>

由于我们可以将内联 Javascript 直接写入我们的事件，我们可以简单地编写++counter以增加我们的计数器数据。counter因此，只要我们单击按钮并将其显示在我们的button元素中，上述内容就会增加。

如前所述，我们不仅限于@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">
        {{ counter }}
    </button>
</template>

v-on与@Vue 中的对比

您可能已经看到写成v-on:clickvs的事件@click。这两者的含义相同，并且可以互换，因此请使用您喜欢的任何一个！

鼠标特定事件

我们可以使用 、 和 修饰符进一步修改任何left鼠标middle事件right。

如果您正在触发与鼠标相关的事件，例如click或mousedown，mousedown.right则将仅跟踪鼠标右键单击，或者mousedown.middle仅跟踪鼠标中键单击。

<!-- left mouse clicks -->
<button @mousedown.left="incrCounter">
    {{ counter }}
</button>
<!-- right mouse clicks -->
<button @mousedown.right="incrCounter">
    {{ counter }}
</button>
<!-- middle mouse clicks -->
<button @mousedown.middle="incrCounter">
    {{ counter }}
</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">
    {{ counter }}
  </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)">
        {{ counter }}
    </button>
</template>

或者，我们也可以将e对象直接传递给函数，如下所示：

<button @click="(e) => incrCounter(5, e)">
    {{ counter }}
</button>

Vue 事件中的自定义键事件

Vue 试图尽可能地简化事件。如果你过去做过关键事件，你就会知道我们经常只想访问一个特定的键。

因此，通过键事件，我们可以将常用键直接绑定到事件。例如，在这个输入中，只要用户按下一个事件，我们就会触发一个keyup事件：

<input @keyup="someFunction" />

但是，如果您只想@keyup在用户按下时触发enter，我们可以使用以下事件来实现：

<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，它们可以与我们之前的键值组合，以添加另一层功能。shiftmeta

例如，以下将触发keydown事件，因此someFunction，无论何时shift和enter都在输入中被按下：

<input @keydown.shift.enter="someFunction" />

精确修饰符

最后，我们可以使用 确保只按下一个键exact。enter例如，下面的内容只有在单独按下时才会触发。

如果enter与其他键组合按下，则不会触发事件：

<input @keydown.enter.exact="someFunction" />

最后的想法

Vue 中的事件控制是构建任何完整的 Vue 应用程序的基本元素。我希望你喜欢这个指南。

a-basic-guide-to-event-handling-in-vue

推荐阅读：