Vue.js 3.X從入門到項目實踐

目    錄

第1章  走進Vue.js的新世界 1

1.1  Vue.js 3.x概述 1

1.1.1  MVVM模式 1

1.1.2  Vue.js是什麽 2

1.1.3  Vue.js有什麽不同 3

1.2  為什麽要使用Vue.js 4

1.2.1  傳統的前端開發模式 4

1.2.2  Vue.js的開發模式 5

1.3  Vue.js的安裝 5

1.3.1  直接使用<script>標簽引入 5

1.3.2  NPM 5

1.3.3  命令行工具(CLI) 6

1.3.4  使用Vite方式 6

1.4  第一個Vue.js程序 6

1.5  疑難解惑 8

第2章  Vue.js實例和模板語法 11

2.1  Vue.js實例 11

2.1.1  創建一個Vue.js實例 11

2.1.2  數據與方法 12

2.1.3  實例生命周期鉤子函數 12

2.1.4  實例化多個對象 14

2.2  模板語法 17

2.2.1  插值 17

2.2.2  指令 20

2.2.3  縮寫 20

2.3  綜合案例——通過插值語法實現商品信息組合 21

2.4  疑難解惑 22

第3章  計算屬性和偵聽器 23

3.1  計算屬性 23

3.2  計算屬性與方法的區別 24

3.3  監聽器 26

3.3.1  回調值為函數或方法 26

3.3.2  回調值為對象 28

3.4  綜合案例——通過計算屬性設計註冊表 29

3.5  疑難解惑 33

第4章  指令 37

4.1  基本指令 37

4.1.1  v-cloak 37

4.1.2  v-once 38

4.1.3  v-text與v-html 39

4.1.4  v-bind 40

4.1.5  v-on 41

4.2  條件渲染 42

4.2.1  v-if 42

4.2.2  在<template>元素上使用v-if條件渲染分組 44

4.2.3  v-else 44

4.2.4  v-else-if 45

4.2.5  v-show 46

4.2.6  v-if與v-show的區別 47

4.3  列表渲染 48

4.3.1  使用v-for指令遍歷元素 48

4.3.2  維護狀態 52

4.3.3  數組更新檢測 52

4.3.4  對象變更檢測註意事項 55

4.3.5  在<template>上使用v-for 56

4.3.6  v-for與v-if一起使用 57

4.4  自定義指令 58

4.5  綜合案例——設計商品採購列表 59

4.6  疑難解惑 60

第5章  頁面元素樣式的綁定 61

5.1  綁定HTML樣式(class) 61

5.1.1  數組語法 61

5.1.2  對象語法 63

5.1.3  用在組件上 66

5.2  綁定內聯樣式(style) 66

5.2.1  對象語法 66

5.2.2  數組語法 68

5.3  綜合案例——設計網上商城購物車效果 69

5.4  疑難解惑 73

第6章  事件處理 75

6.1  監聽事件 75

6.2  事件處理方法 76

6.3  事件修飾符 81

6.3.1  stop 81

6.3.2  capture 83

6.3.3  self 85

6.3.4  once 86

6.3.5  prevent 87

6.3.6  passive 88

6.4  按鍵修飾符 88

6.5  系統修飾鍵 90

6.6  綜合案例——設計商城tab欄切換 91

6.7  疑難解惑 93

第7章  雙向數據綁定(表單輸入綁定) 95

7.1  雙向綁定 95

7.2  基本用法 95

7.2.1  文本 96

7.2.2  多行文本 97

7.2.3  復選框 97

7.2.4  單選按鈕 99

7.2.5  選擇框 99

7.3  值綁定 102

7.3.1  復選框 102

7.3.2  單選按鈕 103

7.3.3  選擇框 104

7.4  修飾符 105

7.4.1  lazy 105

7.4.2  number 105

7.4.3  trim 106

7.5  綜合案例——破壞瓶子小游戲 107

7.6  疑難解惑 109

第8章  精通組件 111

8.1  組件是什麽 111

8.2  組件的註冊 111

8.2.1  全局註冊 111

8.2.2  局部註冊 112

8.3  使用prop向子組件傳遞數據 113

8.3.1  prop基本用法 113

8.3.2  單向數據流 117

8.3.3  prop驗證 117

8.3.4  非prop的屬性 119

8.4  子組件向父組件傳遞數據 120

8.4.1  監聽子組件事件 121

8.4.2  將原生事件綁定到組件 122

8.4.3  sync修飾符 123

8.5  插槽 125

8.5.1  插槽的基本用法 125

8.5.2  編譯作用域 126

8.5.3  默認內容 126

8.5.4  命名插槽 127

8.5.5  作用域插槽 130

8.5.6  解構插槽prop 132

8.6  綜合案例——設計商城輪播效果圖 133

8.7  疑難解惑 135

第9章  組合API 137

9.1  為什麽要引入組合API 137

9.2  setup()函數 137

9.3  響應式API 138

9.3.1  reactive()方法和watchEffect()方法 139

