Vue.js 3 企業級應用開發實戰 (雙色版)

購買商店

Vue.js 3 企業級應用開發實戰 (雙色版)

$654.00

馬上購買

內容描述

本書基於Vue.js 3展開，介紹了應用實例、組件、模板、計算屬性、監聽器、指令、表單、事件、數據綁定、路由、依賴註入、自定義樣式、動畫、渲染函數、測試、響應式編程等，還介紹了Vue CLI、TypeScript、Animate.css、Mocha、Vue Router、Naive UI、vue-axios等內容。Vue.js 3完全支持TypeScript，使讀者可以採用類、面向對象的方式進行編程。在本書的最後會手把手帶領讀者一起從零開始實現一個完整的企業級“新聞頭條”客戶端應用。本書技術前瞻、面向實戰、實例豐富。

目錄大綱

★★第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