內文簡介
從原生到框架，真正理解 Vue.js 原理
深入淺出 Vue.js，搭配真實案例，帶你避開那些惱人的開發痛點！

☆ 掌握 Composition API，開發更彈性、維護更容易
☆ 學 Vue.js 不能只知道語法，本書帶你避開雷區、加速學習與開發

本書內容改編自第 14 屆 iThome 鐵人賽 Modern Web 組的佳作系列文章《真的好想離開 Vue 3 新手村 feat. Composition API》。本書以 Vue.js Composition API 風格為主軸，著重於扎實的基礎學習，協助讀者避開的常見雷點，提升學習與開發的效率。書中涵蓋從原生到框架的範疇，帶領讀者從不同角度認識 Vue.js，以及新手學習和開發中容易遇到的問題，並針對讀者可能會踩到的坑，有目的地去探討背後原理，而非為了剖析原始碼而剖析原始碼。即使是前端新手也一定能看懂、更要看，可以對 Vue.js 有更進階的認識。

本書首先從開發環境入門，讓讀者了解環境建置的範疇與重要性，並具備根據專案需求調整的能力。隨後介紹常用的 Vue.js 語法，包含 Vue.js 指令、響應式 API 和樣式處理等等，再來進入元件化開發，認識元件的溝通方式與生命週期。除了 Vue.js 核心之外，本書亦包含 Vue Router 4 和 Pinia，透過 Vue Router 常見的應用情境來認識其語法，學會如何建立單頁式應用程式網站，最後是 Pinia，了解使用狀態管理器的目的，並認識常用情境與語法。書中提供線上範例程式碼，讀者可以在學習後實際操作一遍，加深印象並掌握邏輯要點。期望讀者在學習之後，能具備完成一個 Vue.js 專案的基礎知識與能力。

四大重點

▶ 新手看得懂
說明淺顯易懂，新手也能消化

▶ 常見實戰範例
以常見案例為範例，加速理解使用情境

▶ 避開踩坑
取自真實專案經驗，帶你避開踩坑之處

▶ 提供最新全家桶
涵蓋建立 Vue 專案所需的工具與知識

目標讀者
● 準備要學習 Vue.js 3 的前端新手。
● 已經在學習 Vue.js 3 並掌握基礎語法，卻還是常常踩到雷。
● 已經開始使用 Vue.js 3 進行開發，只知道如何操作，但不知道其原理。

★專家推薦：

「如果你想要學習前端 Vue 框架，這本書是你的不二之選。透過 Angela 的經驗分享和教學，你將能夠事半功倍地掌握 Vue.js 的精髓，她絕對是學習前端 Vue 框架的最佳引路人。」
Howard │ 好想工作室 Host

「我特別欣賞本書對於 Vue.js 核心概念的解釋方式，作者 Angela 在書中用淺顯易懂的語言解釋了 Vue.js 的原理，不僅避免了過於深入探討原始碼，而且專注於分析和解決實際開發中遇到的問題。這種方式不僅淺顯易懂，而且緊密結合了自身的開發案例，對於理解並應用這些概念至關重要。」
Kuro Hsu │ Vue.js Taiwan 社群主辦人

「這本書提供了完整的論證過程，讓我在看完的同時也可以記得很久，完全不用花費什麼時間再去研究，可以直接使用這麼嚴謹的研究成果當作自己的學習成果，實在是一件很幸福的事情。希望每個學習者都可以透過這本書，體會一下好的學習方法，將自己變成好的工程師。」
王聖凱（Chris）│《從自學到成功轉職軟體工程師：自主學習讓我重拾人生的發球權》作者

（依首字筆畫排序）
作者簡介
陳佑瑄（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

相關分類

購物須知

