iT邦幫忙

2021 iThome 鐵人賽

DAY 5
1
Modern Web

Vue.js 什麼意思系列 第 5

Day 05:簡寫好用一直用-v-on、v-bind

延續上篇最後提到 Webpack 設置了別名「@」來取代路徑「/src」,然而在模版語法中,「@」則是另外的用途,因此一開始先分辨清楚各自的定義,之後就能運用自如了!本篇這就來簡介兩個最常使用的簡寫代表:「@」、「:」。

「@」v-on:監聽事件

原生 JavaScript 處理監聽事件,要先從 DOM querySelector() 找到目標元素,接著 addEventListener() 將監聽事件註冊到該元素上,當觸發指定事件類型時,再執行 listener callback 函式;這一連串的過程默默締造出好幾行程式碼,但在 Vue.js 則不用這般大費周章,只需要在 <template> 中直接對目標元素加上 v-on 監聽事件類型及觸發事件後的處理函式即可。

像是前陣子突然風靡一時的 POPCAT 點擊大賽,我們也可以做個簡易版的計次器。

  • 方法一:直接在 <template> 寫明表達式。

    <h1>{{ clicks }}</h1>
    <button type="button" @click="clicks += 1">Click it!</button>
    
    data() {
      return {
        clicks: 0,
      };
    },
    
  • 方法二:透過 methods 調用函式(適用於處理邏輯較繁複時)。

    <h1>{{ clicks }}</h1>
    <button type="button" @click="counter">Click it!</button>
    
    data() {
      return {
        clicks: 0,
      };
    },
    methods: {
      counter() {
        this.clicks += 1;
        if (this.clicks % 50 === 0) {
          alert(`Already ${this.clicks} clicks.`);
        }
      },
    },
    

另外還可以直接在事件類型後方追加「事件修飾符」,且修飾符可被串連著使用。

<a @click.stop.prevent="linkToPage">Link</a>
  • Vanilla.js - event.stopPropagation() ⇒ Vue.js - @eventType.stop
    停止事件傳遞
  • Vanilla.js - event.preventDefault() ⇒ Vue.js - @eventType.prevent
    阻止事件發生預設行為

「:」v-bind:綁定 attribute

由於 Mustache 語法無法直接作用在 HTML attribute 上,因此需透過 v-bind 進行綁定。觀察模板語法與編譯結果之間的差異,便能了解綁定屬性的運作方式,通則就是只要 attribute 為 true 就能被編譯出來。

  • 一般綁定

    <button type="button" :disabled="isUnclickable">
      Cannot click!
    </button>
    
    data() {
      return {
        isUnclickable: true,
      };
    },
    

    編譯結果:因為 isUnclickable 為 true,使得該按鈕無法點擊

    <button type="button" disabled="disabled">
      Cannot click!
    </button>
    
  • Object 語法

    <button 
      type="button"
      :class="{ important: isImportant, disable: isUnclickable }"
    >
      Click it!
    </button>
    
    data() {
      return {
      	isImportant: true,
        isUnclickable: false,
      };
    },
    

    編譯結果:只有 isImportant 為 true,因此 class 不包含 isUnclickable

    <button type="button" class="isImportant">
      Click it!
    </button>
    
  • Array 語法

    <button type="button" :class="[mainClass, disableClass]">
      Click it!
    </button>
    
    data() {
      return {
    	mainClass: "important",
        disableClass: "unclickable",
      };
    },
    

    編譯結果:依序編譯出陣列中所對應的 class name

    <button type="button" class="important unclickable">
      Click it!
    </button>
    

少打幾個程式碼累積起來的時間也是相當可觀的,況且簡寫本身好記又好用,下次看到它們可別再搞混其對應的本尊囉!

參考資料


上一篇
Day 04:.vue 檔三層櫃
下一篇
Day 06:小孩子才做選擇-BootstrapVue 全部引入
系列文
Vue.js 什麼意思30

尚未有邦友留言

立即登入留言