雙向數據綁定 (Two-Way Data Binding)

在 Vue 中，雙向數據綁定 (Two-Way Data Binding) 是一個強大且直觀的功能，允許數據在視圖和模型之間實時同步。這意味著當用戶修改表單輸入（如文字框、選擇框等）的值時，Vue 實例中的數據會立即更新，反之亦然。雙向數據綁定的核心實現是通過指令 v-model。

v-model 可以綁定到表單元素，如 <input>、<textarea>、<select> 等，來實現雙向數據綁定。

1. 基本用法

範例：

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

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

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

在這個例子中，v-model 將 input 元素與 message 變量綁定在一起。當用戶輸入內容時，message 會同步更新，並且會顯示在頁面上。

2. 使用在不同表單元素

v-model 不僅可以應用於 <input> 元素，還可以用於 <textarea> 和 <select> 元素，實現不同的表單交互。

多行文字框 <textarea>

<textarea v-model="message" placeholder="輸入多行文字"></textarea>
<p></p>

下拉選單 <select>

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

在這裡，v-model 綁定到 select 元素，當用戶選擇一個選項時，selected 變量會同步更新。

3. 適用於單選按鈕和複選框

單選按鈕

<div>
  <input type="radio" id="optionA" value="A" v-model="picked">
  <label for="optionA">選項 A</label>

  <input type="radio" id="optionB" value="B" v-model="picked">
  <label for="optionB">選項 B</label>

  <p>你選擇了：</p>
</div>

v-model 在單選按鈕中，綁定到 picked 變量。選中一個按鈕後，picked 的值會是選中的選項。

複選框

<div>
  <input type="checkbox" id="option1" value="Option 1" v-model="checkedOptions">
  <label for="option1">選項 1</label>

  <input type="checkbox" id="option2" value="Option 2" v-model="checkedOptions">
  <label for="option2">選項 2</label>

  <p>你選擇了：</p>
</div>

<script>
const app = Vue.createApp({
  data() {
    return {
      checkedOptions: []
    };
  }
});

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

在複選框中，v-model 綁定到一個數組，當選擇某個選項時，該選項的值會添加到 checkedOptions 數組中；取消選擇時，該值會從數組中移除。

4. 修飾符

v-model 提供了多種修飾符來控制綁定的行為，如 .lazy、.number、.trim 等。

.lazy 修飾符

默認情況下，v-model 會在輸入值改變的同時更新數據。但使用 .lazy 修飾符後，數據會在輸入框失去焦點 (blur) 時才更新。

<input v-model.lazy="message" placeholder="輸入文字後點擊其他地方">
<p></p>

.number 修飾符

.number 會將輸入值自動轉換為數字類型。

<input v-model.number="age" placeholder="輸入數字">
<p>你的年齡是：</p>

.trim 修飾符

.trim 會自動去除輸入值的前後空格。

<input v-model.trim="message" placeholder="輸入內容並去除空格">
<p></p>

5. 使用在自定義組件中

v-model 也可以用於自定義組件，讓組件實現雙向數據綁定。當自定義組件中使用 v-model 時，它實際上是在綁定 modelValue prop 和 update:modelValue 事件。

基本範例：

app.component('custom-input', {
  props: ['modelValue'],
  template: `
    <input
      :value="modelValue"
      @input="$emit('update:modelValue', $event.target.value)"
    >
  `
});

使用這個自定義組件：

<custom-input v-model="customMessage"></custom-input>
<p></p>

在這個範例中，自定義組件 custom-input 透過 v-model 來雙向綁定數據。modelValue 對應於組件的 v-model 傳遞的值，並且通過 update:modelValue 事件來實現數據更新。

總結

Vue 的雙向數據綁定通過 v-model 指令實現，並能夠在不同的表單元素上輕鬆綁定數據。它極大地簡化了表單處理和用戶交互的過程。通過使用 v-model，開發者可以自動保持模型和視圖之間的同步，並使用修飾符來控制數據的處理方式。在複雜的應用中，v-model 也可以應用於自定義組件中，使雙向數據綁定更具靈活性和可重用性。