引用Vue Components的原則，是透過父元件上import的方式，父元件中也可能存在許多子元件…這樣一個串一個的關係就成了樹狀結構的「元件樹」。今天我們要來學的就是在這個元件樹上面，組件彼此是...
簡介 在 Vue 3 應用程序中，Vue Router 和 Pinia 是兩個核心工具，分別用於處理路由導航和狀態管理。對這兩個工具進行有效的測試對於確保應用程序的穩定性和可靠性至關重要。本文將探討...
簡介 在開發 Vue 應用時，測試邊界情況對於確保組件的穩定性和可靠性至關重要。本文將探討如何使用 TypeScript 和 Vitest 來測試 Vue 組件的各種邊界情況。我們將基於Day20先...
上次有提到watch或watchEffect可以讓我們監聽饗應式數據，並且執行某些副作用(side effect)，自己實務上常利用是監聽某項數值，例如監測使用者點擊的id去非同步呼叫api獲取資料，...
探索泡泡背景的設計秘訣，讓訪客愛上您的網站 嗨！是不是常常看著很多網站，總覺得它們少了點什麼？別再只滿足於單調的網頁背景了，我們需要一點「哇～好好玩！」的感覺！ 今天就來跟大家聊聊，如何用 Vue...
目錄 v-for 基本使用 v-for 就地更新 - 使用 key 的重要性 v-for 指令參數介紹 v-for 指令結合 template 標籤及計算屬性應用情境 v-for 迭代純數字 v-...
生命週期和模板引用 目前為止，Vue 為我們處理了所有的 DOM 更新，這要歸功於響應性和聲明式渲染。然而，有時我們也會不可避免地需要手動操作 DOM。 這時我們需要使用模板引用——也就是指向模板中一...
還講到 debug 快笑死 XD 讓我們切入今天的正題 ref 不然要寫不完了 定義 ref 是 Vue 3 中的一個組合式 API，負責綁定和管理「響應式狀態」。 什麼是響應式？ 「資料變，U...
簡介 在現代前端開發中，單元測試是確保代碼質量和可靠性的關鍵部分。本文將介紹如何使用 Vitest 和 @vue/test-utils 為 Vue 3 應用程序編寫單元測試。我們將探討如何整合 Pi...
在 Vue 3 的生態系中，狀態管理是開發大型應用的關鍵組成部分。傳統上，Vuex 是 Vue 應用的主要狀態管理工具，但隨著 Vue 3 的推出，一個新的狀態管理庫——Pinia 也逐漸受到了廣泛關...