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?的變量