>
电脑资讯 >
网页开发设计 >
Vue.js 3前端開發不踩雷:Composition API×Vue Router×Pinia,帶你快速升級進階開發者!(iThome鐵人賽系列書)【軟精裝】作者簡介
陳佑瑄(Angela)
自 2022 年開始學習前端語言,自學轉職為前端工程師,現為常駐好想工作室的自由接案者。
專案多以 Vue.js 3 框架進行開發,透過參與各式專案的經驗,還有喜愛探究的精神,深刻理解 Vue.js 3 框架及其應用,因此撰寫了系列文章《真的好想離開 Vue 3 新手村 feat. Composition API》,並且獲得第 14 屆 iThome 鐵人賽佳作。
推薦序/Howard
推薦序/Kuro Hsu
推薦序/王聖凱(Chris)
第 1 章 認識 Vue 開發環境
1.1 Quick Start
1.2 建立 Vue 專案
1.3 開發利器:ESLint
1.4 開發利器:Prettier
1.5 Vite
1.6 資料夾結構
1.7 番外篇:為什麼要打包?
1.8 在 Vue 專案使用 Sass / SCSS + 共用變數
第 2 章 進入 Vue 的世界觀
2.1 了解 Vue SFC 檔?
2.2 深入了解 script setup 語法糖
2.3 Option API 和 Composition API 比一比
2.4 認識模板語法
2.5 Vue 響應式語法 ref、reactive
2.6 Vue 響應式語法 watch & computed
2.7 認識 nextTick 與 DOM 響應更新時機
2.8 樣式處理
2.9 SFC / .vue 檔會如何被解析?
第 3 章 認識 Vue 指令(Vue Directive)
3.1 什麼是 Vue 指令(Vue Directive)?
3.2 v-show 與 v-if
3.3 v-for
3.4 v-on
3.5 v-model
第 4 章 元件化開發
4.1 元件溝通的方式
4.2 props
4.3 emit
4.4 v-model
4.5 v-slot
4.6 元件的生命週期與鉤子
4.7 等等非同步資料!在 setup 裡面 await?
第 5 章 Vue Router 4
5.1 什麼是 Single-Page Application?
5.2 Vue Router 的作用與歷史模式
5.3 定義路由
5.4 在 Composition API 元件使用 Vue Router
5.5 裝飾匹配的 Link 樣式
5.6 跨路由傳遞參數的方法
5.7 SPA 網站的 Scroll 行為
5.8 導航守衛(Navigation Guards)
5.9 番外篇(一):從 Vue Router 的動態載入看 Code Split
5.10 番外篇(二):router-view 遇上 keep-alive
第 6 章 狀態管理器 ── Pinia
6.1 為什麼需要「狀態」管理器?
6.2 Into Pinia:安裝 Pinia
6.3 Store
6.4 State
6.5 Getters
6.6 Actions
6.7 監聽 Pinia Store 變動
6.8 在元件以外使用 Store