Vue.js 3企業級應用開發實戰(雙色版)( 簡體 字) | |
作者:柳偉衛 | 類別:1. -> 程式設計 -> 網路編程 -> Vue.js |
出版社:電子工業出版社 | 3dWoo書號: 55615 詢問書籍請說出此書號! 缺書 NT售價: 545 元 |
出版日:1/1/2022 | |
頁數:368 | |
光碟數:0 | |
站長推薦: | |
印刷:黑白印刷 | 語系: ( 簡體 字 ) |
ISBN:9787121426803 | 加入購物車 │加到我的最愛 (請先登入會員) |
(簡體書上所述之下載連結耗時費功, 恕不適用在台灣, 若讀者需要請自行嘗試, 恕不保證, 繁體書的下載亦請直接連絡出版社) | |
★★第1篇 初識Vue.js
★第1章 理解Vue.js及產生的背景 /2 1.1 什么是Vue.js /2 1.2 Vue.js產生的背景 /2 1.2.1 Vue.js與jQuery的不同 /2 1.2.2 Vue.js與React、Angular的比較 /3 1.2.3 如何選擇Angular、React和Vue.js /4 1.3 如何學習Vue.js /5 1.3.1 前置知識 /5 1.3.2 學習安排 /5 ★第2章 快速開啟第一個Vue.js應用 /6 2.1 開發環境準備 /6 2.1.1 安裝Node.js和NPM /6 2.1.2 設置NPM鏡像 /7 2.1.3 選擇合適的IDE /7 2.1.4 安裝Vue CLI /8 2.1.5 檢查和調試Vue.js應用的工具——Vue Devtools /8 2.2 創建Vue.js應用“hello-world” /8 2.2.1 利用Vue CLI初始化Vue.js應用“hello-world” /9 2.2.2 運行Vue.js應用“hello-world” /12 2.3 探索Vue.js應用 /13 2.3.1 整體項目結構 /13 2.3.2 項目根目錄文件 /14 2.3.3 node_modules目錄 /14 2.3.4 public目錄 /14 2.3.5 src目錄 /15 2.4 在Vue.js應用中使用TypeScript /19 2.4.1 基于“Vue 3 Preview”創建項目 /19 2.4.2 基于“Manually select features”創建項目 /20 2.4.3 TypeScript應用的差異 /22 ★★第2篇 基礎 ★第3章 TypeScript基礎 /26 3.1 TypeScript概述 /26 3.1.1 TypeScript與JavaScript、ECMAScript的關系 /26 3.1.2 TypeScript與Vue.js的關系 /27 3.1.3 使用TypeScript的優勢 /27 3.1.4 安裝TypeScript /28 3.1.5 TypeScript代碼的編譯及運行 /28 3.2 變量與常量 /29 3.2.1 var、let、const三者的作用域 /29 3.2.2 變量與常量的區別 /29 3.2.3 變量提升 /30 3.3 TypeScript數據類型 /31 3.3.1 基本類型 /31 3.3.2 對象類型 /35 3.3.3 任意類型 /35 3.3.4 聯合類型 /37 3.3.5 交集類型 /37 3.4 強大的面向對象體系 /38 3.4.1 類 /38 3.4.2 接口 /43 3.4.3 【實戰】演示接口的使用 /43 3.4.4 泛型 /44 3.4.5 【實戰】演示泛型的使用 /44 3.4.6 枚舉 /45 3.5 TypeScript的命名空間 /46 3.5.1 聲明命名空間 /46 3.5.2 【實戰】聲明命名空間 /46 3.5.3 命名空間體 /47 3.5.4 導入別名聲明 /47 3.5.5 【實戰】導入別名聲明 /48 3.5.6 導出聲明 /49 3.5.7 合并聲明 /49 3.5.8 【實戰】合并聲明 /49 3.6 TypeScript 模塊 /50 3.6.1 了解模塊 /51 3.6.2 【實戰】導入聲明 /51 3.6.3 【實戰】導入Require聲明 /52 3.6.4 【實戰】導出聲明 /52 3.6.5 【實戰】導出分配 /52 3.6.6 了解CommonJS模塊 /53 3.6.7 了解AMD模式 /54 3.7 裝飾器 /55 3.7.1 定義裝飾器 /55 3.7.2 了解裝飾器的執行時機 /56 3.7.3 認識4類裝飾器 /57 ★第4章 Vue.js應用實例——一切的起點 /63 4.1 創建“應用實例” /63 4.1.1 第一個“應用實例” /63 4.1.2 讓“應用實例”執行方法 /64 4.1.3 理解選項對象 /64 4.1.4 理解根組件 /65 4.1.5 理解MVVM模型 /66 4.2 data property與methods /66 4.2.1 理解data property /67 4.2.2 理解data methods /67 4.3 Vue.js的生命周期 /69 4.3.1 生命周期中的鉤子函數 /69 4.3.2 生命周期的圖示 /70 4.3.3 【實戰】生命周期鉤子函數的實例 /71 ★第5章 Vue.js組件——獨立的程序單元 /76 5.1 組件的基本概念 /76 5.1.1 【實戰】一個最簡單的Vue.js組件的實例 /76 5.1.2 什么是組件 /78 5.1.3 【實戰】一個子組件的復用實例 /79 5.1.4 Vue.js組件與Web組件的異同點 /80 5.2 組件的交互方式 /80 5.2.1 【實戰】通過prop向子組件傳遞數據 /80 5.2.2 【實戰】監聽子組件的事件 /81 5.2.3 【實戰】兄弟組件之間的通信 /84 5.2.4 【實戰】通過插槽分發內容 /87 5.3 讓組件可以動態加載 /90 5.3.1 實現組件動態加載的步驟 /90 5.3.2 【實戰】動態組件的實例 /90 5.4 使用<keep-alive>緩存組件 /96 5.4.1 【實戰】<keep-alive>的例子 /97 5.4.2 <keep-alive>緩存組件的配置詳解 /98 ★第6章 Vue.js模板——讓內容隨著模板中變量的變化而變化 /101 6.1 了解Vue.js的模板 /101 6.2 【實戰】在模板中使用插值 /102 6.2.1 文本 /102 6.2.2 原生HTML代碼 /103 6.2.3 綁定HTML attribute /104 6.2.4 JavaScript表達式 /104 6.3 【實戰】在模板中使用指令 /105 6.3.1 理解指令中的參數 /106 6.3.2 理解指令中的動態參數 /107 6.3.3 理解指令中的修飾符 /108 6.4 【實戰】在模板中使用指令的縮寫 /108 6.4.1 使用v-bind指令的縮寫 /108 6.4.2 使用v-on指令的縮寫 /109 6.5 使用模板的一些約定 /109 6.5.1 對動態參數值的約定 /109 6.5.2 對動態參數表達式的約定 /110 6.5.3 對訪問全局變量的約定 /110 ★第7章 Vue.js計算屬性與偵聽器——處理響應式數據的復雜邏輯 /111 7.1 通過實例理解“計算屬性”的必要性 /111 7.2 【實戰】一個“計算屬性”的實例 /112 7.2.1 聲明“計算屬性” /112 7.2.2 模擬數據更改 /114 7.3 “計算屬性”緩存與方法的關系 /114 7.4 為什么需要偵聽器 /115 7.4.1 理解偵聽器 /115 7.4.2 【實戰】一個偵聽器的實例 /116 ★第8章 Vue.js樣式——讓應用變得好看 /119 8.1 綁定樣式class /119 8.1.1 【實戰】在class中綁定對象 /119 8.1.2 【實戰】在class中綁定數組 /121 8.1.3 【實戰】在組件上使用class /122 8.2 綁定內聯樣式 /122 8.2.1 【實戰】在內聯樣式中綁定對象 /123 8.2.2 【實戰】在內聯樣式中綁定數組 /124 8.2.3 【實戰】在內聯樣式中綁定多重值 /124 ★第9章 Vue.js表達式——根據條件來渲染不同的內容 /126 9.1 條件表達式 /126 9.1.1 【實戰】v-if指令的實例 /126 9.1.2 【實戰】v-else指令的實例 /127 9.1.3 【實戰】v-else-if指令的實例 /127 9.1.4 【實戰】v-show指令的實例 /128 9.1.5 理解v-if指令與v-show指令的關系 /128 9.2 for循環表達式 /129 9.2.1 【實戰】使用v-for指令遍歷數組 /129 9.2.2 【實戰】使用v-for指令遍歷數組設置索引 /131 9.2.3 【實戰】使用v-for指令遍歷對象的property名稱 /132 9.2.4 【實戰】數組過濾 /135 9.2.5 【實戰】使用值的范圍 /136 9.3 v-for指令的不同使用場景 /137 9.3.1 【實戰】在<template>中使用v-for指令 /137 9.3.2 【實戰】v-for指令與v-if指令一起使用 /138 9.3.3 【實戰】在組件上使用v-for指令 /139 ★第10章 Vue.js事件——通知做事的狀態 /142 10.1 什么是事件 /142 10.1.1 【實戰】一個簡單的監聽事件實例 /142 10.1.2 理解事件的處理方法 /143 10.1.3 處理原始的DOM事件 /144 10.1.4 為什么需要在HTML代碼中監聽事件 /145 10.2 【實戰】多事件處理器的實例 /146 10.3 事件修飾符 /147 10.3.1 什么是事件修飾符 /147 10.3.2 按鍵修飾符 /149 10.3.3 系統修飾符 /149 ★第11章 Vue.js表單——采集用戶輸入的數據 /151 11.1 理解“表單輸入綁定” /151 11.2 【實戰】“表單輸入綁定”的基礎用法 /152 11.2.1 文本 /152 11.2.2 多行文本 /153 11.2.3 復選框 /153 11.2.4 單選按鈕 /155 11.2.5 選擇框 /156 11.3 【實戰】對表單進行值綁定 /157 11.3.1 復選框 /157 11.3.2 單選按鈕 /158 11.3.3 選擇框 /160 11.4 【實戰】表單修飾符的使用 /161 11.4.1 使用.lazy修飾符的實例 /162 11.4.2 使用.number修飾符的實例 /163 11.4.3 使用.trim修飾符的實例 /163 ★★第3篇 進階 ★第12章 深入組件 /166 12.1 什么是“組件注冊” /166 12.1.1 理解“組件注冊” /166 12.1.2 組件命名 /167 12.2 理解全局注冊 /169 12.3 【實戰】一個局部注冊的實例 /170 12.4 【實戰】一個模板引用的實例 /171 12.5 深入介紹prop(輸入屬性) /173 12.5.1 理解prop /173 12.5.2 prop類型 /174 12.5.3 【實戰】傳遞動態prop /175 12.5.4 【實戰】傳遞動態prop數字 /176 12.5.5 【實戰】傳遞動態prop布爾值 /178 12.5.6 【實戰】傳遞動態prop數組 /179 12.5.7 【實戰】傳遞動態prop對象 /181 12.5.8 【實戰】傳遞動態prop對象中的所有property /182 12.5.9 理解單向下行綁定 /185 12.5.10 【實戰】prop類型驗證 /186 12.6 理解非prop的attribute /189 12.6.1 【實戰】attribute繼承 /189 12.6.2 【實戰】禁用attribute繼承 /191 12.6.3 【實戰】多個根節點上的attribute繼承 /192 12.7 自定義事件 /195 12.7.1 如何給事件命名 /196 12.7.2 【實戰】一個自定義事件的實例 /196 12.8 深入介紹插槽 /199 12.8.1 理解插槽內容 /199 12.8.2 了解渲染作用域 /200 12.8.3 【實戰】后備內容(默認內容)的實例 /201 12.8.4 【實戰】具名插槽(帶名字的插槽)的實例 /204 12.8.5 了解具名插槽的縮寫 /209 12.9 理解“依賴注入” /210 12.9.1 “依賴注入”的優點 /210 12.9.2 【實戰】“依賴注入”的實例 /211 12.10 【實戰】異步組件的實例 /215 ★第13章 深入樣式 /217 13.1 過渡與動畫的概述 /217 13.1.1 理解過渡與動畫 /217 13.1.2 【實戰】基于class的動畫 /219 13.1.3 【實戰】與style綁定的過渡 /222 13.2 考慮性能 /224 13.2.1 避免觸發重繪 /224 13.2.2 利用硬件加速 /226 13.3 持續時間(timing) /226 13.3.1 理解timing /226 13.3.2 持續時間的使用原則 /226 13.4 緩慢的運動(easing) /227 13.4.1 理解緩慢的運動 /227 13.4.2 【實戰】緩慢的運動的實例 /227 13.5 過渡 /228 13.5.1 理解過渡 /228 13.5.2 過渡class /231 13.5.3 【實戰】自定義過渡class /232 13.5.4 同時使用過渡和動畫 /233 13.5.5 顯性的過渡持續時間 /233 13.6 列表過渡 /234 13.6.1 理解列表過渡 /234 13.6.2 【實戰】列表過渡的實例 /234 ★第14章 組件的復用與組合 /237 14.1 理解混入 /237 14.1.1 【實戰】基本的混入實例 /237 14.1.2 【實戰】混入時的選項合并 /239 14.2 自定義指令 /240 14.2.1 【實戰】自定義指令的實例 /241 14.2.2 了解指令的鉤子函數 /242 14.2.3 【實戰】指令綁定動態參數 /242 14.2.4 【實戰】指令綁定對象字面量 /243 14.3 理解傳入 /244 14.3.1 【實戰】傳入的基本實例 /245 14.3.2 【實戰】<teleport>與組件一起使用的實例 /247 14.3.3 【實戰】在同一個目標元素上使用多個傳入 /249 ★第15章 渲染函數 /251 15.1 理解渲染函數 /251 15.1.1 【實戰】使用渲染函數render()的實例 /251 15.1.2 DOM樹 /254 15.1.3 虛擬DOM樹 /255 15.2 h()函數 /256 15.2.1 h()函數的參數 /256 15.2.2 【實戰】使用h()函數生成子代VNode /256 15.2.3 VNode必須唯一 /258 15.3 使用JavaScript代替模板功能 /259 15.3.1 【實戰】代替v-if指令和v-for指令的實例 /259 15.3.2 【實戰】代替v-model指令的實例 /261 15.3.3 【實戰】代替v-on指令的實例 /262 15.3.4 代替插槽 /262 15.4 模板編譯 /263 ★第16章 測試 /264 16.1 測試概述 /264 16.1.1 傳統的測試技術所面臨的問題 /264 16.1.2 如何破解測試技術面臨的問題 /266 16.1.3 測試類型 /267 16.2 單元測試 /269 16.2.1 理解單元測試 /269 16.2.2 單元測試常用框架 /270 16.2.3 【實戰】Mocha單元測試的實例 /270 16.3 組件測試 /274 16.3.1 理解組件測試 /274 16.3.2 組件測試常用框架 /274 16.4 端到端測試 /275 16.4.1 理解端到端測試 /275 16.4.2 端到端測試常用框架 /276 ★第17章 響應式編程——以聲明式的方式去適應變化 /277 17.1 響應式概述 /277 17.1.1 什么是響應式 /277 17.1.2 如何追蹤變化 /278 17.1.3 了解Proxy對象 /278 17.1.4 了解偵聽器實例 /279 17.2 理解Vue.js響應式編程的原理 /279 17.2.1 聲明響應式狀態 /279 17.2.2 【實戰】ref()方法的使用 /280 17.2.3 響應式狀態解構 /282 17.2.4 防止更改響應式對象 /283 17.3 理解響應式計算 /283 17.4 響應式偵聽 /284 17.4.1 watchEffect()方法與watch()方法的異同點 /285 17.4.2 【實戰】使用watchEffect()方法偵聽變化 /285 17.4.3 【實戰】停止使用watchEffect()方法偵聽 /286 17.4.4 【實戰】使用watch()方法偵聽多個數據源 /288 17.4.5 【實戰】使用watch()方法偵聽響應式對象 /290 ★第18章 路由——實現網頁之間的跳轉 /292 18.1 路由的概念 /292 18.1.1 鏈接的類型 /292 18.1.2 什么是路由 /293 18.1.3 路由的核心概念 /293 18.1.4 靜態路由和動態路由 /293 18.2 【實戰】創建靜態路由 /293 18.2.1 安裝Vue Router庫 /294 18.2.2 創建待路由的子組件 /294 18.2.3 創建路由 /295 18.2.4 了解路由參數history的兩種模式 /296 18.2.5 使用路由 /296 18.2.6 運行應用 /298 18.3 【實戰】創建動態路由 /299 18.3.1 什么是動態路由 /300 18.3.2 初始化應用 /300 18.3.3 創建待路由的子組件 /300 18.3.4 創建路由 /301 18.3.5 使用路由 /302 18.3.6 運行應用 /304 ★★第4篇 項目實戰 ★第19章 創建“新聞頭條”客戶端 /308 19.1 應用概述 /308 19.2 需求分析 /308 19.2.1 首頁的需求分析 /308 19.2.2 新聞詳情頁面的需求分析 /309 19.3 架構設計 /310 19.3.1 獲取訪問API的密鑰 /311 19.3.2 了解新聞列表API /312 19.3.3 了解新聞詳情API /314 19.4 【實戰】初始化“新聞頭條”客戶端應用 /316 19.4.1 修改HelloWorld.vue子組件 /317 19.4.2 修改App.vue根組件 /317 19.4.3 運行應用 /318 ★第20章 實現“新聞頭條”客戶端首頁 /319 20.1 首頁概述 /319 20.2 需求分析 /320 20.3 架構設計 /320 20.4 【實戰】實現“新聞頭條”客戶端首頁 /321 20.4.1 添加Naive UI /321 20.4.2 創建組件 /322 20.4.3 實現界面原型 /322 20.4.4 查看完整的首頁原型效果 /327 ★第21章 實現“新聞頭條”客戶端導航欄 /329 21.1 導航欄概述 /329 21.2 導航欄的需求分析 /329 21.3 導航欄的架構設計 /330 21.4 【實戰】實現“新聞頭條”客戶端的分類查詢 /330 21.4.1 新建新聞分類服務 /330 21.4.2 解析新聞分類API數據 /330 21.4.3 展示新聞分類 /331 21.5 【實戰】實現“新聞頭條”客戶端的新聞列表 /333 21.5.1 引入HTTP客戶端 /333 21.5.2 解析新聞列表API數據 /334 21.5.3 解決跨域問題 /335 21.5.4 固定導航欄 /336 21.6 【實戰】實現導航欄與新聞列表組件通信 /338 21.6.1 監聽導航欄的單擊事件 /338 21.6.2 自定義導航欄的切換事件 /340 21.6.3 處理導航欄的單擊事件 /341 21.6.4 運行應用 /344 ★第22章 實現“新聞頭條”客戶端的新聞詳情頁面 /345 22.1 新聞詳情頁面的概述 /345 22.2 新聞詳情頁面的需求分析 /345 22.3 新聞詳情頁面的架構設計 /346 22.4 【實戰】實現“新聞頭條”客戶端的新聞詳情頁面 /347 22.4.1 創建“新聞頭條”客戶端的新聞詳情組件 /347 22.4.2 修改“新聞頭條”客戶端的新聞列表組件 /349 22.4.3 配置路由 /349 22.4.4 運行應用 /351 參考文獻 /352 本書基于Vue.js 3展開,介紹了應用實例、組件、模板、計算屬性、監聽器、指令、表單、事件、數據綁定、路由、依賴注入、自定義樣式、動畫、渲染函數、測試、響應式編程等,還介紹了Vue CLI、TypeScript、Animate.css、Mocha、Vue Router、Naive UI、vue-axios等內容。Vue.js 3完全支持TypeScript,使讀者可以采用類、面向對象的方式進行編程。在本書的最后會手把手帶領讀者一起從零開始實現一個完整的企業級“新聞頭條”客戶端應用。本書技術前瞻、面向實戰、實例豐富。
1. 寫作背景
Vue.js是近些年廣受開發者關注的前端框架。Vue.js已經具備了商業項目開發的必備條件,如語法精練、代碼的可讀性高、組件模塊化成熟等,還有商業項目開發最為看重的與第三方控件的結合能力。由于這些功能,使得Vue.js能夠與React、Angular等前端開發框架并駕齊驅,并在開發者心中占據越來越重要的位置。與React、Angular相比,Vue.js在可讀性、可維護性和趣味性之間做到了很好的平衡,非常適用中小型項目的快速開發。隨著Vue.js 3的推出,使其具備了進行大型項目開發的可能性。 市面上關于Vue.js 1.x和Vue.js 2.x的資料比較多,而關于Vue.js 3的資料比較匱乏。于是,作者在GitHub上,以開源方式撰寫了《跟老衛學Vue.js開發》,介紹Vue.js 3的使用。為了能讓更多的人學習Vue.js 3,作者以《跟老衛學Vue.js開發》為基礎,對Vue.js 3的知識點進行了完整的梳理和擴展,補充了實戰案例。希望讀者通過學習本書的內容,具備Vue.js 3企業級應用開發實戰的能力。 內容介紹 本書分為以下4篇。 - 第1篇 初識Vue.js(第1~2章):了解Vue.js基礎概念,并帶領讀者快速創建一個Vue.js應用,使讀者對Vue.js有一個初步的認識。 - 第2篇 基礎(第3~11章):了解TypeScript基礎、Vue.js應用實例、Vue.js組件、Vue.js模板、Vue.js計算屬性與監聽器、Vue.js樣式、Vue.js表達式、Vue.js事件、Vue.js表單等概念。讀者通過學習這幾章的內容,可以了解Vue.js常用的知識。 - 第3篇 進階(第12~18章):深入講解Vue.js的高級知識。 - 第4篇 項目實戰(第19~22章):手把手帶領讀者一起從零開始實現一個完整的企業級“新聞頭條”客戶端應用,使讀者具備Vue.js企業級應用開發的能力。 2.本書所采用的技術及相關版本 本書所采用的技術及相關版本較新,請讀者將相關開發環境設置為與本書所使用的開發環境一致,或者不低于本書所列的配置。 - Visual Studio Code 1.57.1。 - Vue.js 3.6.5。 - Vue CLI4.5.11。 - TypeScript 4.1.6。 - Node.js 15.9.0。 - NPM 7.5.3。 - Vue Router 4.0.10。 - Vue Axios 3.2.4。 - Naive UI 2.13.0。 3.本書特點 (1)提供了基于知識點的多個實例 本書提供了豐富的基于Vue.js 3技術的實例,將理論講解最終落實到代碼實現上。在介紹Vue.js 3基礎之后,本書還提供了一個完整的企業級“新聞頭條”客戶端應用。這些實例從零開始,最終實現了一個完整的企業級應用,使本書具有很高的應用價值和參考性。 (2)免費提供書中實例的源文件 本書提供了所有實例的源文件。讀者可以一邊閱讀本書,一邊參照源文件動手練習,這樣不僅提高了學習效率,而且可以對本書中的內容有更加直觀的認識,從而逐漸提高自己的編程能力。 (3)覆蓋的知識面廣 本書介紹了Vue.js 3的許多知識,包括應用實例、組件、模板、計算屬性、監聽器、指令、表單、事件、數據綁定、路由、依賴注入、自定義樣式、動畫、渲染函數、測試、響應式編程等,還介紹了Vue CLI、TypeScript、Animate.css、Mocha、Vue Router、Naive UI、vue-axios等內容。不管是初學者,還是編程高手,都能從本書中獲益。本書可以作為讀者案頭的工具書,以便讀者隨手翻閱。 (4)使用短小的段落和短句,閱讀流暢 本書采用結構化的層次,并使用短小的段落和短句,便于讀者流暢閱讀。 (5)實例的商業性、應用性強 本書提供的實例多數來源于真正的商業項目,具有極高的參考價值。有些代碼甚至可以直接移植到自己的項目中,進行重復使用,使從“學”到“用”這個過程變得更加直接。 致謝 感謝電子工業出版社評審團隊對本書在校對、排版、審核、封面設計等方面所給予的幫助,使本書能夠順利出版。 感謝我的父母、妻子Funny和兩個女兒。由于撰寫本書,我犧牲了很多陪伴家人的時間,謝謝他們對我的理解和支持。另外,還要感謝關心和支持我的朋友、讀者與網友。 |