iT邦幫忙

2021 iThome 鐵人賽

DAY 4
0
Modern Web

別再說我不會框架,網頁 Vue 起來!系列 第 4

模板中的 Directive 指令 (上)

前言

在之前,在範例中會使用雙括號 {{}},做最最最最最最基本的資料綁定。
ex:

<span>Message: {{ msg }}</span>

 但 {{}} 無法用在 HTML 屬性中,若要在元素的屬性中使用需透過 v-bind

ex:

<div v-bind:id="dynamicId"></div>

以下會介紹常用在模板中的指令,讓我們能更輕鬆的控制 DOM !


指令 Directive

是一種特別的屬性,以 v- 為前綴詞,directive 的作用是當狀態或值改變時,替我們去更新 DOM !

ex:

<p v-if="seen">Now you see me</p>

根據 seen 值,決定是否要置入 p元素

而有些 directive 可傳入參數 (argument),以冒號方式接在 directive 後方。
ex:

<a v-bind:href="url"> ... </a>
// 可縮寫成 <a :href="url"> ... </a>

v-bind 綁定href屬性到元素上。

ex:

<a v-on:click="doSomething"> ... </a>
<!-- 可縮寫成 <a @click="doSomething"> ... </a> -->

v-on 用來監聽 DOM 事件,傳入的參數就監聽的事件名稱

將 Directive 做分類,以下介紹:

  1. 模板/內容綁定
  2. 條件渲染
  3. 列表渲染

模板/內容綁定

v-text

更新元素的 textContent
ex:

<span v-text="msg"></span>
<!-- 等同於 -->
<span>{{msg}}</span>

v-html

更新元素的innerHTML,在網站動態的置入 HTML 要非常小心有XSS 攻擊

條件渲染

v-if & v-else & v-else-if

根據條件式來決定顯示的區塊。
ex:

<h1 v-if="awesome">Vue is awesome!</h1>

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no ?</h1>

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

因為 v-if 只能使用在單一元素上,如果要控制多個元素的顯示,可以在<template>上使用v-if
ex:

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

v-show

使用display來控制元素的顯示,不同於 v-if 是整個元素都移除,而 v-show 無法用在<template>上。

列表渲染

使用 v-for去渲染列表中的項目。
ex:

<!-- items 是 data 中的陣列資料-->
<ul id="array-rendering">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

<!-- 也可取用到項目的 index -->
<ul id="array-with-index">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

v-for 也可用來遍歷物件。

ex:

<ul id="v-for-object" class="demo">
  <li v-for="value in myObject">
    {{ value }}
  </li>
</ul>
Vue.createApp({
  data() {
    return {
      myObject: {
        title: 'How to do lists in Vue',
        author: 'Jane Doe',
        publishedAt: '2016-04-10'
      }
    }
  }
}).mount('#v-for-object')

和陣列一樣,也可以取得物件的屬性

<li v-for="(value, name) in myObject">
  {{ name }}: {{ value }}
</li>

補充

Vue 預設使用 in-place patch 的方式,也就是如果陣列或是物件中的項目順序改變,Vue為了效能,不會去移動 DOM 元素,只會更新元素的內容。
為了讓 Vue 可以追蹤每一個節點,讓我們可以去重複使用或是重新排列已存在的元素,會使用 key屬性,讓節點可被識別。(給一個唯一識別的值,身分證)
ex:

<div v-for="item in items" :key="item.id">
  <!-- content -->
</div>

下篇預告

  • directive 續

每日一句:
連假已過 50%,哀傷 100 % /images/emoticon/emoticon04.gif


上一篇
資料呈現與運算處理
下一篇
模板中的 Directive 指令 (下)
系列文
別再說我不會框架,網頁 Vue 起來!30

尚未有邦友留言

立即登入留言