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開發最主流的網站 (1版)

類似書籍推薦給您

內容簡介 ★★★★★ JS專案工程化最佳範例 ★★★★★ ☆☆☆☆☆ 正統TypeScript完整語法入手 ☆☆☆☆☆ ★★★★★ Vue3框架所有元件詳細使用 ★★★★★ ☆☆☆☆☆ 一本書就熟練最新前端技術 ☆☆☆☆☆ 　　Vue.js 3 是一個相當熱門的前端框架，它的靈活性和高效性獲得了全球開發者的一致好評。本書主要針對Vue.js框架，涵蓋基礎知識、語言基礎、開發環境搭建等。內容分為12章，前八章以基礎概念及語法說明為主，介紹Vue.js概述、語言基礎、開發環境架設、資料綁定、指令、元件應用與進階、鷹架開發及路由應用等方面。後4章則是進階的概念，包括了第9章深入組件化應用實踐，講解組件創建、註冊、使用及通信方法。第10章闡述Vue.js表單處理，如雙向數據綁定、驗證等。第11章詳述Vuex狀態管理庫使用，包括基本概念、方法及應用案例。第12章則探討Vue.js實戰應用與優化，包括專案結構、代碼組織、性能優化等。本書旨在幫助讀者深入理解Web開發、前端框架，提高Vue.js開發技能。 　　【適合讀者】 　　本書適合各種程度的讀者，無論你是剛入門的新手，還是有經驗的開發者，都能從這本書中獲益良多，讓你的前端技能更上一層樓。 　　※ 本書程式實例可至深智官網下載：deepwisdom.com.tw 本書特色 　　✪ 循序漸進地講解Vue框架的新特性及其各項功能用法，原理與實戰並重。 　　✪ 深入講解了Vue.js開發技術，提高Web前端開發效率。 　　✪ 詳細介紹TypeScript語言的使用，與Vue 3完美結合，幫助讀者輕鬆學會Vue。 　　✪ 對Vue的API深入剖析，同時結合大量案例進行講解，讓讀者快速上手。 　　✪ 講解商業項目開發的相關框架工具，如鷹架工程vue-cli開發、Vue,js 3的路由、使用UI框架Element Plus、網路請求框架Axios、狀態管理框架Vuex等。 目錄 第1章 Vue.js 概述 1.1 HTTP 與HTML 1.2 Web 後端基礎技術 1.3 Web 部署技術 1.4 框架 1.5 Web 前端框架 1.6 前端主流框架 1.7 後端主流框架 1.8 繪製引擎及網頁繪製 1.9 Vue.js 的基本概念 1.10 Vue.js 的優缺點 第2章 Vue.js 3 的語言基礎 2.1 從JavaScript 標準說起 2.2 偵錯一個JavaScript 程式 2.3 說說JavaScript 執行時期 2.4 為何要學TypeScript 2.5 TypeScript 基礎 2.6 TypeScript 的優點 2.7 TypeScript 的發展歷史 2.8 架設TypeScript 開發環境 2.9 TypeScript 基礎類型 2.10 TypeScript 變數宣告 2.11 TypeScript 運算子 2.12 TypeScript 條件語句 2.13 TypeScript 迴圈 2.14 TypeScript 函式 2.15 陣列 2.16 聯合類型 2.17 介面 2.18 類別 2.19 命名空間 2.20 模組 2.21 TypeScript 物件 2.22 宣告檔案 2.23 理解TypeScript 設定檔 第3章 架設Vue.js 開發環境 3.1 使用VSCode 開發JavaScript 程式 3.2 Vue.js 的引用方式 3.3 第一個Vue.js 3 程式 第4章 Vue.js 基礎入門 4.1 建立應用實例並掛載 4.2 資料選擇 4.3 響應式系統的原理 4.4 綁定資料 4.5 計算屬性 第5章 指 令 5.1 v-text 和v-html 指令 5.2 v-model 指令 5.3 v-on 指令 5.4 v-for 指令 5.5 v-if 指令 5.6 v-else 指令 5.7 v-show 指令 5.8 v-bind 指令 5.9 watch 指令 第6章 元件應用與進階 6.1 元件概述 6.2 註冊元件 6.3 元件之間的關係 6.4 元件的重複使用 6.5 元件通訊 第7章 Vue.js 鷹架開發 7.1 Node.js 和Vue.js 的關係 7.2 設定Webpack 環境 7.3 Vue.js 單檔案元件標準 7.4 打包實作含Vue.js 檔案的專案 7.5 使用鷹架vue-cli 第8章 路由應用 8.1 路由的概念 8.2 前端路由與服務端繪製 8.3 後端路由 8.4 前後端分離 8.5 前端路由 8.6 Vue.js 的路由 8.7 含參數的動態路由比對 8.8 路由的比對語法 8.9 嵌策略由 8.10 命名路由 8.11 命名視圖 8.12 重新導向 8.13 程式設計式導覽 8.14 不同的歷史模式 8.15 導覽守衛 第9章 組合式API 9.1 組合式API 概述 9.2 入口函式setup 9.3 響應式函式 9.4 watch 監聽 9.5 案例：團購購物車 第10章 使用UI 框架Element Plus 10.1 概述 10.2 使用Element Plus 的基本步驟 10.3 按鈕的使用 10.4 網址連結 10.5 選項按鈕 10.6 核取方塊 10.7 輸入方塊 10.8 InputNumber 計數器 10.9 選取器 10.10 開關 10.11 滑桿 10.12 時間選擇器 10.13 時間選取器 10.14 日期選擇器 10.15 日期時間選擇器 10.16 上傳 10.17 評分 10.18 顏色選擇器 10.19 傳輸器 10.20 表單 10.21 表格 10.22 標籤 10.23 進度指示器 10.24 樹形 10.25 分頁 10.26 頭像 10.27 描述列表 10.28 訊息方塊 10.29 對話方塊 10.30 影像 10.31 浮動切換 10.32 在鷹架專案中使用Element Plus 第11章 Axios 和伺服器開發 11.1 概述 11.2 Axios 的特點 11.3 Express 架設服務端 11.4 支援跨域問題 11.5 在Vue.js 程式中存取Express 伺服器資料 第12章 Vuex 與案例實戰 12.1 了解「狀態管理模式」 12.2 使用Vuex 的情形 12.3 安裝或引用Vuex 12.4 專案實戰

