鐵人檔案
這次鐵人賽的主題，我將以 Vue.js 為核心進行探索與紀錄。由於我本身對 Vue.js 還不算熟悉，因此會以「新手學習」的角度出發，透過實作與紀錄的方式逐步了解這個前端框架。預計會從最基礎的環境建置、語法特性開始，延伸到元件化思維、資料綁定、路由設計與狀態管理等核心概念，並搭配簡單的小專案實踐。希望能透過這 30 天的挑戰，讓自己快速熟悉 Vue.js 的開發流程與應用場景，同時也提供給其他剛入門的開發者參考。雖然一開始可能會遇到不少挫折，但也正是透過紀錄學習過程與心得，才能累積成長，並讓「學習 Vue.js」成為一段有意義的挑戰旅程。
slot 到底是「在幹嘛」？ 簡單說，slot 就是讓元件可以「開個洞」，讓你插你要的內容進去。想像你在用一個「客製化便當盒」的概念： 元件就像是一個便當盒...
今天和明天我們要使用前面學到的重點來寫一個「控制火箭是否發射」的迷你專案，複習前面的重點。今日Day 12：完成「父子溝通 + 清單渲染 + 互動」的核心（pr...
今天我們要升級昨天的code， 把卡片做成「可客製內容」的元件：slot / named slot。 新增 FuelGauge 子元件，支援 v-model...
就是要帶大家認識 Vue 元件「出生到死亡」的整個過程，以及可以在什麼時間點插入程式邏輯。 為什麼叫「生命週期」？ 想像一個元件就像一艘飛船： 建造 → 發射...
實戰小行星 — To-Do List 就是把前 14 天學到的核心招式整合起來，做一個可用的小作品：新增任務、完成/取消完成、刪除、搜尋/過濾、統計數量，還能把...
昨天我們學會了 表單與使用者輸入，不過目前我們的 Vue App 還停留在「單一頁面」的階段。今天要開啟一條新的星際航線 —— Vue Router ！ 為什麼...
今日目標：完成一個星際地圖 /：星際地圖（星球清單） /planet/:slug：星球介紹頁（動態路由） 找不到路由 → 404 頁 1) 建立資料：src...
1) 動態路由是什麼？ 路徑帶變數的路由，例如：/planet/:slug :slug 會被解析成參數（e.g. mars）。 適合「多個同類型頁面」：星球...
為什麼要用 Composition API？ 在 Vue 3 裡，Composition API 就像是把程式邏輯收納到「資料艙」裡，不再零散放在各個 Opti...
為什麼需要 Pinia？ 在小專案裡，用 props 傳資料、emit 傳事件就夠。但隨著專案變大，不同元件之間要共用資料（例如：玩家登入狀態、星艦燃料存量、背...
