Vue.js 3前端測試入門從這裡開始：透過Vitest + Vue Test Utils實現自動化測試（iThome鐵人賽系列書）【軟精裝】 (1版)
類似書籍推薦給您
內容簡介
♚瞭解測試概念：理解測試目的及方向，寫測試不迷惑
♚學習測試語法：跟著範例檔實際測試，加深學習印象
♚測試最佳實踐：撰寫測試也可以寫得既簡潔與優雅
♚搭配現代技術：結合GitHub Copilot愜意撰寫測試
本書內容改編自第14屆iThome鐵人賽Modern Web組的優選系列文章《「你知道這是什麼嗎？」小白也能輕鬆瞭解的Vue3單元測試！Feat. Vitest + Vue Test Utils》。如果你曾遇過下列的狀況：「調整前端程式碼時改東壞西」、「想要最佳化程式碼卻擔心改壞原先的內容」、「擁有自己的前端開源項目而想要提升項目的品質」，那麼你一定不能錯過「前端測試」這項技術。
本書將循序漸進介紹前端工程師要如何撰寫前端測試程式碼，書籍內容從撰寫測試程式碼所需具備的測試概念開始，再透過範例程式碼來深入運用Vitest、Vue Test Utils等工具，最終學會單元測試、Vue元件測試以及Vue周邊生態工具測試該如何進行，並瞭解如何搭配GitHub Copilot來輔助我們撰寫測試。如此一來，我們便可在不影響原先實作程式碼的情況下，透過撰寫測試程式碼來驗證實作程式碼的正確性，使我們進行重構時更有信心，幫助我們撰寫程式碼時考慮得更周全。
【目標讀者】
♚想瞭解前端測試如何撰寫、卻又不知道從何開始的前端工程師。
♚想對前端領域的開源項目撰寫測試的開源貢獻者。
♚想用測試精進前端技能的前端工程師。
本書特色
前端測試就是快速精進前端程式碼的捷徑！
全台第一本高速有效的前端測試絕佳指南，學習前端測試So Easy！
打造堅固且穩定的測試基礎，是高效重構與調整前端程式碼的不二法則！
目錄
|Chapter 01| 在撰寫測試之前
1.1 對測試的期望
1.2 撰寫測試時的脈絡
|Chapter 02| 設置測試環境
2.1 安裝管理套件工具
2.2 安裝版控工具與複製專案
2.3 瞭解測試環境設定檔
|Chapter 03| 單元測試
3.1 測試情境與測試案例
3.2 準備（Setup）與拆遷（Teardown）
3.3 斷言（Assertion ）
|Chapter 04| 元件測試
4.1 容器（Wrapper）
4.2 容器方法（Wrapper Methods）
4.3 模擬元件
|Chapter 05| 控制測試環境
5.1 受測物與依賴物
5.2 測試替身類型
5.3 Vue Test Utils中的測試替身
5.4 Vitest中的測試替身
|Chapter 06| Vue Ecosystem
6.1 Vue Router
6.2 Pinia
|Chapter 07| 相關工具
7.1 Vitest UI
7.2 覆蓋率（Coverage）
|Chapter 08| 最佳實踐
8.1 3A模式結合生命週期
8.2 簡短的行內快照
8.3 工廠模式
8.4 測試公開介面
8.5 F.I.R.S.T.原則
8.6 避免過度使用Setup & Teardown API
|Chapter 09| 透過GitHub Copilot編寫測試程式碼
9.1 前置準備
9.2 實際應用於測試程式碼
立即查看
Type Script+Vue.js一氣呵成：前端開發大白到大神 (1版)
類似書籍推薦給您
立即查看
Vue.js 3前端開發不踩雷：Composition API×Vue Router×Pinia，帶你快速升級進階開發者！（iThome鐵人賽系列書）【軟精裝】 (1版)
類似書籍推薦給您
【簡介】
從原生到框架，真正理解 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）│《從自學到成功轉職軟體工程師：自主學習讓我重拾人生的發球權》作者
（依首字筆畫排序）
【目錄】
推薦序／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
立即查看
Vue.js 3前端漸進式建構框架實戰應用｜完美搭配Bootstrap 5與PHP (1版)
類似書籍推薦給您
【簡介】
Bootstrap及Vue.js熱門前端技術一手掌握
‧MySQL資料庫功能實作與PHP Web應用程式一次到位
‧沒有Node.js套件管理及Vue-CLI模組一樣搞定SPA
現今前端工程師必備的能力，絕不能止步於HTML、CSS與JavaScript而已，除了要能設計適合不同尺寸載具的RWD頁面外，更需要學會運用不同框架的整合，才能在專案中得心應手同時展現前端工程師的價值。
目前廣泛運用Bootstrap的CSS框架來呈現版面並達成RWD，而Vue.js則是近年備受矚目的三大JavaScript框架之一。本書以Vue.js框架為核心概念，搭配Bootstrap做為UI的呈現，詳細介紹Vue 3之後新增的composition API撰寫方式、建立資料採用ref()和reactive()、options API程式碼架構，並說明與Vue 2的差異，為讀者打造駕馭前端框架的實戰力，成為卓越的前端工程師。
【目錄】
Chapter 1 Vus.js 起步走
1-1 Vue.js 範本檔的實作
1-2 {{ }}, mustache 語法的「單向流出之資料綁定」
1-3 Bootstrap 5 與 Font awesome 的使用
1-4 v-bind「單向流出資料綁定」
1-5 事件繫結的 v-on 指令
1-6 雙向資料綁定的 v-model 指令
1-7 非單一 Vue 實例
1-8 輸出HTML
1-9 Vue 實例的生命週期
1-10 Vue 的全域變數
1-11 本章回顧
Chapter 2 站在巨人肩膀上前進
2-1 結構分析
2-2 遺珠之憾
Chapter 3 資料的呈現
3-1 選項物件的 template 屬性
3-2 使用物件的選項物件 data 屬性
3-3 使用陣列的選項物件 data 屬性
3-4 computed 屬性
3-5 Filters 屬性
3-6 Watch 屬性
Chapter 4 CSS 樣式的動態綁定
4-1 行內樣式
4-2 Class 樣式
Chapter 5 選擇性資料的呈現
5-1 v-show 指令
5-2 v-if 指令
5-3 條件式呈現的應用
Chapter 6 表單及其元件
6-1 文字顯示元件
6-2 文字框元件─單列
6-3 文字框元件─多列
6-4 多選的核對框 Checkbox
6-5 單選的選項按鈕 Radio Button
6-6 下拉選單 Select 元件
6-7 下拉選單 Dropdowns 元件
6-8 下拉選單 List group 元件
6-9 範圍 Range 元件
Chapter 7 再談事件繫結
7-1 事件修飾符號（Event Modifiers）
7-2 按鍵修飾符號（Key Modifiers）
7-3 滑鼠按鍵修飾符號（Mouse Button Modifiers）
Chapter 8 來自後端的資料
8-1 來自 PHP 函式的資料
8-2 PHP 資料檔
8-3 MySQL 資料庫
8-4 主頁 xindex.php
8-5 action4accounts.php 解說
8-6 二個安全上的漏洞
8-7 小結
8-8 〈補充〉MySQL 資料庫的連線開啟與關閉
Appendix A 快速掌握 ES 6【PDF 電子書, 請線上下載】
A-1 let 區域化變數的存範圍
A-2 const 常數宣告
A-3 Data Type 資料型別
A-4 for...of 巡覽迴圈
A-5 Template 字串模板
A-6 Arrow Function 箭頭函數
A-7 Rest Parameters 餘下參數
A-8 Object Literal 物件常數
A-9 Array 物件常見的方法
A-10 function chaining
A-11 promise
A-12 module 模組
立即查看
網頁設計完全攻略HTML、CSS、JavaScript、Bootstrap、jQuery、Vue.js、RWD｜搭配ChatGPT效率加倍 (1版)
類似書籍推薦給您
簡介
這是一本內容非常齊全的網頁設計書籍，網羅最新技術、最新語法、最多範例，包含下列的【7大主題】和【超過700個範例程式】，全彩印刷，圖解詳盡，觀念正確，讓讀者快速學會網頁設計的關鍵技術！
．HTML
．CSS
．JavaScript
．Bootstrap
．jQuery
．Vue.js
．響應式網頁設計 (RWD)
除了分篇分章進行語法教學，目前最熱門的【ChatGPT】也是重要主題，我們會介紹如何使用ChatGPT學習網頁設計，包括撰寫網頁程式、解讀網頁程式、加註解、除錯、查詢語法、尋求技術支援、出題練習、解題、與其它程式語言做轉換等。
為了讓讀者體驗如何將各種語法活用到實際的網頁設計，不再陷入只會語法，卻不知如何活用的窘境，我們設計了【三大響應式網頁範例】－【圖庫網站】、【旅遊網站】和【部落格網站】，其中第一個範例是使用HTML和CSS手刻響應式網頁，而第二、三個範例是使用HTML、CSS和Bootstrap開發響應式網頁，這些範例均相當精美，對於設計人員開發網頁、老師設計教學範例、學生製作專題或參加競賽都極具參考價值。
學習重點------------------------------------------------------------
【第0章－ChatGPT】
在本章中，我們會介紹如何使用ChatGPT學習網頁設計，例如撰寫網頁程式、解讀網頁程式、加註解、除錯、查詢語法、尋求技術支援、出題練習、解題、與其它程式語言做轉換等。
【第1篇－HTML】
HTML可以用來定義網頁的內容，開發各種網頁應用程式。在本篇中，我們會介紹HTML常用的元素，例如文件結構、資料編輯與格式化、嵌入內容、表格、表單等。
【第2篇－CSS】
CSS可以用來定義網頁的外觀，包括編排、顯示、格式化及特殊效果。在本篇中，我們會介紹CSS常用的屬性，例如色彩、字型、文字、清單、Box Model、定位方式、背景、漸層、濾鏡、表格、Flexbox Layout、Grid Layout、變形、轉場、動畫、媒體查詢等。
【第3篇－JavaScript】
JavaScript可以用來定義網頁的行為，在本篇中，我們會介紹JavaScript的基本語法，包括型別、變數、常數、運算子、流程控制、函式、物件等，還會介紹JavaScript在瀏覽器端的應用，也就是如何利用JavaScript讓靜態網頁具有動態效果，包括文件物件模型 (DOM)、瀏覽器物件模型 (BOM)、事件處理等。
【第4篇－網頁前端框架】
除了最核心的HTML、CSS和JavaScript，還有許多應用於JavaScript程式開發的函式庫與框架，在本篇中，我們會介紹下列幾種技術：
．Bootstrap：是很受歡迎的HTML、CSS與JavaScript框架，用來開發響應式 (responsive)、行動優先 (mobile first) 的網頁，使用者無須撰寫CSS或JavaScript程式碼，就可以輕鬆設計出響應式網頁。
．jQuery：是一個快速、輕巧、功能強大的JavaScript函式庫，透過它所提供的API，可以讓諸如操作HTML文件、選擇HTML元素、處理事件、建立特效、使用Ajax技術等動作變得更簡單。
．Vue.js：這個JavaScript函式庫，提供API讓Web開發人員進行資料繫結及操作網頁上的元素，解決畫面顯示與資料狀態同步的問題。
此外，我們還會介紹【響應式網頁設計】(RWD，Responsive Web Design)，這是一種網頁設計方式，目的是根據使用者的瀏覽器環境 (例如寬度或方向等)，自動調整網頁的版面配置，以提供最佳的顯示結果，同時設計了【3大響應式網頁範例】－圖庫網站、旅遊網站、部落格網站，讓您不只懂語法，更懂如何運用到實際的網頁設計。
目錄
第00章 網頁設計 x ChatGPT
0-1 開始使用 ChatGPT
0-2 查詢網頁設計相關的語法
0-3 查詢網頁設計相關的技術建議
0-4 撰寫網頁程式與除錯
0-5 與其它程式語言互相轉換
0-6 提供練習測驗與解答
【Part 1 HTML】
第01章 網頁設計基礎
1-1 網站建置流程
1-2 網頁設計相關的程式語言
1-3 HTML 的發展
1-4 HTML 文件的編輯工具
1-5 HTML 文件的基本結構
1-6 撰寫第一份 HTML 文件
第02章 文件結構
2-1 HTML 文件的根元素 - html 元素
2-2 HTML 文件的標頭 - head 元素
2-3 HTML 文件的主體 - body 元素
2-4 HTML5 新增的結構元素
第03章 資料編輯與格式化
3-1 區塊格式
3-2 文字格式
3-3 插入或刪除資料 - ins、del 元素
3-4 項目符號與編號 - ul、ol、li 元素
3-5 定義清單 - dl、dt、dd 元素
3-6 超連結
3-7 相對 URL 的路徑資訊 base 元素
第04章 嵌入內容
4-1 嵌入圖片 - img 元素
4-2 嵌入影片 - video 元素
4-3 嵌入聲音 - audio 元素
4-4 設定媒體資源 - source 元素
4-5 嵌入不同的圖片 - picture 元素
4-6 嵌入物件 - object 元素
4-7 嵌入浮動框架 - iframe 元素
4-8 嵌入Script - script、noscript 元素
第05章 表格
5-1 建立表格 - table、tr、th、td 元素
5-2 表格標題 - caption 元素
5-3 表格的表頭、主體與表尾 - thead、tbody、tfoot 元素
5-4 直行式表格 - colgroup、col 元素
第06章 表單
6-1 建立表單 - form、input 元素
6-2 HTML4.01 提供的輸入類型
6-3 HTML5 新增的輸入類型
6-4 按鈕 - button 元素
6-5 標籤 - label 元素
6-6 選項群組 - optgroup 元素
6-7 將表單欄位群組起來 - fieldset、legend 元素
【Part 2 CSS】
第07章 CSS 基本語法
7-1 CSS 的發展
7-2 在 HTML 文件中套用 CSS
7-3 CSS 的語法
7-4 選擇器的類型
7-5 樣式表的串接順序
第08章 色彩、字型、文字與清單
8-1 色彩屬性
8-2 字型屬性
8-3 文字屬性
8-4 清單屬性
第09章 Box Model 與定位方式
9-1 Box Model
9-2 邊界屬性
9-3 留白屬性
9-4 框線屬性
9-5 寬度與高度屬性
9-6 定位方式
第10章 背景、漸層、濾鏡與表格
10-1 背景屬性
10-2 漸層函式
10-3 濾鏡屬性
10-4 表格屬性
第11章 CSS 版面設計
11-1 使用 float 屬性進行版面設計
11-2 彈性盒子版面
11-3 格線版面
第12章 變形、轉場、動畫與媒體查詢
12-1 變形屬性
12-2 轉場屬性
12-3 動畫屬性
12-4 媒體查詢
第13章 響應式網頁設計實例―圖庫網站
13-1 開發適用於不同裝置的網頁
13-2 響應式網頁設計原則
13-3 手刻響應式網頁（圖庫網站）
13-4 手刻導覽按鈕（漢堡選單）
13-5 重置 CSS
【Part 3 JavaScript】
第14章 JavaScript 基本語法
14-1 撰寫第一個 JavaScript 程式
14-2 JavaScript 程式碼撰寫慣例
14-3 型別
14-4 變數
14-5 常數
14-6 運算子
14-7 流程控制
14-8 函式
14-9 變數的有效範圍
第15章 JavaScript 內建物件
12-1 認識物件
12-2 使用物件
12-3 內建物件
第16章 文件物件模型 (DOM)
16-1 認識 DOM
16-2 取得元素節點
16-3 走訪節點
16-4 取得 / 設定元素的屬性值與文字內容
16-5 新增 / 取代 / 移除節點
16-6 存取表單元素
16-7 操作 CSS 樣式表
第17章 瀏覽器物件模型 (BOM)
17-1 認識 BOM
17-2 Window 物件
17-3 Location 物件
17-4 Navigator 物件
17-5 History 物件
17-6 Screen 物件
17-7 Document 物件
第18章 事件處理
18-1 事件驅動模式
18-2 事件的類型
18-3 定義事件處理程式 / 事件監聽程式
18-4 移除事件處理程式 / 事件監聽程式
18-5 Event 物件
18-6 事件處理範例
【Part 4 網頁前端框架】
第19章 Bootstrap 網格系統
19-1 撰寫 Bootstrap 網頁
19-2 使用 Bootstrap 網格系統
第20章 Bootstrap 樣式
20-1 內容樣式
20-2 公用類別
20-3 按鈕
20-4 表單
第21章 Bootstrap 元件
21-1 關閉按鈕 (Close button)
21-2 警報效果 (Alert)
21-3 下拉式清單 (Dropdown)
21-4 按鈕群組 (Button group)
21-5 導覽與標籤頁 (Nav and tab)
21-6 導覽列 (Navbar)
21-7 卡片 (Card)
21-8 工具提示 (Tooltip)
21-9 彈出提示 (Popover)
21-10 摺疊 (Collapse)
21-11 手風琴效果 (Accordion)
21-12 輪播 (Carousel)
21-13 分頁導覽 (Pagination)
第22章 響應式網頁設計實例 - 旅遊網站
22-1 「快樂旅遊」網站
22-2 設計網頁樣板
22-3 設計導覽列
22-4 設計輪播
22-5 設計內容區 - 警報效果
22-6 設計內容區 - 卡片
22-7 設計頁尾
第23章 響應式網頁設計實例 - 部落格網站
23-1 「快樂部落格」網站
23-2 設計網頁樣板
23-3 設計頁首、導覽列與介紹區
23-4 設計內容區
23-5 設計頁尾
第24章 jQuery
24-1 認識 jQuery
24-2 取得 jQuery 核心
24-3 使用 jQuery 核心
24-4 事件處理
24-5 特效與動畫
第25章 Vue.js
25-1 認識 Vue.js
25-2 安裝與使用 Vue.js
25-3 樣板語法
25-4 methods 與 computed 屬性
25-5 事件處理
25-6 表單欄位繫結
25-7 類別與樣式繫結
25-8 條件式渲染
25-9 清單渲染
立即查看
華通書坊
