前言

其實一開始很猶豫要不要寫這個篇章，
因為如果你用過 Vue 那接下來這些指令你基本上應該是爛熟於心。

不過考慮到這些指令是基本上你不可能可以避免的功能，
除非你只做非常小的東西或幾乎靜態網頁。

最後想了想還是會帶過一些我個人很常用且覺得非常重要的幾個指令。

你可能要先了解以下知識

指令 ( Directives ) 是什麼?

在官方文件解釋中，指令通常帶有 v- 的前綴，是一個特殊屬性，
與<template> 搭配可以幫我們省去很多麻煩。

模板語法 - 文本插值

在接下來的文章中會很常出現 {{}}，
這個叫做 Mustache 語法, 意思就是鬍子也代表雙大括號，

使用情境通常在於你的文本內容是動態更新的，例如以下情境:

<script>
import { ref } from 'vue'
const msg = ref('嗨!鐵人賽我在這')
</script>

<span>Message: {{ msg }}</span> <!-- Message: 嗨!鐵人賽我在這 -->

更進階的用法會在後續篇章中一一補充。

指令清單

以下這些是根據我的獨斷和經驗所分出來的幾組，
通常同一類會要嘛在同一個使用情境，要嘛就是需要決定使用哪個比較好，
其餘沒提到的代表我沒很常使用，不代表不重要。

想寫自己的指令嗎?

除了我們明天要講到的內建指令以外，Vue 也提供我們自定義指令的方法。

對於還沒有經驗的人來說可能會比較難理解，
其實這邊直接把他理解為一段可以供你重複使用的程式碼，
而這個程式碼內就是你為了要複用功能而撰寫的。

例如下面這段:

<script setup>
// 在創建自定義指令時記得要用 v 作為前綴，後面接的是指令名稱，以駝峰命名 ( camelCase ) 
const vHighlight = {
  mounted: (el) => {
    el.classList.add('is-highlight')
  }
}
</script>

<template>
  <!-- 但使用的時候是要用串燒式命名 ( kebab-case ) -->
  <p v-highlight>Never gonna give you up, never gonna let you down</p>
</template>

<style scoped>
.is-highlight{
  background-color: yellow;
}
</style>

注意!
你不應該經常使用自定義指令，管理不當會變得雜亂不堪，
盡量在你需要直接進行 DOM 元素操作時再考慮使用。

結語

從今天開始我們將進入內建指令篇章，你將會在此篇中頻繁練習，

從指令延伸學習不同使用情境及背後要注意的地方，
不時會帶到一點原始碼，這將會對你之後在架構方面有更好的理解。

如果你喜歡這個系列或是想看我發瘋，歡迎按下 訂閱 一起走完這三十天吧。