iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 3
1
Modern Web

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

# 2020it邦鐵人賽-30天手把手的Vue.js教學 Day3-認識vue directives(上)

tags: Vue.js ItIron2020

前言

我們在昨天的文章中介紹了vue實體中最重要的兩個屬性,data & methods,並且成功的將我們寫的一個函數利用v-on掛載到button上,達到事件監聽的效果! 其實v-on只是眾多vue directives之一,還有很多好用的directives等著我們使用,今天就來好好地介紹一下什麼是vue directives,並從最常見的v-on & v-bind來做介紹!

到底什麼是vue directives

坦白講我一直沒有找到非常貼切的中文翻譯,所以暫時我先用directives做說明。其實vue directives就是一種在vue中可以讓你掛在HTML元素上的特殊指令,常見的有以下

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

這些指令可以幫助我們輕鬆的監控事件、同步資料或是渲染元件,有著許許多多神奇的用途,會利用這幾天的文章慢慢地介紹,在template中你常常會看到類似以下的寫法,我們之後會慢慢說明,現在只要有個印象就好。

<template>
  <div id="app">
    <label for="name">輸入你想顯示的文字吧!</label>
    <input type="text" v-model="message" name="msg">
    <h1 v-if="isWelcomed">{{ message }}</h1>
    <img :src="imgSrc">
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Welcome to Vue!',
      imgSrc: 'https://upload.cc/i1/2020/08/23/rGPIy0.jpg',
      isWelcomed: true
    };
  }
};
</script>

上方簡單的程式碼便會呈現以下的畫面,仔細觀察一下data內的值與template的關係,一樣先有個印象就好,等文章結束後相信大家都能看懂發生什麼事情了:D


directives demo


認識 v-on: Vue中的event handler!

在上篇文章中我們已經簡單介紹過v-on,就像上一篇文章說過的,v-on幾乎適用於所有原生DOM事件

<h1 v-on:click="method">Click me!</h1>
<h1 v-on:dblclick="method">Double Click me!</h1>
<form v-on:submit="method">...</form>
<input v-on:keydown="method"
placeholder="Press down on keys" />
<input v-on:keyup="method"
placeholder="Release keys" />

此外,v-on也提供縮寫以及行內(inline-javascript)的寫法

// 原始寫法
<h1 v-on:click="method">Click me!</h1>

// 縮寫
<h1 @click="method">Click me!</h1>

// 縮寫 & inline-javascript
<h1 @click="isAdmin = true">Click me!</h1>

同時,vue也提供了各種修飾符(event modifiers)讓我們更精確的做事件監聽處理。 舉個例子來說,以往我們在寫原生js的時候,常常需要使用到event.preventDefault() 或是 event.stopPropagation(),在vue中可以輕易地利用修飾符達到一樣的效果。 我們可以看一下官方文件提供的範例進一步的了解

<!-- 下方的點擊事件將不會繼續傳播 -->
<a v-on:click.stop="doThis"></a>

<!-- 下方的submit事件將不會刷新頁面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修飾符是可以彼此串接的 -->
<a v-on:click.stop.prevent="doThat"></a>

而除了事件的修飾符,vue還提供了特殊按鍵的監聽修飾符(Key Modifiers),讓我們可以簡單的根據使用者按下的key去決定觸發的事件

<!-- 下方的點擊事件將會由enter按鍵觸發 -->
<input v-on:keyup.enter="submit">

<!-- 方的點擊事件將會由Alt + C 觸發-->
<input v-on:keyup.alt.67="clear">

認識 v-bind: Vue中的屬性綁定!

我們知道data中的屬性可以透過Mustache Syntax呈現在template上,但要是今天HTML的一些屬性、甚至是樣式想透過script來調整該怎麼辦? 舉個例子來說,今天有個圖片,其來源可能會隨時變動,你要怎麼用vue達到這一點呢? 這時候就是v-bind的出場時機了! 還記得一開始的例子嗎?

<template>
  <div id="app">
    <img v-bind:src="imgSrc">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgSrc: 'https://upload.cc/i1/2020/08/23/rGPIy0.jpg'
    };
  }
};
</script>

在這個使用情境中,我們將圖片檔的來源綁定data中的imgSrc屬性,所以之後要修改圖片的話,只要修改data中對應的數值即可! 是不是很方便呢?
基本上常見的HTML屬性都可以透過v-bind來綁定,像是href、id、class等,若你習慣使用各種前端套件開發,其中各種自定義的屬性也都是靠v-bind去處理!

當然,貼心的vue自然也提供了縮寫的方式,上方的範例可以藉由縮寫方式改寫

<img :src="imgSrc">

除了與HTML屬性綁定外,v-bind也支援style的綁定(以物件形式接收)。

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data: {
  activeColor: 'red',
  fontSize: 30
}

另一種常見的用法則是針對class做動態綁定(以陣列形式接收)

<div v-bind:class="[activeClass, errorClass]"></div>

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

// 以上的程式碼最終會render出以下的元素

<div class="active text-danger"></div>

你也可以配合條件式去決定要綁定哪個class,下方的範例必定會綁定errorClass,但activeClass會依據isActive的值決定要不要綁定

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

結語

今天我們介紹了vue中最重要的兩個directives,v-on & v-bind,我們談了如何應用今天所學達成最基本的事件監聽與屬性綁定,這兩個指令的應用範圍都極廣,各位可以透過codepen之類的線上編輯器親自體驗一下,或是直接參照今天示範的簡易pen,裡面還有還沒介紹到的v-model & v-if,可以先體驗一下:D 後續會慢慢介紹的,不用緊張! 那今天就到此為止,本來是打算至少講一半指令的,不過這個字數再衝下去可不行XD

參考文章

vue官方文件


上一篇
# 2020it邦鐵人賽-30天手把手的Vue.js教學 Day2-認識Vue.js中的data & methods屬性!
下一篇
2020it邦鐵人賽-30天手把手的Vue.js教學 Day4-認識vue directives(中) v-if & v-for
系列文
30天手把手的vue.js教學!30

尚未有邦友留言

立即登入留言