魔鏡的神奇之處就是會出現不同於鏡子前的影像，那和螢幕有什麼不ㄧ樣？

之前的幾天我們有說到 Vue 的運作是用資料來驅動(渲染)畫面，聽起來好像是「單向的」操作，但其實 Vue 也有雙向綁定的強大功能，這對在網頁上常需要以表單收集使用者輸入的資訊來說非常方便。今天我們就來使用 Vue 資料雙向綁定的特性，做表單資料的自動收集。

先去 codepen 看看效果：Vue.js Form Input Bindings 表單輸入綁定

通常在處理表單的時候，在填完表單時，通常以<from>標籤內的action屬性來傳送，但在 Vue 裡，可以先把<from>的預設submit動作取消，並以監聽的方式(v-on)處理：@submit.prevent(方法)。當我們按下送出表單鍵時，就會去執行handleSubmit這個方法，在方法裡再指定我們希望如何處理表單內的資料就可以了。

雙向資料綁定

想要獲取使用者的輸入，把表單中所獲得的值和資料做關聯的綁定，這樣就可以很方便地獲得輸入值和資料做互動，這種「雙向資料綁定」，就是無論更改哪一邊，都會同步的在兩邊更新資料，也會同時同步渲染到我們的頁面中。這樣的運作很像是照鏡子，一但資料雙向綁定，就會如同照鏡子般「一模一樣」了。

表單裡的標籤綁定

透過表單提取使用者要拿到的資料，主要以v-model來做資料的雙向綁定，達到自動收集填入資料的目的。表單裡有單純的輸入(text/textarea)、單選項(radio)、複選項(checkbox)和選單(select)，實例中我們必須先在data裡初始化我們會用到的值，這些初始值則是對應到 HTML 表單標籤裡的value，例如，如果我們希望預設的radio選項是 female，在data裡的sex初始，給female就可以了，以此類推。

但需要注意的是，因為複選項(checkbox)是可以複選的，所以初始時也必須是陣列格式才能複選。

另外，在選單(select)的部分，可以在實例的data中先把物件型態的陣列準備好，然後在 HTML 使用v-for迴圈的方式讀取選單裡的選項。要特別注意的是，通常在資料庫裡，我們需要的會是這些屬性的id而非文字，所以物件型態的陣列可以給兩個屬性：city.name和city.id，找到id就可找到對應的城市名。
而這個選單(select)的初始值，也就是v-model綁定的cityId，在實例的data裡也須先初始化好。

指定選單資料型別

如果我們希望使用者所輸入的資料是固定的某一資料型別，例如可以計算的number，那麼我們也可以在 HTML 標籤的屬性上指定 v-model 的資料型別，確保同步時使用者更動回來的是數字。例如：

<input v-model="productPrice" type="number" />
<p>商品價格：{{ productPrice }}</p>

HTML 的部分

<div id="app">
  <form action="xxx" @submit.prevent="handleSubmit">
    <p><span>Name : </span><input type="text" v-model="name" /></p>
    <p>
      <span>Password : </span><input type="password" name="pwd" v-model="pwd" />
    </p>
    <p>
      <span>Sex : </span>
      <input type="radio" name="" id="female" value="female" v-model="sex" />
      <label for="female">Femme</label>
      <input type="radio" name="" id="male" value="male" v-model="sex" />
      <label for="male">Home</label>
    </p>
    <p>
      <span>Hobby : </span>
      <input type="checkbox" value="travel" id="travel" v-model="hobbys" />
      <label for="travel">Travel</label>
      <input type="checkbox" value="cinema" id="cinema" v-model="hobbys" />
      <label for="cinema">Cinema</label>
      <input type="checkbox" value="food" id="food" v-model="hobbys" />
      <label for="food">Food</label>
      <input type="checkbox" value="sport" id="sport" v-model="hobbys" />
      <label for="sport">Sport</label>
    </p>
    <p>
      <span>City : </span>
      <!-- 動態顯示 -->
      <select name="city" v-model="cityId">
        <option value="">No selection</option>
        <!-- 如果直接寫value="city.id" 會被當成是字串，需加上冒號 :value="" 成為表達式 -->
        <option :value="city.id" v-for="(city, index) in citys" :key="city.id">
          {{city.name}}
        </option>
      </select>
    </p>
    <p>
      <textarea
        name="info"
        cols="30"
        rows="10"
        placeholder="Self introduction"
        v-model="info"
      ></textarea>
    </p>
    <p>
      <input type="submit" value="register" />
    </p>
  </form>
</div>

實例中我們必須先在data的物件裡初始化我們會用到的值，這些初始值則是對應到 HTML 表單標籤裡的value。

Vue 實例的部分

const vm = new Vue({
  el: '#app',
  data: {
    name: '',
    pwd: '',
    sex: 'female', // 預設值是從 value 抓來的
    hobbys: ['travel'],
    citys: [
      {
        id: 1,
        name: 'Paris',
      },
      {
        id: 2,
        name: 'Taipei',
      },
      {
        id: 3,
        name: 'London',
      },
      {
        id: 4,
        name: 'Tainan',
      },
    ],
    cityId: '2',
    info: '',
  },
  methods: {
    handleSubmit() {
      console.log(
        this.name,
        this.pwd,
        this.sex,
        this.hobbys,
        this.cityId,
        this.info
      );
    },
  },
});

參考：表單輸入綁定 — Vue.js

每日一句法文有益身心：Attention ! --> 阿.東.熊！ --> 小心、請注意！