前言?

第一章 歡迎來到 Vue.js 的世界！?

Vue.js 是什麼？?

Vue 在現代 Web 開發中的優勢?

安裝 Node.js?

Vue Developer Tools?

Vite.js 作為建置者管理工具?

創建一個新的 Vue 應用程式?

檔案儲存庫結構?

總結?



第二章 Vue 的運作方式：基礎知識?

底層的 Virtual DOM?

Vue App 實體和 Options API?

探索 Options API?

樣板語法?

藉由資料特性建立本地狀態?

Vue 中反應性的運作方式?

使用 v-model 的雙向繫結?

使用 v-model.lazy 修飾詞?

使用 v-bind 繫結反應式資料和傳遞特性資料?

繫結至類別和樣式屬性?

使用 v-for 迭代資料群集?

使用 v-on 為元素新增事件聆聽者?

使用 v-if、v-else 和 v-else-if 的條件式元素描繪?

使用 v-show 有條件地顯示元素?

使用 v-html 動態顯示 HTML 程式碼?

使用 v-text 顯示文字內容?

使用 v-once 和 v-memo 進行最佳化的描繪?

全域地註冊元件?

總結?



第三章 撰寫元件?

Vue 的單一檔案元件結構?

使用 defineComponent() 實作 TypeScript 支援?

元件生命週期掛接器?

方法?

計算特性?

觀察者?

插槽的威力?

透過樣板標記和 v-slot 屬性使用具名插槽?

了解參考?

使用 Mixins 共享元件組態?

限定樣式範疇的元件?

使用 CSS 模組設計元件樣式?

總結?



第四章 元件之間的互動?

Vue 中的內嵌元件和資料流?

使用自訂事件在元件間通訊?

使用 defineEmits()定義自訂事件?

使用 provide/inject 模式在元件間通訊?

Teleport API?

總結?



第五章 Composition API?

使用 Composition API 設定元件?

使用 ref() 和 reactive() 處理資料?

使用生命週期掛接器?

了解 Composition API 中的觀察者?

使用 computed()?

建立可重複使用的可組合掛接器?

總結?



第六章 整合外部資料?

Axios 是什麼？?

安裝 Axios?

使用生命週期掛接器和 Axios 載入資料?

執行時期的非同步資料請求：挑戰所在?

建立可重複使用的 Fetch 元件?

將你的應用程式與外部資料庫連接?

總結?



第七章 進階描繪、動態元件和外掛合成?

Render 函式和 JSX?

函式型元件?

為函式型元件定義 Props 和 Emits?

使用 Vue 外掛全域地新增自訂功能?

使用 標記進行動態描繪?

使用 保持元件實體有效?

總結?



第八章 路由?

什麼是路由？?

使用 Vue Router?

在路由之間傳遞資料?

使用 Props 來解耦路由參數?

了解導覽防護?

建立內嵌路由?

建立動態路由?

使用路由器實體前後來回?

處理未知的路由?

總結?



第九章 使用 Pinia 的狀態管理?

了解 Vue 中的狀態管理?

了解 Pinia?

為 Pizza House 建立 Pizzas Store?

為 Pizza House 建立 Cart Store?

在元件中使用 Cart Store?

從 Pizzas Gallery 向 Cart 新增項目?

使用 Actions 顯示購物車項目?

從 Cart Store 移除項目?

對 Pinia 儲存區進行單元測試?

訂閱儲存區變更時的副作用?

總結?



第十章 Vue 中的切換和動畫?

了解 CSS 切換和 CSS 動畫?

Vue.js 中的 Transition 元件?

為一組元素建置切換效果?

建立路由切換效果?

使用 Transition 事件來控制動畫?

總結?



第十一章 Vue 中的測試?

單元測試和 E2E 測試簡介?

作為單元測試工具的 Vitest?

使用參數和組態檔設置 Vitest?

撰寫你的第一個測試?

測試非生命週期的可組合掛接器?

使用生命週期掛接器測試 Composables?

使用 Vue Test Utils 測試元件?

測試元件的互動和事件?

透過 GUI 使用 Vitest?

搭配涵蓋率執行器來使用 Vitest?

使用 PlaywrightJS 進行端到端測試?

使用 VSCode 的 Playwright 測試擴充功能除錯E2E測試?

總結?



第十二章 Vue.js 應用程式的持續整合和持續部署?

軟體開發中的 CI/CD?

搭配 GitHub Actions 的 CI/CD 管線?

使用 Netlify 的持續部署?

使用 Netlify CLI 進行部署?

總結?



第十三章 使用 Vue 進行伺服器端描繪?

Vue 中的客戶端描繪?

Server-Side Rendering (SSR)?

使用 Nuxt.js 的伺服器端描繪?

Static Site Generator (SSG)?

結語?



索引