Vue 事件指南

Posted on by

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

Vue 基础知识

如果您是 Vue 的新手，我建议您阅读我的指南，了解如何制作您的第一个 Vue 应用程序，或者首先在 Vue 中创建组件。

Vue 中的事件#

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

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

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

如前所述，我们不仅限于@click. 所有其他 Javascript 事件也以相同的格式工作。这意味着您可以使用：

  • @keydown
  • @mousedown
  • @pointerdown
  • @pointerup
  • @scroll
  • ETC…

我们不仅限于在我们的事件中运行 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:clickvs的事件@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>

当你有两个以上的论点时，事情变得有点棘手。在这些情况下，有两种方法可以访问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" />

但是，如果我们只想@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，它们实际上可以与我们之前的键值组合，以添加另一层功能。例如，下面将触发事件，因此，无论何时和都在输入中被按下：shiftmetakeydownsomeFunctionshiftenter

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

精确修饰符

最后，我们可以使用 确保只按下一个键exact。enter例如，下面的内容只有在单独按下时才会触发。如果enter与其他键组合按下，则不会触发事件：

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

最后的想法#

Vue 中的事件控制是构建任何完整的 Vue 应用程序的基本元素。我希望你喜欢这个指南。你可以在这里找到更多的 Vue 内容。

推荐阅读：