事件处理器

监听事件

使用v-on指令（简写为@）来监听 DOM 事件。

例如：v-on:click="handleClick" 或 @click="handleClick"

内联事件处理器

事件被触发时执行内联的表达式语句。

<template>
  <div class="div-box">
    <button @click="count++">Add 1</button>
    <p>Count is: {{ count }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const count = ref(0)
</script>

方法事件处理器

事件被触发时执行一个指向组件上定义的方法的属性名或是路径。

TIP

方法事件处理器会自动接收原生 DOM 事件并触发执行。

<template>
  <div class="div-box">
    <button @click="greet">Greet</button>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const name = ref('Vue.js')

function greet(event: Event) {
  alert(`Hello ${name.value}!`)

  if (event) {
    const target = event.target as HTMLElement
    alert(target?.tagName)
  }
}
</script>