這次跟著複習的腳步，再來看看 Vue 常用的指令吧！如果是第一次來的朋友，歡迎先去看看第一篇簡介 Vue 框架的文章喔。

常用指令

v-on 事件監聽

使用 DOM API 監聽事件的時候，會需要先把要觸發事件的節點設定出來，再用 addEventListener() 來做監聽。在 Vue 裡面只需要將 v-on 寫在想觸發事件的 HTML 標籤上，就可以進行事件監聽。

使用方法為：v-on:事件動作="事件動作執行後要用的 method" 可以簡寫為：@事件動作="事件動作執行後要用的 method"

假設我們想在點擊按鈕後觸發瀏覽器提醒，可以這樣寫：

<button v-on:click="alertAfterClick">點擊按鈕</button>

或者使用簡寫：

<button @click="alertAfterClick">點擊按鈕</button>

觸發事件後會執行的方法寫在 method 裡面：

methods: {
    alertAfterClick () {
      window.alert('點擊到按鈕了')
    }
}

如此一來視窗就會順利出現相對應得 Alert 囉！

v-bind

想增加 HTML 屬性值或把父元件的資料帶入子元件時就可以使用 v-bind。

使用方法為：v-bind: 屬性名稱或要被使用之資料現在使用時要用的名稱="屬性值(主要會用 true 和 false 操控)或資料名稱" 可以簡寫為：:屬性名稱或要被使用之資料現在使用時要用的名稱="屬性值(主要會用 true 和 false 操控)或資料名稱"

直接來看看例子吧，我們將 img 標籤綁定了使用者的 ID 與大頭貼照片：

<img
  v-bind:src="user.avatar"
  v-bind:data-id="user.id"
>

或者使用簡寫：

<img
  :src="user.avatar"
  :data-id="user.id"
>

大功告成！

v-for 迴圈

在 Vue 框架中當然也有迴圈來渲染資料，可以將陣列資料依序渲染到 HTML 裡面，只需要一組固定的 HTML，不需要像操控 DOM 一樣，還要額外插入 HTML。

使用方法為：v-for="(item, index) in items" 加上 :key="item.id"

加上 key 的原因是因為 Vue 會用 key 值判斷資料有無被修改，有 key 值的時候，在渲染資料時，就可以避免因為資料所造成的渲染問題。

看看範例怎麼寫：

<UserList
  v-for="user in users"
  :key="user.id"
  :user="user"
  @afterToggleFollow="afterToggleFollow"
/>

我們在 UserList 這個 component 傳入 user 的迴圈，同時綁定 key 值，這樣設定後，就會依照資料數量來渲染 user 的卡片數。

v-model 雙向綁定

雙向綁定可以讓我們在操作資料時更方便與彈性，如果沒有將資料雙向綁定，就只能單方面地從後端資料庫更改內容，但要是做了雙向綁定，當使用者在輸入時也能一定更改資料內容喔！可以想成是你在更改帳號名稱的時候，我們就會做雙向綁定來取得你的新名稱。

使用方法為：v-model="要綁定的資料"

範例：

<input v-model="search">

我們在 input 上做資料的雙向綁定是為了要取得使用者想查詢的內容是什麼，如此才能使用這個內容再撈資料回傳給使用者。

v-if, v-else, v-else-if 條件設定

這個條件是判斷就跟 JavaScript 中的一樣，設定一個條件，來決定是否渲染這部分的 HTML。如果為 true，就會出現 HTML；如果為 false，就不渲染 HTML

使用方法為：v-if="條件內容"，可以搭配 v-else 使用，若多條件則再加 v-else-if

範例：

<template v-if="mode === 'card'">
  <UserCard
    v-for="(user, index) in users"
    :key="user.id"
    :user="user"
  />
</template>

<template v-else>
  <UserList
    v-for="user in users"
    :key="user.id"
    :user="user"
  />
 </template>

當現在的 mode 是卡片時則顯示 UserCard 的元件；否則顯示 UserList。

v-show

跟 v-if 很像，都可以用 true 和 false 來控制是否顯示指定部分的內容，不同的地方是，v-if 會決定是否渲染，而 v-show 不管是 true 還是 false 都會渲染出來，只是會用 CSS hidden 讓這部分被隱藏，所以從開發者工具查看的話，不管是 true 還是 false 的 HTML 都會被顯示在上面。

使用方法為：v-show="條件內容"

<template v-show="mode === 'card'">
  <UserCard
    v-for="(user, index) in users"
    :key="user.id"
    :user="user"
  />
</template>

當 mode 是 card 時會被渲染在畫面上，但即使不等於時這一段 HTML 也會在開發者工具出現，只是會被設定 display: none。

休息一下吧

這次指令就複習到這邊，是不是有種躍躍欲試的感覺呢？快把新學到的把手玩一玩吧!