tags: Vue.js ItIron2020

前言

前天我們介紹了v-if 、 v-show & v-for 三種不同的vue directives，目前為止我們已經涵蓋了大部分最常使用的directives

• v-on
• v-bind
• v-if
• v-show
• v-for

今天要來介紹的是雙向綁定v-model以及如何在vue中打造專屬你自己的vue directives! 馬上就開始吧!

什麼是v-model? 又什麼是雙向綁定?

問得好! 如果大家對於之前的文章還有印象的話，我們曾介紹過v-bind這樣單向綁定的概念，也就是利用你定義在data屬性內的變數綁定在指定的DOM元素上

<h1 :style={color: textColor}> 你好 我是Danny </h1>

data() {
    return {
        textColor: 'red'
    }
}

在上方的範例中，上方的h1元素就是紅字呈現!
你可以注意到，在這樣的資料傳遞過程中，是單純從vue實體 -> DOM，那如果我今天希望在DOM中操作vue實體中的變數、同時希望在實體做的任何更動也會反應在template中呢? 像是使用者輸入密碼時檢查那個密碼是否符合規定、將使用者輸入的字串發送到後端去請求特定的資料等，這種情況就需要v-model來協助我們囉! 我們稍微修改一下上方的範例吧! 你也可以fork這隻pen自己玩玩看!

<template>
  <div id="app">
    <h1 :style="{color:textColor}">{{message}}</h1>
    <input type="text" v-model="message">
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '你好 我是Danny',
      textColor: 'red'
    };
  }
};
</script>

在這個範例中，我們新增了一個input元素，並利用v-model將它與message變數做了雙向綁定，你可以注意到不管你是在input欄位修改裡面的值、或是你直接修改在實體中的message變數，頁面都會呈現相應的變化! 這樣的行為在控制表單送出時相當的方便，利用v-model綁定各種input元素，我們可以將使用者所有的輸入值都利用變數存起來，待使用者提交表單時再將整包資料一起送出!

我們再多新增一些東西到之前的範例中，可以更直接的了解實務上是怎麼利用雙向綁定送出表單的! 一樣可以到今天的demo檔案玩玩看!

<div class="form-container">
      <form>
        <h2>模擬送出表單</h2>
        <div class="input-group">
          <label for="username">請輸入帳號: </label>
          <input type="text" name="username" v-model="username">
        </div>
        <div class="input-group">
          <label for="username">請輸入密碼: </label>
          <input type="text" name="username" v-model="password">
        </div>
        <button @click.prevent="handleSubmit">送出</button>
      </form>
</div>

<script>
export default {
  data() {
    return {
      message: '你好 我是Danny',
      textColor: 'red',
      username: '',
      password: ''
    };
  },
  methods: {
    handleSubmit() {
      alert(`你所輸入的帳號是: ${this.username} \n而你所輸入的密碼是${this.password}`);
    }
  }
};
</script>

藉由雙向綁定收集使用者輸入的資訊後，再利用之前學到的v-on將資料送出，最後你會看到以下的輸出結果!

directives真他奶奶的酷! 我能自己寫一個嗎?

Note :這部分的內容稍微進階了些，這邊我只會做簡單的說明示範，詳細的內容還是建議大家去看一下vue的官方文件針對這部分的說明!

當然當然可以自己寫一個囉!在vue實體中也有提供directives屬性讓你客製化屬於自己的指令，使用的方法也相當單純，假設今天我想要一個v-focus的指令讓我能直接聚焦到某個input元素上，那你的vue實體中就可以這樣寫~!

directives: {
  // 你的客製化指令名稱
  focus: {
    // 你想在哪個時間點執行什麼操作
    inserted: function (el) {
      el.focus()
    }
  }
}

在directives屬性中提供了各種不同的hook(你可以想成不同的時間點)讓你精確的設定你打算什麼時候讓你的指令發揮效果。

• bind 只在指令被綁定到指定的元素時執行一次傳入的callback
• inserted 當綁定的元素被插入到DOM中就執行傳入callback
• update 當包含綁定元素的VNode被更新時就執行傳入的callback

而你傳入的callback也有一些參數讓你使用，第一個參數會預設為el，同時也是最常用的一個，其他的還有以下

• el 綁定的元素
• binding 一個包含指令名稱、值與傳入參數的物件
• vnode vue產出的虛擬節點

了解這些後再回頭看一下上方的例子，其實就是宣告一個叫做v-focus(你自訂的指令會有v-這樣的prefix)指令，這個指令會在被綁定的元素被插入DOM時自動focus該元素! 馬上就來使用一下吧!

我們希望使用者可以快速輸入帳號，請你在帳號的input掛載我們剛建立的指令

<input type="text" name="username" v-model="username" v-focus>

待更新完成後，你就會發現游標自動聚焦到那個欄位上囉! 很神奇吧!

結語

今天我們介紹了最後的月牙天衝，呃不對，是最後的vue-directives，同時簡單的帶過了如何自訂屬於自己的指令並掛載到指定的元素上! 實際上在vue中的指令遠遠不只介紹的這些，這三天的文章只是帶過一些最常使用的原生指令，讓你們對directives有個基本的概念! 未來在接觸各種vue框架時，你也會發現他們多半都有一些自定義的指令讓你使用，可見是多麼方便的東西:D 目前我們已經學到了各種的指令，同時也接觸了data & methods屬性，明天我們將會進入一個小小小專案的實作，讓各位打鐵趁熱! 快速應用所學! 我們明天見!

此文章同步發布於個人部落格，有興趣的大大也可以來參觀一下:D

參考文章

vue custom directives