2025-03-17-JavaScript 系列九：第2課 ── 學習 Vue 的 props 觀念

JavaScript 系列九：第2課 ── 學習 Vue 的 props 觀念
課程目標
學習 vue 的 props
課程內容
來學一下怎麼傳參數到元件裡面

https://vuejs.org/guide/components/props.html
順帶一提，在實務中，我個人是從來不寫 Prop Validation 的

我不去寫 Runtime Type Checks 那些，因為我覺得很麻煩、很花時間

當然，在很多人眼裡，我這種習慣很糟糕

我有我的理由，不過嚴重超出本課程度，未來有機會再談吧

課後作業
在第二課～第七課的作業，我們要研習一款叫做 Quasar Framework 的工具

這是一個極度強大的 vue 元件工具，功能非常豐富、好用

我們每一課的作業，都要試著親自做出類似 Quasar 中的元件

（沒辦法做到像 Quasar 那麼強大，我們只要實作部分功能就好）

這一課作業，請先看一下 Badge 徽章元件的用法

https://quasar.dev/vue-components/badge

請使用官方的元件試玩工具：Vue SFC Playground

https://sfc.vuejs.org/

請建立 MyBadge.vue 元件，並支援下列功能
color 能夠設定背景顏色
text-color 能夠設定文字顏色
label 能夠設定文字內容
rounded 樣式
完成之後，請在 App.vue 之中匯入此元件，並用多個範例證明，有完成上述規格

做出以上功能，你就完成這次的課程目標了！

很好！這次作業的目標是模仿 Quasar 的 <q-badge> 元件，自己實作一個簡單版的 MyBadge.vue，並練習以下功能：

---

🎯 功能需求（你的元件要能支援）：

Prop	說明
color	設定背景顏色
textColor	設定文字顏色
label	顯示的文字內容
rounded	若為 true，則讓角落變圓

---

✅ MyBadge.vue 範例程式碼

在 Vue SFC Playground 中新增一個檔案：MyBadge.vue，並輸入以下內容：

<template>
  <span
    :class="[
      'badge',
      { 'rounded': rounded }
    ]"
    :style="{
      backgroundColor: color,
      color: textColor
    }"
  >
    {{ label }}
  </span>
</template>

<script setup>
defineProps({
  color: { type: String, default: '#eee' },
  textColor: { type: String, default: '#000' },
  label: { type: String, default: 'Badge' },
  rounded: { type: Boolean, default: false }
})
</script>

<style scoped>
.badge {
  display: inline-block;
  padding: 4px 8px;
  font-size: 14px;
  font-weight: bold;
  border: 1px solid #ccc;
  margin: 5px;
}

.rounded {
  border-radius: 999px;
}
</style>

---

✅ App.vue 中匯入並測試

修改 App.vue 來測試這個元件的各種效果：

<template>
  <div style="padding: 20px">
    <MyBadge label="Primary" color="blue" textColor="white" />
    <MyBadge label="Success" color="green" textColor="white" rounded />
    <MyBadge label="Danger" color="red" textColor="white" />
    <MyBadge label="Info" color="#00bcd4" textColor="#fff" rounded />
  </div>
</template>

<script setup>
import MyBadge from './MyBadge.vue'
</script>

---

✅ 成果畫面

你應該會看到幾個彩色徽章，顯示不同的文字與顏色，部分有圓角效果。

---

🔧 可以挑戰的進階功能（選做）

• 增加 size prop：支援 small / medium / large 字型大小。
• 增加 icon 插槽（slot）：允許使用者放圖示。
• 增加可點擊的效果（用 @click 和 cursor: pointer）。

---

很好的提問！讓我們來深入解釋一下：

---

✅ 一、什麼是 <q-badge> 元件？

<q-badge> 是 Quasar Framework 中提供的一個小型視覺標記元件（Badge Component），主要用途是：

🎯 功能與用途：

功能類別	說明
📍 標示數字或狀態	顯示通知數、訊息數，例如訊息旁邊有「3」
🎨 裝飾或分類標籤	用顏色區分項目狀態，如「進行中」、「已完成」、「錯誤」
✅ 小而明顯的 UI 元素	通常與按鈕、圖示等一起使用，不會搶版面但又能吸睛

🧩 常見用途範例：

• 購物車上顯示「5」個商品
• 按鈕旁邊顯示「New」
• 聊天列表顯示未讀訊息數

---

✅ 二、Quasar 是什麼？

Quasar Framework 是一套基於 Vue.js 的全功能前端框架，目的是讓開發者一次撰寫，部署到多平台（網頁、手機 App、桌面 App）。

🎯 Quasar 的核心特點：

功能	說明
💡 基於 Vue.js	使用 Vue 的語法與架構，非常適合 Vue 使用者
🧱 提供大量 UI 元件	像是 <q-btn>, <q-card>, <q-badge>, <q-dialog>… 等
📱 支援多平台	可以快速建構 Web App、Mobile App（透過 Cordova / Capacitor）、Desktop App（透過 Electron）
🧰 還包含工具	CLI、主題系統、i18n、RTL、dark mode… 功能豐富

你可以把它想成是「Vue 世界裡的 Bootstrap + Material UI + CLI 打包工具整合包」。

---

✅ 三、為什麼要做 <q-badge> 這種元件？

這堂課讓你模仿 <q-badge> 的目標是：

🎯 學習重點

學習面向	說明
✅ Props 傳值	學會設計元件的屬性（如：color, textColor, label）
🎨 樣式控制	透過 props 控制顏色、圓角、顯示內容
🧩 元件封裝概念	學會把一個小功能獨立出來、可重複使用
🧠 從模仿中學習	仿造 Quasar 是一種反向學習法，理解一個專業元件是怎麼設計出來的

---

✅ 總結：這一課的意義是什麼？

這一課不是要你「發明」一個新元件，而是：

🛠️ 從模仿做中學，掌握元件開發的基礎技能

這些基礎技能日後可以延伸用來開發自己的 UI Library，或在工作上參與實際專案。

---