一、事件处理
在 Vue 3 中，事件处理是组件间通信的重要机制。Vue 提供了 v-on 指令（或其缩写 @）来监听 DOM 事件，并在事件触发时执行特定的 JavaScript 代码。以下是 Vue 3 事件处理的详细说明：
1、基本用法
使用 v-on 或 @ 监听事件，并指定一个方法来处理事件：
<script setup>
import { ref } from 'vue'const message = ref(true)
function handleClick() {message.value = !message.value
}</script><template><button @click="handleClick">Click me </button><p> {{message}}</p>
</template>
在这个例子中，当按钮被点击时，handleClick 方法将被调用。
2、事件修饰符
在 Vue.js 中，事件修饰符是用来修改事件监听器的行为的的特殊后缀，可以添加到 v-on 或 @ 指令的参数中。这些修饰符为事件处理提供了更多的控制，以下是 Vue 3 中常用的事件修饰符及其作用：
.stop
阻止事件冒泡。这意味着事件将不会继续传播到父元素。
<script setup>
import { ref } from 'vue'const parent = ref(true)
const Button = ref(true)function handleDivClick() {parent.value = !parent.value}function handleButtonClick() {Button.value = !Button.value
}</script><template><div @click="handleDivClick"><button @click.stop="handleButtonClick">Click me</button><p>{{"handleDivClick:" + parent }}</p><p>{{"handleButtonClick:" + Button}}</p></div></template>
在这个例子中，点击按钮时，handleDivClick 不会被触发，而handleButtonClick 会被触发， 因为 .stop 修饰符阻止了事件冒泡。
.prevent
阻止事件的默认行为。例如，阻止表单提交或链接跳转。
<template><form @submit.prevent="handleSubmit"><input type="submit" value="Submit"></form>
</template><script>
import { defineComponent } from 'vue';export default defineComponent({setup() {function handleSubmit() {console.log('Form submitted without actual submit');}return {handleSubmit};}
});
</script>
在这个例子中，点击提交按钮时，表单不会实际提交，因为 .prevent 修饰符阻止了默认行为。
.capture：使用事件捕获模式而不是冒泡模式。.self：仅当事件在该元素本身触发时才触发处理函数。.once：事件处理函数只执行一次。
3、按键修饰符
在 Vue.js 中，按键修饰符是用来监听特定的键盘事件，并在用户按下特定键时触发相应的处理函数。这些修饰符可以让你指定一个键或一组键来触发事件处理器。
基本用法
Vue 为 v-on 或 @ 指令提供了一些内置的按键修饰符，例如 .enter、.tab、.delete（捕获“删除”和“退格”键）、.esc、.space、.up、.down、.left、.right 等。
<script setup>
import { ref } from 'vue'const EnterKey = ref(true)
const TabKey = ref(true)
const EscKey = ref(true)
const DeleteKey = ref(true)const SpaceKey = ref(true)function handleEnter() {EnterKey.value = !EnterKey.value;}function handleTab() {TabKey.value = !TabKey.value;}function handleDelete() {DeleteKey.value = !DeleteKey.value;}function handleEsc() {EscKey.value = !EscKey.value;}function handleSpace() {SpaceKey.value = !SpaceKey.value;}</script><template><input @keyup.enter="handleEnter" /><input @keydown.tab="handleTab" /><input @keyup.delete="handleDelete" /><input @keyup.esc="handleEsc" /><input @keyup.space="handleSpace" /><p>{{"handleEnter:" + EnterKey }}</p><p>{{"handleTab:" + TabKey }}</p><p>{{"handleDelete:" + DeleteKey }}</p><p>{{"handleEsc:" + EscKey }}</p><p>{{"handleSpace:" + SpaceKey }}</p></template>
在这个例子中，每个 input 元素都监听了不同的键盘事件，并在用户按下相应的键时触发了对应的处理函数。
4、鼠标按键修饰符
Vue 提供了鼠标按键修饰符，允许你监听特定的鼠标按钮事件。
.left：监听鼠标左键点击事件。.right：监听鼠标右键点击事件。.middle：监听鼠标中键点击事件。
<script setup>import { ref } from 'vue'let keyLeftname =ref('1');function onClickLeft() {keyLeftname.value= `onClickLeft`
}function onClickRight() {keyLeftname.value= `onClickRight`
}function onClickMiddle() {keyLeftname.value= `onClickMiddle`
}</script><template><button @click.left="onClickLeft">Left click me</button><button @click.right="onClickRight">Right click me</button><button @click.middle="onClickMiddle">Middle click me</button><p>{{"onClickLeft:" + keyLeftname }}</p></template>系统按键修饰符
你可以使用以下系统按键修饰符来触发鼠标或键盘事件监听器，只有当按键被按下时才会触发。
.ctrl.alt.shift.meta
<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" /><!-- Ctrl + 点击 -->
<div @click.ctrl="doSomething">Do something</div>
二、表单输入绑定
v-model 是 Vue.js 中的一个指令，用于在表单输入和应用状态之间创建双向数据绑定。它不仅简化了数据绑定的过程，还自动处理了用户输入的更新。
1、文本输入
对于 <input>、<textarea> 和 <select> 元素，v-model 可以创建一个响应式的值，当用户输入时自动更新。
<script setup>import { ref } from 'vue'const message = ref('');</script><template><input v-model="message" placeholder="Edit me" /><p>Message is: {{ message }}</p>
</template>
在这个例子中，message 是一个响应式引用，它会在用户输入时自动更新。
2、多行文本
对于 <textarea>，v-model 同样适用。
<script setup>import { ref } from 'vue'
const message = ref('');</script><template><textarea v-model="message" placeholder="Type something..."></textarea><p>Message is: {{ message }}</p></template>
3、选择框
对于 <select> 元素，v-model 会更新所选选项的值。
<script setup>import { ref } from 'vue'const selected = ref('');</script><template><select v-model="selected"><option disabled value="">Please choose an option</option><option>Option 1</option><option>Option 2</option><option>Option 3</option></select><p>Selected: {{ selected }}</p></template>
4 、单选按钮
对于单选按钮 <input type="radio">，v-model 会更新选中的值。
<script setup>import { ref } from 'vue'const picked = ref('one');</script><template><input type="radio" v-model="picked" value="one"> One<input type="radio" v-model="picked" value="two"> Two<p>Picked: {{ picked }}</p>
</template>
5、复选框
对于复选框 <input type="checkbox">，v-model 可以绑定到一个数组或一个布尔值。
<script setup>import { ref } from 'vue'const checked = ref(false);</script><template><input type="checkbox" v-model="checked"> Check me<p>Checked: {{ checked }}</p>
</template>
6、修饰符
v-model 可以接受修饰符来改变其行为：
.lazy：代替input事件，使用change事件来更新数据。.number：将用户的输入转换为数值类型。.trim：去除用户输入的首尾空白。
<script setup>import { ref } from 'vue'const msg = ref('');const age = ref(0);</script><template><input v-model.lazy="msg" debounce="300"><input v-model.number="age"><input v-model.trim="msg">
</template>