Vue.js 3企業級套用開發實戰

《Vue.js 3企業級套用開發實戰》是由電子工業出版社出版的圖書，作者是柳偉衛。

基本介紹

• 中文名：Vue.js 3企業級套用開發實戰
• 作者：柳偉衛
• 出版社：電子工業出版社
• 出版時間：2022年1月
• 頁數：368 頁
• 定價：109 元
• 開本：16 開
• 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

……

作者簡介

柳偉衛

網名老衛、waylau

一線網際網路公司架構師，CSDN、開源中國、雲棲社區等社區技術專家，慕課網講師。

具有多年軟體開發管理及系統架構經驗。負責過多個省、國家級分散式系統的設計與研發，參與了多個大型項目微服務架構的技術改造。

長期躍於各大開源社區，為開源社區編寫了等近30餘本技術教程，廣受網友好評。

已出版出本計算機圖書。