Vue.js入門到實戰：頁面開發x元件管理x多語系網站開發(適用Vue.js 3.x/2.x) (1版)

類似書籍推薦給您

來自業界，超寫實經驗分享。不只學功能，更學會應用！ 　　資訊技術需要不斷的學習與累績實作經驗，使用本書學習Vue.js，能把過去傳統冗長的jQuery/JS程式，淬鍊成寫法簡潔、更好維護之程式碼。此外，加上Vue的雙向綁定特性，更容易寫出UX更好的介面，讓您今後開發的網站能夠更為提升使用者經驗。 　　透過本書循序漸進的豐富範例教學，帶您建立從開發環境建置到Vue.js的介面開發及實作能力。重點內容： 　　* Vue開發環境建置 　　* 資料登錄及更新 　　* 表單輸入及事件操作 　　* 資料客製化及監聽 　　* 元件製作 　　* 單頁式應用程式（SPA） 　　* Ajax與Mock API串接 　　* 串接Chat API實作聊天機器人 　　* Vuex狀態管理 　　* Vue Router頁面路由管理 　　* Vue i18n多語系網站 目錄 CH01　Web 應用程式與Vue.js 生命週期 CH02　資料登錄及顯示 CH03　表單輸入及事件處理 CH04　資料客製化及監聽 CH05　元件製作 CH06　單頁式應用程式（SPA） CH07　AJAX 與WebAPI 串接 CH08　Vuex 狀態管理 CH09　Vue Router 路由管理 CH10　多語系網站 附錄A　開發環境環境建置 附錄B　JavaScript 套件管理

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 實際應用於測試程式碼