Vue 的模板事件

1. 最常见和推荐的做法。将复杂的逻辑封装在 methods 中。

<!-- ✅ 正确：调用 methods 中的方法 -->
<button @click="handleClick">点击我</button>

new Vue({methods: {handleClick(event) {// 这里可以写任意语句if (this.isValid) {this.saveData();} else {console.log('数据无效');}// 其他复杂逻辑...}}
});

2. 使用内联表达式（简单逻辑）

对于非常简单的逻辑，可以直接在 @click 后写一个表达式。

<!-- ✅ 正确：使用表达式 -->
<button @click="counter++">增加计数</button>
<button @click="name = 'Vue'">设置名字</button>
<button @click="say('hi')">打招呼</button>

new Vue({data: {counter: 0,name: ''},methods: {say(message) {alert(message);}}
});

3. 使用内联函数调用（带参数或事件）

如果需要传递参数或访问原生事件对象，可以使用内联箭头函数或普通函数调用。

<!-- ✅ 正确：使用内联函数 -->
<button @click="(event) => deleteItem(id, event)">删除</button>
<button @click="() => { if (confirm('确定?')) doSomething() }">确认操作</button>

new Vue({data: {id: 1},methods: {deleteItem(id, event) {console.log('删除 ID:', id, '事件:', event);},doSomething() {// ...}}
});

---

错误的写法（直接写语句）

以下写法是无效的，会导致错误或不按预期工作：

<!-- ❌ 错误：直接写 if 语句 -->
<button @click="if (ok) { return message }">错误示例</button><!-- ❌ 错误：直接写 for 循环 -->
<button @click="for (let i=0; i<10; i++) { console.log(i) }">错误示例</button><!-- ❌ 错误：直接写 var 声明 -->
<button @click="var a = 1; a + 2">错误示例</button>

---

总结

• 在 v-on 事件绑定中，不能直接写 if, for, var 等 JavaScript 语句。
• 可以写：
  • 方法调用：@click="methodName" (推荐用于复杂逻辑)
  • 简单表达式：@click="counter++" 或 @click="name='Vue'"
  • 内联函数调用：@click="(event) => handler(id, event)" 或 @click="() => { /* 简单逻辑 */ }"
• 复杂逻辑应始终放在 methods 选项中，并在事件绑定中调用该方法。

事件对象传递

处理事件时可以使用原生的 event 对象，也可以通过 $event 来引用这个对象。

1.直接使用 event

假设我们有一个按钮，点击时调用一个方法，并且该方法需要访问事件对象：

<button @click="handleClick">点击我</button>

对应的 Vue 实例方法可能如下所示：

new Vue({el: '#app',methods: {handleClick(event) { // 直接将事件对象作为参数传递console.log('事件类型:', event.type); // 输出 'click'console.log('事件目标:', event.target); // 输出触发事件的元素}}
});

在这个例子中，Vue 自动将触发事件的原生 DOM 事件对象作为第一个参数传递给 handleClick 方法。这种方式清晰直观，适合于不需要额外参数的情况。

2.使用 $event

$event 是 Vue 提供的一个特殊变量，用于在内联事件处理器表达式中显式地引用原生 DOM 事件对象。这种方式通常在你需要同时传递自定义参数并访问事件对象时使用。

示例

假设我们有一个按钮，点击时不仅要传递某个特定参数（比如 id），还需要访问点击事件的信息：

<button @click="deleteItem(id, $event)">删除</button>

对应的 Vue 实例：

new Vue({el: '#app',data: {id: 1},methods: {deleteItem(id, event) { // 同时接收自定义参数和事件对象console.log('要删除的ID:', id);console.log('事件对象:', event);// 可以在这里执行其他操作，例如阻止默认行为或停止事件冒泡event.stopPropagation();}}
});

在这个例子中，当我们点击按钮时，deleteItem 方法会被调用，并且会接收到两个参数：一个是 id，另一个是 $event，即原生的 DOM 事件对象。这里的关键点在于通过 $event 显式地将事件对象传递给了方法。

3.使用 内置的event

<button @click="(event) => deleteItem(id, event)">删除</button>

在第一节体验vue中,我们直接使用 event传递. 会有一个弊端.如果event是 data的成员.那么event就不能正确指向dom事件对象.

<button v-on:click="greet(event)">event测试</button>new Vue({el: '#example',data: {event: 'Hello Vue!',},methods: {             greet: function (e) {alert(e);             }}
}

1. $event (Vue 特殊变量)：

   • 这是 Vue.js 框架提供的一个特殊变量。
   • 它总是指向被触发的原生 DOM 事件对象（例如 MouseEvent, KeyboardEvent 等）。
   • 无论你在 v-on 指令的值中如何使用它，$event 的值就是那个原始的、由浏览器生成的事件对象。

2. event (JavaScript 变量/标识符)：

   • 这只是一个普通的 JavaScript 变量名或标识符。

   • 它的值取决于当前 JavaScript 作用域中名为 event 的变量是什么。

   • 在 Vue 的模板表达式里，event 会被当作一个变量来查找。它可能指向：

     • window.event (如果存在)。
     • 一个在 Vue 实例 data 或 methods 中定义的名为 event 的变量