寄送時間	全台灣24h到貨，遲到提供100元現金積點。全年無休，週末假日照常出貨。例外說明
送貨方式	透過宅配送達。除網頁另有特別標示外，均為常溫配送。消費者訂購之商品若經配送兩次無法送達，再經本公司以電話與Email均無法聯繫逾三天者，本公司將取消該筆訂單，並且全額退款。
送貨範圍	限台灣本島與離島地區註，部分離島地區包括連江馬祖、綠島、蘭嶼、琉球鄉…等貨件，將送至到岸船公司碼頭，需請收貨人自行至碼頭取貨。注意！收件地址請勿為郵政信箱。註：離島地區不配送安裝商品、手機門號商品、超大材商品及四機商品。
執照證號＆登錄字號	本公司食品業者登錄字號A-116606102-00000-0

關於退貨

PChome24h購物的消費者，都可以依照消費者保護法的規定，享有商品貨到次日起七天猶豫期的權益。(請留意猶豫期非試用期!!)您所退回的商品必須回復原狀（復原至商品到貨時的原始狀態並且保持完整包裝，包括商品本體、配件、贈品、保證書、原廠包裝及所有附隨文件或資料的完整性）。商品一經拆封/啟用保固，將使商品價值減損，您理解本公司將依法收取回復原狀必要之費用(若無法復原，費用將以商品價值損失計算)，請先確認商品正確、外觀可接受再行使用，以免影響您的權利，祝您購物順心。
如果您所購買商品是下列特殊商品，請留意下述退貨注意事項：
1. 易於腐敗之商品、保存期限較短之商品、客製化商品、報紙、期刊、雜誌，依據消費者保護法之規定，於收受商品後將無法享有七天猶豫期之權益且不得辦理退貨。
2. 影音商品、電腦軟體或個人衛生用品等一經拆封即無法回復原狀的商品，在您還不確定是否要辦理退貨以前，請勿拆封，一經拆封則依消費者保護法之規定，無法享有七天猶豫期之權益且不得辦理退貨。
3. 非以有形媒介提供之數位內容或一經提供即為完成之線上服務，一經您事先同意後始提供者，依消費者保護法之規定，您將無法享有七天猶豫期之權益且不得辦理退貨。
4. 組合商品於辦理退貨時，應將組合銷售商品一同退貨，若有遺失、毀損或缺件，PChome將可能要求您依照損毀程度負擔回復原狀必要之費用。
若您需辦理退貨，請利用顧客中心「查訂單」或「退訂/退款查詢」的「退訂/退貨」功能填寫申請，我們將於接獲申請之次日起1個工作天內檢視您的退貨要求，檢視完畢後將以E-mail回覆通知您，並將委託本公司指定之宅配公司，在5個工作天內透過電話與您連絡前往取回退貨商品。請您保持電話暢通，並備妥原商品及所有包裝及附件，以便於交付予本公司指定之宅配公司取回（宅配公司僅負責收件，退貨商品仍由特約廠商進行驗收），宅配公司取件後會提供簽收單據給您，請注意留存。
退回商品時，請以本公司或特約廠商寄送商品給您時所使用的外包裝（紙箱或包裝袋），原封包裝後交付給前來取件的宅配公司；如果本公司或特約廠商寄送商品給您時所使用的外包裝（紙箱或包裝袋）已經遺失，請您在商品原廠外盒之外，再以其他適當的包裝盒進行包裝，切勿任由宅配單直接粘貼在商品原廠外盒上或書寫文字。
若因您要求退貨或換貨、或因本公司無法接受您全部或部分之訂單、或因契約解除或失其效力，而需為您辦理退款事宜時，您同意本公司得代您處理發票或折讓單等相關法令所要求之單據，以利本公司為您辦理退款。
本公司收到您所提出的申請後，若經確認無誤，將依消費者保護法之相關規定，返還您已支付之對價（含信用卡交易），退款日當天會再發送E-mail通知函給您。

Vue.js 3前端開發不踩雷：Composition API×Vue Router×Pinia，帶你快速升級進階開發者！（iThome鐵人賽系列書）(軟精裝)

商品評價

搜尋更多

內文簡介

相關分類