详解vue中v-on事件监听指令的基本用法

下面是对“详解vue中v-on事件监听指令的基本用法”的完整攻略。

1. 什么是v-on事件监听指令？

在Vue中，可以使用v-on事件监听指令来绑定DOM事件，可以在事件发生时执行特定的函数。具体来说，v-on指令需要绑定一个事件类型和指定的函数。事件类型可以是所有的DOM事件，例如click、input、change等等。

v-on指令的缩写是@，意味着事件绑定的模板会更加简洁。例如，v-on:click可以简写成@click，效果是相同的。

2. 如何使用v-on事件监听指令？

2.1 监听普通的DOM事件

使用v-on事件监听指令需要将指令放在DOM元素上。接下来是一个使用v-on指令监听click事件的例子：

<template>
  <button v-on:click="doSomething">Click Me!</button>
</template>

<script>
  export default {
    methods: {
      doSomething() {
        console.log("Button clicked!")
      }
    }
  }
</script>

这个例子中，我们在按钮上使用v-on指令监听click事件，并在该事件发生时调用doSomething函数。在doSomething函数里我们只是简单地打印一个消息。

2.2 传递事件参数

在有些情况下，我们需要在事件处理函数中传递额外的参数。在Vue中，可以使用$event对象引用当前的事件，并将其作为一个参数传递给特定的函数。

下面的例子是在使用v-on指令监听click事件时，传递一个字符串作为参数：

<template>
  <button v-on:click="changeText('Hello Vue!')">Click Me!</button>
  <p>{{ message }}</p>
</template>

<script>
  export default {
    data() {
      return {
        message: "Hello World!"
      }
    },
    methods: {
      changeText(text) {
        this.message = text;
      }
    }
  }
</script>

这个例子中，我们在按钮上使用v-on指令监听click事件，并使用changeText函数将字符串"Hello Vue!"赋给message变量。在changeText函数内部，我们通过调用this.message来改变message的值。