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.js活动

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

什么是Vue.js事件

访问原始事件对象

事件修饰符

更多vue教程：