以下是 30 天 Vue 3 教學課程,每堂課涵蓋不同的主題和內容,從基礎到進階循序漸進,適合從初學者到中高階開發者學習。
第 1 週:Vue 3 基礎第 1 天:Vue 介紹與安裝:Vue 的歷史、應用場景與 CDN 及本地安裝。第 2 天:Vue 3 的新特性:Composition API、Fragments、Teleport、Emits等。第 3 天:Vue 應用的核心概念:模板、實例、組件、路由的基礎介紹。第 4 天:插值與表達式:使用 {{ }} 動態綁定數據與 JavaScript 表達式的應用。第 5 天:指令的基礎使用:常用指令:v-bind、v-if、v-for、v-on、v-model。第 6 天:雙向數據綁定:深入理解 v-model 如何實現雙向數據綁定。第 7 天:事件處理與表單:v-on 指令的使用,事件監聽器與表單操作。第 2 週:進階 Vue 特性第 8 天:計算屬性與監聽器:computed 和 watch 的作用與差異,如何高效管理數據變化。第 9 天:條件與列表渲染:使用 v-if、v-else、v-for 構建動態頁面。第 10 天:Class 與 Style 綁定:如何使用 v-bind 動態綁定 HTML class 和內聯樣式。第 11 天:生命週期鉤子:Vue 實例的生命周期,介紹常用的鉤子函數如 created、mounted、updated。第 12 天:組件基礎:如何創建並使用組件,了解父子組件的基礎概念。第 13 天:組件通信:Props:使用 props 在父子組件之間傳遞數據。第 14 天:組件通信:自定義事件:使用 $emit 讓子組件向父組件發送事件。第 3 週:組件與模組化開發第 15 天:組件的插槽 (Slots):使用 slots 動態插入內容,學習具名插槽與作用域插槽。第 16 天:組件的動態加載:使用 v-if 和 dynamic components 動態渲染組件。第 17 天:全局與局部組件註冊:理解全局組件與局部組件的區別,學習如何註冊它們。第 18 天:透過 Mixins 重複利用邏輯:使用 mixins 來共享組件邏輯。第 19 天:Composable 與 Composition API:使用 Composition API 和 composable 重複利用邏輯。第 20 天:依賴注入與 Provide/Inject:使用 provide 和 inject 在組件間共享數據。第 21 天:Teleport 的應用:使用 Teleport 將 DOM 元素渲染到 Vue 應用之外。第 4 週:Vue Router 與 Vuex第 22 天:Vue Router 基礎:安裝與配置 Vue Router,定義動態路由與靜態路由。第 23 天:動態路由與路由參數:使用動態參數與路由守衛 (beforeEnter、beforeRouteUpdate)。第 24 天:命名視圖與嵌套路由:使用命名視圖與嵌套路由來構建複雜的頁面結構。第 25 天:Vuex 狀態管理基礎:使用 Vuex 進行集中式狀態管理,學習 state、mutations、actions。第 26 天:Vuex 模組化管理:將 Vuex 狀態模組化,如何在大型應用中組織狀態。第 27 天:組合 Vuex 與 Composition API:在 Composition API 中使用 Vuex,簡化代碼並提升維護性。第 28 天:Vue Router 與 Vuex 集成:在 Vue Router 中使用 Vuex 管理全局狀態和路由導航。第 5 週:項目實戰與最佳實踐第 29 天:Vue3 項目實戰:Todo 應用:從頭開始構建一個 Todo 應用,涵蓋組件設計、Vuex、路由管理。第 30 天:Vue 開發最佳實踐:組件化、模組化、代碼結構、性能優化與常見錯誤排查。總結這個課程設計每一天都有不同的重點,幫助學習者逐步掌握 Vue 3 的基本知識與進階技巧,並且通過實際項目來鞏固學習成果。