Vue事件处理

Vue3事件处理

v-on指令

v-on指令来监听 DOM 事件，从而执行 JavaScript 代码
<button @click="greet">点我</button>: 一个按钮，当点击时，会调用Vue实例中的greet方法。@click是Vue中用于监听点击事件的指令。

• const app = {…}: 定义了一个Vue应用实例的配置对象。
• data() {…}: 一个函数，返回一个对象，这个对象包含了应用的数据。在这个例子中，数据是一个名为name的属性，其值为’Runoob’。
• methods: {…}: 定义了应用的方法。在这个例子中，有一个名为greet的方法。
• greet(event) {…}: 当按钮被点击时调用的方法。它使用this关键字访问Vue实例的数据（如this.name），并弹出一个警告框显示问候信息。此外，如果点击事件被传递给了这个方法（Vue会自动传递原生DOM事件对象），它还会弹出一个警告框显示触发事件的DOM元素（即按钮）的标签名（BUTTON）。

这段代码演示了Vue 3的基本用法，包括如何定义数据、方法，以及如何将Vue应用挂载到DOM元素上

Vue3表单

给大家介绍 Vue 表单上的应用
我们可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 等元素上创建双向数据绑定。

v-model 会根据控件类型自动选取正确的方法来更新元素。

v-model 会忽略所有表单元素的 value、checked、selected 属性的初始值，使用的是 data 选项中声明初始值。

v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

• text 和 textarea 元素使用 value 属性和 input 事件；
• checkbox 和 radio 使用 checked 属性和 change 事件；
• select 字段将 value 作为属性并将 change 作为事件。\

<div id="app">: 定义了Vue应用的挂载点。Vue将会在这个元素内部进行渲染和管理。
<p>input 元素：</p>: 一个段落标签，用于说明下面的元素。
<input v-model="message" placeholder="编辑我……">: 一个输入框，v-model="message"表示这个输入框的值与Vue实例中的message数据属性双向绑定。这意味着，当用户在输入框中输入文本时，message属性的值会实时更新；反之，如果message属性的值在Vue实例内部被改变，输入框中显示的文本也会相应更新。
<p>input 表单消息是: {{ message }}</p>: 一个段落标签，用于显示message属性的值。{{ message }}是Vue的插值表达式，用于将数据绑定到DOM中。
<p>textarea 元素：</p>: 一个段落标签，用于说明下面的<textarea>元素。
<textarea v-model="message2" placeholder="多行文本输入……"> </textarea>: 一个多行文本输入框，v-model="message2"表示这个输入框的值与Vue实例中的message2数据属性双向绑定。
<p>textarea 表单消息是:</p>: 一个段落标签，用于分隔内容，但并未直接显示数据。
<p style="white-space: pre">{{ message2 }}</p>: 一个段落标签，用于显示message2属性的值。style="white-space: pre"样式用于保留文本中的空白和换行符，这样多行文本就能以用户输入的方式正确显示。

复选框

复选框如果是一个为逻辑值，如果是多个则绑定到同一个数组