Vue.js活动

Vue.js允许我们通过在元素上使用v-on指令来拦截任何DOM事件。本主题是使组件具有交互性的关键


什么是Vue.js事件

Vue.js允许我们通过使用v-on元素上的指令。

如果我们想在此元素中发生点击事件时做一些事情:

<template>
  <a>Click me!</a>
</template>

我们添加一个v-on指示:

<template>
  <a v-on:click="handleClick">Click me!</a>
</template>

Vue还为此提供了一种非常方便的替代语法:

<template>
  <a @click="handleClick">Click me!</a>
</template>

您可以选择是否使用括号。@click="handleClick"相当于@click="handleClick()"

handleClick是附加到组件的方法:

<script>
export default {
  methods: {
    handleClick: function(event) {
      console.log(event)
    }
  }
}
</script>

方法在我的文章中有更详细的解释Vue方法教程

您需要在这里知道的是,您可以通过事件传递参数:@click="handleClick(param)"并且它们将在方法内部被接收。

访问原始事件对象

在许多情况下,您将需要对事件对象执行操作或在其中查找某些属性。您如何访问它?

使用特殊$event指示:

<template>
  <a @click="handleClick($event)">Click me!</a>
</template>

<script> export default { methods: { handleClick: function(event) { console.log(event) } } } </script>

并且如果您已经传递了一个变量:

<template>
  <a @click="handleClick('something', $event)">Click me!</a>
</template>

<script> export default { methods: { handleClick: function(text, event) { console.log(text) console.log(event) } } } </script>

从那里你可以打电话event.preventDefault(),但是有更好的方法:事件修饰符

事件修饰符

告诉Vue为您处理事情,而不要弄乱方法中的DOM“事物”:

  • @click.prevent称呼event.preventDefault()
  • @click.stop称呼event.stopPropagation()
  • @click.passive利用addEventListener的被动选项
  • @click.capture使用事件捕获而不是事件冒泡
  • @click.self确保click事件没有从子事件中冒出,而是直接发生在该元素上
  • @click.once该事件只会被触发一次

所有这些选项可以通过在另一个后面附加修饰符来组合。

有关传播,冒泡/捕捉的更多信息,请参阅我的JavaScript事件指南

免费下载我的Vue手册


更多vue教程: