鐵人檔案
我要和大家開啟一段 需求至上的 Vue 魔法之旅。 Vue.js 的簡潔高效語法糖與輕量靈活的架構，它讓構建前端介面像堆積積木般自然。整個系列將以 需求為核心 展開：從「想做什麼」開始，推導「需要哪些條件」，最後對應到「正確的 Vue 功能」。每篇文章都會先描繪真實情境與使用者故事，再用系統條件分析與 Mermaid 流程圖建立完整架構，最後以範例實作收尾。跟著這趟旅程，將學會如何把需求轉換成結構清晰、可維護的 Vue 3 應用，而不是死記 API 名詞。
前言 今天我們要補充 什麼是「受控表單設計」。其實我們過去的飲料訂單程式早就屬於受控表單：父元件 App.vue 儲存了表單的唯一狀態，子元件像 OrderFo...
前言 在前幾天，我們已經學會如何用 Vue 建構出完整的前端互動應用，也成功拆解了組件。但這些功能目前都還停留在「瀏覽器的世界」。今天我們要邁出關鍵的一步：學習...
前言 昨天（Day 9）我們用最簡單的 fetch 打通了 GET / POST，正式踏出「能跟世界溝通」的第一步。今天把這條資料管線升級：導入 Axios 和...
前言 主題：即時監聽欄位變化，動態更新甜度、冰量等選項，並介紹快取策略與效能優化。 昨天我們完成了 CRUD 與 axios 的 API 串接，資料已能正確...
前言：為什麼需要「中央魔島」來管理資料 到目前為止，我們的飲料系統所有資料都放在 App.vue，再一層一層傳下去（Single Source of Truth...
前言 有時候使用者（祕書）會拿到一份大訂單，想直接覆蓋整個訂單列表，再繼續點其他飲料。 為了支援這種情境，我們把訂單的「衍生統計」與「批次匯入邏輯」集中到 Pi...
前言 昨天我們已經在魔法書院裡完成了 Pinia 的 Composition API 咒語。今天要召喚另一種魔法陣：Options API 風格！ 在開始之前，...
前言 第 1～12 天，我們一步步把「飲料點單」施法到能跑、能管理、能共享。但真正上線的系統，錯的輸入就像走錯陣法：會讓資料歪掉、流程卡住，甚至害你加班（啊！）...
前言：開啟更高等的「檢驗系」魔法 昨天我們已把 VeeValidate + Yup 召喚入陣，讓表單具備基本的「護身結界」（必填、長度、型別）。今天升級你的魔杖...
一、需求分析：為什麼需要傳送門？ 在魔法學院裡，巫師們不可能永遠只待在大廳（App.vue）。有時候要去「點餐之塔」下訂單，有時候要前往「結算之室」檢視總金額，...
