事件處理與表單

在 Vue 3 中，事件處理 和 表單綁定 是非常重要的功能，幫助開發者處理用戶的互動，特別是處理表單提交、按鈕點擊等操作。Vue 提供了簡單的語法和方法來讓這些操作變得直觀和高效。

1. 事件處理

Vue 使用 v-on 指令來綁定 DOM 事件。這個指令可以監聽事件，如點擊、提交、鍵盤事件等，並且可以簡化寫成 @ 符號。

基本事件綁定

通過 v-on 指令來監聽 DOM 事件。例如：

<div id="app">
  <button v-on:click="handleClick">點擊我</button>
</div>

<script>
const app = Vue.createApp({
  data() {
    return {};
  },
  methods: {
    handleClick() {
      alert('按鈕被點擊了！');
    }
  }
});

app.mount('#app');
</script>

在這個例子中，當按鈕被點擊時，會觸發 handleClick 方法，並彈出一個警告對話框。

簡寫語法

Vue 提供了 @ 的簡寫形式來代替 v-on，使代碼更加簡潔：

<button @click="handleClick">點擊我</button>

2. 事件參數

當需要將事件作為參數傳遞時，可以在方法中接收事件對象 event。這對於需要訪問事件的屬性（如鍵盤按鍵、鼠標位置等）非常有用。

使用事件對象

<button @click="handleClick($event)">點擊我</button>

<script>
const app = Vue.createApp({
  methods: {
    handleClick(event) {
      console.log(event);
      alert('事件類型：' + event.type);
    }
  }
});

app.mount('#app');
</script>

在這個例子中，$event 是自動傳遞的事件對象。

3. 事件修飾符

Vue 提供了一些常用的 事件修飾符，來處理事件的不同行為，例如防止事件冒泡、阻止默認行為等。

.stop 阻止事件冒泡

<button @click.stop="handleClick">阻止冒泡</button>

.prevent 阻止默認行為

這個修飾符通常用於表單提交事件，以防止頁面重新加載。

<form @submit.prevent="handleSubmit">提交</form>

.capture 捕獲階段觸發事件

<button @click.capture="handleClick">捕獲事件</button>

.once 只觸發一次

這個修飾符確保事件只會觸發一次。

<button @click.once="handleClick">只觸發一次</button>

.self 只在事件來源是該元素本身時觸發

<div @click.self="handleClick">只在點擊我時觸發</div>

4. 鍵盤事件修飾符

Vue 還提供了針對鍵盤事件的修飾符，使得處理按鍵事件更加方便。

處理鍵盤按鍵

<input @keyup.enter="submitForm">

在這裡，當用戶按下 Enter 鍵時，會觸發 submitForm 方法。

常用的鍵盤事件修飾符

• .enter：按下 Enter 鍵
• .tab：按下 Tab 鍵
• .delete：按下 Delete 鍵
• .esc：按下 Esc 鍵
• .space：按下 Space 鍵
• .up：按下 ↑ 鍵
• .down：按下 ↓ 鍵

Alt、Ctrl、Shift 和 Meta 修飾符

可以配合 Alt、Ctrl、Shift 和 Meta 鍵來處理鍵盤組合鍵：

<input @keyup.ctrl.enter="submitForm">

這段代碼會在用戶按下 Ctrl + Enter 組合鍵時觸發 submitForm。

---

5. 表單處理

Vue 提供了非常便捷的方式來處理表單，主要是通過 v-model 指令來實現雙向數據綁定。這使得表單元素和 Vue 實例中的數據可以實時同步。

處理表單輸入

<div id="app">
  <input v-model="message" placeholder="輸入一些文字">
  <p>你輸入的是：</p>
</div>

<script>
const app = Vue.createApp({
  data() {
    return {
      message: ''
    };
  }
});

app.mount('#app');
</script>

當用戶在輸入框中輸入內容時，message 變量會同步更新，並且實時顯示在頁面上。

處理表單提交

通過監聽表單的 submit 事件，並使用 .prevent 修飾符來阻止頁面的默認提交行為。

<form @submit.prevent="handleSubmit">
  <input v-model="message" placeholder="輸入內容">
  <button type="submit">提交</button>
</form>

<script>
const app = Vue.createApp({
  data() {
    return {
      message: ''
    };
  },
  methods: {
    handleSubmit() {
      alert('表單提交：' + this.message);
    }
  }
});

app.mount('#app');
</script>

在這裡，表單提交後會彈出提示框，顯示用戶輸入的內容。

6. 處理複選框、單選按鈕和下拉選單

v-model 不僅可以用於文本輸入，還可以用於其他表單元素，如複選框、單選按鈕和下拉選單。

複選框

<input type="checkbox" v-model="checked"> 我同意
<p>是否同意：</p>

<script>
const app = Vue.createApp({
  data() {
    return {
      checked: false
    };
  }
});

app.mount('#app');
</script>

單選按鈕

<input type="radio" value="A" v-model="picked"> A
<input type="radio" value="B" v-model="picked"> B
<p>你選擇的是：</p>

<script>
const app = Vue.createApp({
  data() {
    return {
      picked: ''
    };
  }
});

app.mount('#app');
</script>

下拉選單

<select v-model="selected">
  <option disabled value="">請選擇</option>
  <option>A</option>
  <option>B</option>
</select>
<p>你選擇了：</p>

<script>
const app = Vue.createApp({
  data() {
    return {
      selected: ''
    };
  }
});

app.mount('#app');
</script>

---

總結

Vue 提供了簡單且強大的事件處理和表單綁定功能，通過 v-on 指令來監聽事件，並結合修飾符來處理常見的需求。此外，v-model 指令為表單元素提供了雙向數據綁定的能力，使得處理表單輸入變得輕鬆高效。開發者可以利用這些特性輕鬆實現各種互動操作。