iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 5
0
Modern Web

30天手把手的vue.js教學!系列 第 5

2020it邦鐵人賽-30天手把手的Vue.js教學 Day5-認識vue directives(下) v-model & custom directives

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將資料送出,最後你會看到以下的輸出結果!

v-model demo

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


上一篇
2020it邦鐵人賽-30天手把手的Vue.js教學 Day4-認識vue directives(中) v-if & v-for
下一篇
2020it邦鐵人賽-30天手把手的Vue.js教學 Day6-打鐵趁熱,利用所學打造簡單的計算機專案吧!
系列文
30天手把手的vue.js教學!30

尚未有邦友留言

立即登入留言