vue3笔记：事件处理

通过v-on: 或 @ 监听DOM事件，事件触发后执行对应的JavaScript。

1.内联事件处理

内联事件处理比较简单：

<script setup>
    import {ref} form 'vue'
    const   count = ref(0)
</script>

<template>
    <button @click="count++">click times</button>
</template>

2.方法事件处理

监听到事件触发后，调用方法执行：

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

const count = ref(0)
function add(){
	count.value++
}
function say(message) {
  alert(message)
}
</script>

<template>
	<button @click="say('hello')">Say hello</button>
	<button @click="add()">click times:{{count}}</button>
</template>

3.修饰符

事件修饰符：

.stop
.prevent
.self
.capture
.once
.passive

按键修饰符：

<!-- 仅在 `key` 为 `Enter` 时调用 `submit` -->
<input @keyup.enter="submit" />

.enter
.tab
.delete (捕获“Delete”和“Backspace”两个按键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

按键也可以组合使用：

<input @keyup.alt.enter="submit" />