到目前為止前面有寫到兩種資料傳遞的方式，分別是 Props 和 Pinia，今天來寫另一種傳遞方式 Provide/Inject，最後再總結一下這三個。 為什麼...
前言：開啟更高等的「檢驗系」魔法 昨天我們已把 VeeValidate + Yup 召喚入陣，讓表單具備基本的「護身結界」（必填、長度、型別）。今天升級你的魔杖...
為什麼需要 Teleport？ 在 Vue 中，元件會隨著父元件渲染在 DOM 裡，但像 Modal、Notification 等等這類 UI，通常需要顯示在最...
前言 第 1～12 天，我們一步步把「飲料點單」施法到能跑、能管理、能共享。但真正上線的系統，錯的輸入就像走錯陣法：會讓資料歪掉、流程卡住，甚至害你加班（啊！）...
每個 project-card 都需要以下資訊： 我希望「上次更新時間」能隨著 GitHub repo 的 commit 更新而自動同步。當我每次推送新版本（p...
主要針對navbar進行微微動畫的設計： 1. 點擊 navbar 的 item，可以描點至該區塊 在navbar 的 item 加上點擊事件，並為每個區塊元件...
雖然還沒到最後一天，但今天打算嘗試將 vue 部署到 github pages 上 (絕對不是在逃避串接資料庫資料ww原本以為 Github Pages 只能部...
前言 昨天我們已經在魔法書院裡完成了 Pinia 的 Composition API 咒語。今天要召喚另一種魔法陣：Options API 風格！ 在開始之前，...
今天直接大忘記qaq翻了一下筆記決定寫跨元件資料傳遞的部分，直接看例子吧將 <card-emit></card-emit> 中的資料傳遞...
前言 有時候使用者（祕書）會拿到一份大訂單，想直接覆蓋整個訂單列表，再繼續點其他飲料。 為了支援這種情境，我們把訂單的「衍生統計」與「批次匯入邏輯」集中到 Pi...
Slot 插巢 突然不知道該寫什麼 qaq 回去看了一下筆記，發現好像可以寫寫 slot可以在父元件中插入內容到子元件的位置，也就是讓外層可以直接操作內層的 H...
前言：為什麼需要「中央魔島」來管理資料 到目前為止，我們的飲料系統所有資料都放在 App.vue，再一層一層傳下去（Single Source of Truth...
總結 直到今天就算是正式結束今年的鐵人賽了! 總集回顧 第一章基礎概念 在 Vue 過氣前要學的第一件事 - 先了解自己在 Vue 過氣前要學的第二件事 - V...
網站裡圖片往往是最佔空間的資源，如果沒有處理，會拖慢載入速度、影響使用體驗。透過壓縮、Lazy Loading、自適應尺寸等方式，不僅能加快網頁載入，也能減少流...
前言 <Teleport> 是 Vue3 的內置組件，用以將 DOM 內容傳遞到指定的地方，而不受限於某個父元素底下，無法使用相關功能。 舉一個小...
Pinia 是由 Vue 官方所推出的狀態管理工具，主要目的是當資訊在不同元件中共用時傳來傳去很麻煩，因此可以使用 Pinia 將狀態存到 store 中使用。...
前言 主題：即時監聽欄位變化，動態更新甜度、冰量等選項，並介紹快取策略與效能優化。 昨天我們完成了 CRUD 與 axios 的 API 串接，資料已能正確...
Day 15 的挑戰 focus 在 全站 RWD 檢查與微調。依序測試桌機、平板與手機版本，針對排版、字體、圖片大小與互動細節進行調整，確保在不同螢幕尺寸下都...
前言 在此篇系列文中你可能會注意到說，我是用 Vue 而不是現在討論度也相當高的 Nuxt; 這樣我是不是透過 CSR * 渲染網頁了，SSR 怎辦，SEO 怎...
今天想要來看看在 vue 中如何連到不同頁面，以 HTML 來說，可以使用 a href 連到相應的 html 檔，但是 vue 的檔案都是以 .vue 結尾，...
前言 昨天（Day 9）我們用最簡單的 fetch 打通了 GET / POST，正式踏出「能跟世界溝通」的第一步。今天把這條資料管線升級：導入 Axios 和...
這個功能是：使用者按下送出表單後，可以自動將內容寄送到我的 email ，以便收到新訊息通知。通常會透過後端提供整合 api 來串接實作，但我不會後端，所以希望...
前言 終於! 我們進到最後一個篇章，進階使用之生命週期篇; 之所以會把生命週期擺在這麼後面是因為 :只有實際寫過的人，才能更好的理解，所謂不同生命週期具體是指什...
在 Vue 3 的 Composition API 裡，Composable 函式是一種把可重複使用的邏輯抽取出來的方式。先來看看一個範例: Composabl...
在表單設計裡，輸入框是最常出現的元件，但它同時也有許多變化，例如文字、數字、日期、多行文字等等。如果每一種情境都獨立寫一份程式碼，不僅會造成重複，更難以維護。這...
前言 在前幾天，我們已經學會如何用 Vue 建構出完整的前端互動應用，也成功拆解了組件。但這些功能目前都還停留在「瀏覽器的世界」。今天我們要邁出關鍵的一步：學習...
昨天寫了 Vue 的 Options API，它用 data、methods、computed 來分門別類。這種寫法清楚、直觀，但在會有「邏輯分散」的問題。於是...
前言 今天我們要補充 什麼是「受控表單設計」。其實我們過去的飲料訂單程式早就屬於受控表單：父元件 App.vue 儲存了表單的唯一狀態，子元件像 OrderFo...
除了重複的區塊可以抽成元件外，最小的組成單元常見就是按鈕，它有很多不同的狀態，透過抽離成獨立元件，能確保整體介面的一致性與邏輯可維護性。 常見的基礎元件包含：...
在 Vue 3 推出之前，Vue 2 只有一種寫法 —— Options API。它的特色是：用一個物件把所有功能分區塊寫清楚。 資料 → data() 方法...
Zoey
科技狗(柯基狗)
huahaubuhau
Yanya
iThome鐵人賽
看影片追技術