模板中的 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 %