Vue中的事件指南

后端之巅
91 阅读4分钟

Vue中的事件指南

让我们来看看Vue中的事件是如何工作的。

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

Vue基础知识

如果你是Vue的新手，我建议你先阅读我关于制作你的第一个Vue应用程序或在Vue中创建组件的指南。

Vue中的事件

在Vue以及大多数Javascript中经常使用的最基本事件是click 。下面的组件是一个简单的计数器，每次点击按钮都会增加1。要做到这一点，我们使用一个内联的@click 事件。

Vue.js组件

<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中定义了一个方法或函数，我们可以触发它。下面是同样的代码，用一个方法代替。

Vue.js组件

<script>
export default {
    data() {
        return {
            counter: 0
        }
    },
    methods: {
        incrCounter: function() {
            ++this.counter
        }
    }
}
</script>
<template>
    <button @click="incrCounter">
        {{ counter }}
    </button>

Vue中的V-on与@

你可能已经看到事件被写成了v-on:click 和@click 。这两者的意思是一样的，可以互换，所以用你喜欢的那一种吧

鼠标特定事件

我们可以通过使用left,middle, 和right 修改器来进一步修改任何鼠标事件。如果我们正在发射一个与鼠标有关的事件，比如click ，或者mousedown ，那么mousedown.right 将只跟踪鼠标右键，或者mousedown.middle 只跟踪鼠标中键。

Vue.js组件

<!-- 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 。

Vue.js组件

<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 ，将事件数据传递给我们的函数来实现。

Vue.js组件

<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 对象传递给函数，如下所示。

Vue.js组件

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

Vue事件中的自定义关键事件

Vue试图尽可能地简化事件。如果你过去曾做过键事件，你会知道，经常我们只想访问一个特定的键。因此，通过按键事件，我们可以将常用的按键直接绑定到事件上。例如，在这个输入中，只要用户按了keyup ，我们就会触发一个事件。

HTML

<input @keyup="someFunction" />

但如果我们只想在用户按下enter 时触发@keyup ，我们可以用下面这个事件来实现。

HTML

<input @keyup.enter="someFunction" />

我们可以使用任何定义好的键盘键值，并将其转换为kebab大小写。例如，PageDown 是一个键盘键的定义值，但在Vue中，我们写成page-down 。

HTML

<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 在输入中同时被按下。

HTML

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

确切的修改器

最后，我们可以通过使用exact ，确保只有一个键被按下。例如，下面的内容只有在enter 被单独按下时才会发生。如果enter 和其他键一起被按下，该事件将不会发生。

HTML

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

最后的思考

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

经Johnny Simpson授权发表于DZone，DZone MVB。点击这里查看原文。

avatar
文章
阅读
粉丝