9.3.2  ref()方法 140

9.3.3  readonly()方法 141

9.3.4  computed()方法 141

9.3.5  watch()方法 142

9.4  綜合案例——開發待辦事項功能 143

9.5  疑難解惑 144

第10章  項目腳手架vue-cli和Vite 145

10.1  腳手架的組件 145

10.2  腳手架環境搭建 146

10.3  安裝腳手架 148

10.4  創建項目 149

10.4.1  使用命令創建項目 149

10.4.2  使用圖形化界面創建項目 150

10.5  分析項目結構 153

10.6  構建工具Vite 155

10.7  疑難解惑 157

第11章  使用webpack打包 159

11.1  前端工程化與 webpack 159

11.2  webpack基礎配置 162

11.2.1  使用webpack構建Vue.js 3.x項目 162

11.2.2  就是一個JS文件而已 165

11.2.3  逐步完善配置文件 165

11.3  單文件組件與vue-loader 167

11.4  疑難解惑 170

第12章  玩轉前端路由 173

12.1  使用Vue Router實現前端路由控制 173

12.1.1  前端路由的實現方式 173

12.1.2  路由實現 174

12.2  Vue Router中的常用技術 177

12.2.1  命名路由 178

12.2.2  命名視圖 179

12.2.3  路由傳參 184

12.3  編程式導航 187

12.4  組件與Vue Router間解耦 191

12.4.1  布爾模式 191

12.4.2  對象模式 194

12.4.3  函數模式 196

12.5  疑難解惑 199

第13章  狀態管理Vuex 201

13.1  什麽是Vuex 201

13.1.1  什麽是狀態管理模式 201

13.1.2  什麽情況下使用Vuex 202

13.2  使用Vuex 203

13.3  在項目中使用Vuex 203

13.3.1  搭建一個項目 203

13.3.2  state對象 205

13.3.3  getters對象 206

13.3.4  mutations對象 208

13.3.5  actions對象 210

13.4  疑難解惑 212

第14章  項目實戰1——開發科技企業網站系統 213

14.1  使用Vite搭建項目 213

14.2  設計首頁頁面 216

14.2.1  網頁頭部組件 216

14.2.2  網頁首頁組件 218

14.2.3  網頁頁腳組件 219

14.3  設計主營業務組件 220

14.4  設計關於我們組件 221

14.5  設計企業新聞組件 223

14.6  設計聯系我們組件 224

14.7  路由配置 225

14.8  系統的運行 225

14.9  系統的調試 226

第15章  項目實戰2——開發在線教育網站系統 229

15.1  項目環境及框架 229

15.1.1  系統開發環境要求 229

15.1.2  軟件框架 229

15.2  系統分析 230

15.2.1  系統功能設計 230

15.2.2  系統功能結構圖 231

15.3  系統主要功能實現 231

15.3.1  首頁頁面的實現 231

15.3.2  課程列表頁面的實現 239

15.4.3  合作院校頁面的實現 240

15.3.4  高職課堂頁面的實現 241

15.3.5  課程詳情頁面的實現 242

15.3.6  登錄、註冊頁面的實現 244

第16章  項目實戰3——開發圖書管理系統 251

16.1  項目環境及框架 251

16.1.1  系統開發環境要求 251

16.1.2  軟件框架 251

16.2  系統分析 252

16.2.1  系統功能設計 252

16.2.2  系統功能結構圖 253

16.3  系統主要功能實現 253

16.3.1  登錄頁面的實現 253

16.3.2  註冊頁面的實現 255

16.3.3  首頁頁面的實現 255

16.3.4  個人中心頁面的實現 260

16.3.5  書籍管理頁面的實現 262

16.3.6  用戶管理頁面的實現 265

第17章  項目實戰4——開發家庭裝修網站系統 267

17.1  項目環境及框架 267

17.1.1  系統開發環境要求 267

17.1.2  軟件框架 267

17.2  系統分析 268

17.2.1  系統功能設計 268

17.2.2  系統功能結構圖 268

17.3  系統主要功能實現 269

17.3.1  首頁頁面的實現 269

17.3.2  關於我們頁面的實現 275

17.3.3  新聞資訊頁面的實現 278

17.3.4  經典案例頁面的實現 279

17.3.5  合作與支持頁面的實現 280

第18章  項目實戰5——開發企業辦公自動化系統 283

18.1  項目環境及框架 283

18.1.1  系統開發環境要求 283

18.1.2  軟件框架 283

18.2  系統分析 284

18.2.1  系統功能設計 284

18.2.2  系統功能結構圖 285

18.3  系統主要功能實現 285

18.3.1  登錄頁面的實現 285

18.3.2  概況頁面的實現 287

18.3.3  員工信息頁面的實現 290

18.3.4  招聘崗位頁面的實現 292

18.3.5  招聘者信息頁面的實現 293

18.3.6  考勤信息頁面的實現 293

18.3.7  簽到信息頁面的實現 294