前言

在前一篇文章中，介紹了Vue3的模板語法，讓我們對Vue3的模板有了初步的認識。今天我們要來介紹Vue3中非常重要的一個部分 —— 指令(Directives)。

指令的基本概念

指令(Directives)是 Vue 提供的用來在模板中註冊響應式行為的特殊屬性。它們以「v-」作為前綴的特殊符號，並放在 DOM 元素上的 HTML 屬性中使用。

指令 attribute 的期望值为一个 JavaScript 表达式 (除了少数几个例外，即之后要讨论到的 v-for、v-on 和 v-slot)。
來源：官方文件

常見的內建指令

常見的指令包括：

v-text：更新元素的 textContent
v-html：更新元素的 innerHTML
v-if：根據條件（表達式的值）選擇性渲染元素
v-for：基於數據（數組或對象的值）渲染元素/組件列表
v-on：在HTML元素上綁定事件監聽器
v-bind：將Vue實例的數據綁定到HTML上
v-model：在表單元素上創建雙向數據綁定

可以從官方文件的內置指令頁面看到所有的內建指令，以及詳細的使用介紹。

直觀了解完整指令語法的圖片：

• name：
  指令的名稱，以 v- 為前綴。如v-if、v-for等。

指令 attribute 的期望值为一个 JavaScript 表达式 (除了少数几个例外，即之后要讨论到的 v-for、v-on 和 v-slot)。一个指令的任务是在其表达式的值变化时响应式地更新 DOM。以 v-if 为例：

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

这里，v-if 指令会基于表达式 seen 的值的真假来移除/插入该<p>元素。
來源：官方文件

• 參數（argument）：
  傳遞給指令的參數，以冒號表示。
  如 v-bind:href 中的 href 就是 argument。
  還有<a v-on:click="doSomething"> ... </a>能夠監聽DOM事件。

<a v-bind:href="url"> ... </a>

<!-- 简写 -->
<a :href="url"> ... </a>

这里 href 就是一个参数，它告诉 v-bind 指令将表达式 url 的值绑定到元素的 href attribute 上。在简写中，参数前的一切 (例如 v-bind:) 都会被缩略为一个 : 字符。
來源：官方文件

• 修飾符（modifiers）：
  以點表示的後綴詞，用來指示指令以特殊方式綁定。如v-on:click.prevent 中的.prevent。

<form @submit.prevent="onSubmit">...</form>

• values：
  對應指令的 JavaScript 表達式的值。可以是靜態的，也可以是動態的。

程式碼示例一覽表：

<!-- name --> 
<p v-text="message"></p>

<!-- argument -->
<a v-bind:href="url"></a> 

<!-- modifiers -->
<form v-on:submit.prevent></form>

<!-- values -->
<button @click="say('hello')">Greet</button>

簡易常見內建指令的用法

這裡先簡單介紹v-if的用法，詳細用法都可以在官方文件的內置指令頁面中閱讀到。之後也會詳細介紹v-bind的部分。
v-if：
v-if 指令用於條件性地渲染一塊內容，會在指令的表達式返回真值時才被渲染。

<template>
  <div id="app">
    <p v-if="showTrue"> v-if 為 true 时顯示</p>
    <p v-if="showFalse"> v-if 為 false 时不顯示</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const showTrue = ref(true);
const showFalse = ref(false);
</script>

總結

今天的分享就到這裡，明天將會介紹Vue3中ref與reative的用法。

參考資料

1. vue3指令
2. 官方文件
3. [Vue學習筆記]（三）Vue指令（上） — v-text, v-html, v-if, v-show, v-for