Vue學習手冊
活動訊息
想找書的時候，特別想偷看網友的書櫃... 原來大家都在看這本 ↓↓↓
內容簡介
可重用、易組合且規模可擴充的UI核心概念和實用模式
「Maya是一名出色的老師，她用引人入勝的範例和專業的知識引導讀者。」
—Edward Wong
@arkangelofkaos
「踏上創造之旅，利用最先進的程式庫和工具建置現代化、規模可擴充的Vue應用程式。《Vue學習手冊》是一本全方位指南，透過以元件為基礎的架構、反應式資料管理、實用的動畫效果和全面的測試策略，提供深入的知識和實際操作的範例。」
—Lipi Deepaakshi Patnaik
Zeta-Directi資深軟體開發人員
學習Vue.js的核心概念，Vue.js是一種現代JavaScript框架，用於從零開始建置前端應用程式和介面。本書透過簡潔、實務和清晰的範例，帶領Web開發人員逐步了解Vue.js生態系統中的工具和程式庫，並展示如何為真實世界的Web專案建立完整的應用程式。
你將學到如何使用Pinia架構處理元件之間的資料通訊、為前端專案開發易於管理的路由系統以控制應用程式流程，並且製作基本的動畫效果以創造更好的使用者體驗。
本書重點：
‧使用Vue.js建立可重用的輕量化元件系統
‧為現有的靜態應用程式帶來快速反應的能力
‧使用前端專案程式碼管理的建置工具Vite.js建立專案
‧使用Pinia為前端應用程式建立互動式狀態管理系統
‧將來自伺服器的外部資料連接到Vue應用程式
‧使用Vue Router透過靜態和動態路由控制應用程式流程
‧使用Vitest和Playwright全面測試應用程式
「Maya是一名出色的老師，她用引人入勝的範例和專業的知識引導讀者。」
—Edward Wong
@arkangelofkaos
「踏上創造之旅，利用最先進的程式庫和工具建置現代化、規模可擴充的Vue應用程式。《Vue學習手冊》是一本全方位指南，透過以元件為基礎的架構、反應式資料管理、實用的動畫效果和全面的測試策略，提供深入的知識和實際操作的範例。」
—Lipi Deepaakshi Patnaik
Zeta-Directi資深軟體開發人員
學習Vue.js的核心概念，Vue.js是一種現代JavaScript框架，用於從零開始建置前端應用程式和介面。本書透過簡潔、實務和清晰的範例，帶領Web開發人員逐步了解Vue.js生態系統中的工具和程式庫，並展示如何為真實世界的Web專案建立完整的應用程式。
你將學到如何使用Pinia架構處理元件之間的資料通訊、為前端專案開發易於管理的路由系統以控制應用程式流程，並且製作基本的動畫效果以創造更好的使用者體驗。
本書重點：
‧使用Vue.js建立可重用的輕量化元件系統
‧為現有的靜態應用程式帶來快速反應的能力
‧使用前端專案程式碼管理的建置工具Vite.js建立專案
‧使用Pinia為前端應用程式建立互動式狀態管理系統
‧將來自伺服器的外部資料連接到Vue應用程式
‧使用Vue Router透過靜態和動態路由控制應用程式流程
‧使用Vitest和Playwright全面測試應用程式
目錄
前言
第一章 歡迎來到 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)
結語
索引
第一章 歡迎來到 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)
結語
索引
配送方式
-
台灣
- 國內宅配：本島、離島
-
到店取貨：
不限金額免運費
-
海外
- 國際快遞：全球
-
港澳店取：
訂購/退換貨須知
加入金石堂 LINE 官方帳號『完成綁定』，隨時掌握出貨動態：
提醒您！！
金石堂及銀行均不會請您操作ATM! 如接獲電話要求您前往ATM提款機，請不要聽從指示，以免受騙上當！
退換貨須知：
**提醒您，鑑賞期不等於試用期，退回商品須為全新狀態**
-
依據「消費者保護法」第19條及行政院消費者保護處公告之「通訊交易解除權合理例外情事適用準則」，以下商品購買後，除商品本身有瑕疵外，將不提供7天的猶豫期：
- 易於腐敗、保存期限較短或解約時即將逾期。（如：生鮮食品）
- 依消費者要求所為之客製化給付。（客製化商品）
- 報紙、期刊或雜誌。（含MOOK、外文雜誌）
- 經消費者拆封之影音商品或電腦軟體。
- 非以有形媒介提供之數位內容或一經提供即為完成之線上服務，經消費者事先同意始提供。（如：電子書、電子雜誌、下載版軟體、虛擬商品…等）
- 已拆封之個人衛生用品。（如：內衣褲、刮鬍刀、除毛刀…等）
- 若非上列種類商品，均享有到貨7天的猶豫期（含例假日）。
- 辦理退換貨時，商品（組合商品恕無法接受單獨退貨）必須是您收到商品時的原始狀態（包含商品本體、配件、贈品、保證書、所有附隨資料文件及原廠內外包裝…等），請勿直接使用原廠包裝寄送，或於原廠包裝上黏貼紙張或書寫文字。
- 退回商品若無法回復原狀，將請您負擔回復原狀所需費用，嚴重時將影響您的退貨權益。
商品評價