Vue3 学习笔记，如何定义事件以及如何理解响应式 _Vue3

如何定义事件在 Vue 中，可以使用 v-on 指令来绑定事件监听器。
下面是一个示例，在点击按钮时触发事件处理程序：
<template><div><button v-on:click="incrementCounter">{{ counter }}</button></div></template><script>export default {data() {return {counter: 0}},methods: {incrementCounter() {this.counter++}}}</script>在上面的例子中，点击按钮时会触发 incrementCounter 方法，然后将计数器增加 1 。
还可以使用缩写语法来绑定事件监听器，如下所示：
<button @click="incrementCounter">{{ counter }}</button>其他常见的监听事件除了 click 事件之外，Vue.js 中还有许多其他可供监听的事件，还包括：

input：当用户在输入框中输入时触发。
submit：当表单被提交时触发。
focus：当元素获得焦点时触发。
blur：当元素失去焦点时触发。
change：当元素的值改变时触发，通常用于 select 和 input[type="checkbox"] 。
keydown：当按下键盘上的任意按键时触发。
keyup：当松开键盘上的任意按键时触发。
mouseenter：当鼠标指针移动到元素上时触发。
mouseleave：当鼠标指针移出元素时触发。
mousemove：当鼠标指针在元素上移动时触发。
mousedown：当鼠标按钮被按下时触发。
mouseup：当鼠标按钮被松开时触发。

下面针对这些事件，分别配上案例，方便大家进行理解
1、input事件当用户在输入框中输入时触发。可以在 input 标签上直接绑定 v-on:input 事件，并在事件处理程序中执行相应的操作

<template><div><input v-on:input="onInput" placeholder="Enter Something"><p>{{ message }}</p></div></template><script>export default {data() {return {message: ''}},methods: {onInput(event) {this.message = event.target.value}}}</script>

2、submit事件当表单被提交时触发。可以在 form 标签上直接绑定 v-on:submit 事件，并在事件处理程序中执行相应的操作。

<template><div><form v-on:submit.prevent="onSubmit"><input type="text" v-model="message"><button type="submit">Submit</button></form><p>{{message}}</p></div></template><script>export default {data() {return {message: ''}},methods: {onSubmit() {alert('Form submitted!')}}}</script>

3、focus事件当元素获得焦点时触发。可以在元素标签上直接绑定 v-on:focus 事件，并在事件处理程序中执行相应的操作

<template><div><input v-on:focus="onFocus" placeholder="Enter Something"></div></template><script>export default {methods: {onFocus() {alert('Input focused!')}}}</script>

4、blur事件当元素失去焦点时触发。可以在元素标签上直接绑定 v-on:blur 事件，并在事件处理程序中执行相应的操作

<template><div><input v-on:blur="onBlur" placeholder="Enter Something"></div></template><script>export default {methods: {onBlur() {alert('Input blurred!')}}}</script>

5、change事件当元素的值改变时触发，通常用于 select 和 input[type="checkbox"] 。可以在元素标签上直接绑定 v-on:change 事件，并在事件处理程序中执行相应的操作

<template><div><select v-on:change="onChange"><option value=https://www.isolves.com/it/cxkf/qd/2023-12-06/"option1">Option 1Selected: {{ selectedOption }}