ImQi1云笔记

外观

事件处理

监听事件

我们可以使用 v-on 指令 (通常缩写为 @ 符号) 来监听 DOM 事件，并在触发事件时执行一些 JavaScript。用法为 v-on:click="methodName" 或使用快捷方式 @click="methodName"。

<button @click="counter += 1">Add 1</button>
data() {
    return {
        counter: 0
    }
}

如：

<template>
  <button @click="onclick">+1</button>
  <p>{{ number }}</p>
</template>

<script>
export default {
  data() {
    return {
      number: 0
    }
  },
  methods: {
    onclick() {
      this.number += 1
    }
  }
}
</script>

事件处理方法

然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。

<button @click="greet">Greet</button>  <!--若事件处理方法只有一个参数，而@click没有参数，则这个参数代表事件对象-->
methods: {
    greet(event) {
        // `event` 是原生 DOM event
        if (event) {
            alert(event.target.tagName)
        }
    }
}

内联处理器中的方法

这是官方的翻译称呼，其实我们可以直接叫他 "事件传递参数"。

<button @click="say('hi')">Say hi</button>
<button @click="say('what')">Say what</button>  <!--若显式传递参数了则函数参数就是普通参数-->
methods: {
    say(message) {
        alert(message)
    }
}

就是给方法传了个参数。

v-on的事件修饰符

  • .stop
  • .prevent
  • .self
  • .capture
  • .once
  • .passive
<!-- 单击事件将停止传递 -->
<a @click.stop="doThis"></a>

<!-- 提交事件将不再重新加载页面 -->
<form @submit.prevent="onSubmit"></form>

<!-- 修饰语可以使用链式书写 -->
<a @click.stop.prevent="doThat"></a>

<!-- 也可以只有修饰符 -->
<form @submit.prevent></form>

<!-- 仅当 event.target 是元素本身时才会触发事件处理器 -->
<!-- 例如：事件处理器不来自子元素 -->
<div @click.self="doThat">...</div>

许可证：署名 4.0 国际 (CC-BY-4.0)

2026 © 棋