事件处理

监听事件#

我们可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。用法：v-on:click="methodName" 或 @click="handler"。

事件处理器的值可以是：

1. 内联事件处理器：事件被触发时执行的内联 JavaScript 语句 (与 onclick 类似)。

2. 方法事件处理器：一个指向组件上定义的方法的属性名或是路径。

内联事件处理器

内联事件处理器通常用于简单场景，例如：

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

<script setup>
import { ref } from 'vue';
const count =ref(96)

</script>

方法事件处理器

随着事件处理器的逻辑变得愈发复杂，内联代码方式变得不够灵活。因此 v-on 也可以接受一个方法名或对某个方法的调用。

<template>
  <button @click="greet">Greet</button>
</template>

<script setup>
import { ref } from 'vue';

const name=ref('Vue.js')

function greet(event){
  alert(`Hello ${name.value}!`)
  // `event` 是 DOM 原生事件源
  if(event){
    alert(event.target.tagName)
  }
}
</script>

　方法事件处理器会自动接收原生 DOM 事件并触发执行。在上面的例子中，我们能够通过被触发事件的 event.target.tagName 访问到该 DOM 元素。