Vue 3 前端框架應用項目教程 (微課版)
丁莉 高歡
相關主題
商品描述
本書系統介紹Vue 3前端框架應用的相關知識。本書由11個項目構成，從Vue快速入門開始，循序漸進地講解Vue語法基礎、Vue數據綁定、Vue內置指令、Vue組件、Vue路由管理、Vue組合式API、Vue項目搭建、Vue網絡請求、Vue狀態管理等核心內容，以“項目實戰：開發個人博客系統”作為學習成果的綜合檢驗。本書高度重視實踐，每個項目均配備實踐操作任務，緊密聯系工作場景，助力讀者將理論知識應用於實際工作中，切實提升前端開發實操技能。
本書適合作為高等院校計算機相關專業的教材，也適合作為Web前端開發人員及廣大編程愛好者的參考書。
作者簡介
張小誌，雙高專業A學校
河北科技工程職業技術大學 信息工程系副主任
主要教授人工智能、網站開發等課程
目錄大綱
Vue快速入門 1
任務 創建第 一個Vue應用 2
【任務提出】 2
【任務分析】 2
【知識準備】 2
1.1 Vue簡介 2
1.1.1 什麼是Vue 2
1.1.2 Vue的發展時間線 3
1.1.3 Vue的優點 4
1.1.4 Vue 3的新特性 5
1.2 開發環境搭建 6
1.2.1 Visual Studio Code 6
1.2.2 VS Code的下載和安裝 6
1.2.3 安裝插件 7
【任務實現】 7
【任務總結】 8
【鞏固練習】 8
【任務拓展】 9
Vue語法基礎 10
任務1 實現簡單的計時器 11
【任務提出】 11
【任務分析】 11
【知識準備】 11
2.1 Vue實例的創建與掛載 11
2.2 數據的定義與渲染 12
2.2.1 定義數據 12
2.2.2 插值 13
2.3 methods 13
2.4 computed 15
2.4.1 計算屬性的基本使用方法 15
2.4.2 計算屬性的get方法和set
方法 16
2.4.3 計算屬性的緩存功能 17
2.5 watch 19
2.5.1 watch監聽屬性 19
2.5.2 deep屬性 20
2.6 在Vue 2中創建實例 21
【任務實現】 23
【任務總結】 24
【鞏固練習】 25
【任務拓展】 25
Vue數據綁定 27
任務1 設計應聘信息登記表 28
【任務提出】 28
【任務分析】 28
【知識準備】 28
3.1 單向數據綁定 28
3.2 雙向數據綁定 30
3.2.1 綁定單行文本框 30
3.2.2 綁定多行文本框 30
3.2.3 綁定復選框 31
3.2.4 綁定單選按鈕 32
3.2.5 綁定下拉列表 33
3.2.6 綁定多選列表框 34
3.3 修飾符 35
3.3.1 .lazy 35
3.3.2 .number 35
3.3.3 .trim 36
3.4 MVVM模式 36
【任務實現】 37
【任務總結】 40
【鞏固練習】 40
【任務拓展】 40
任務2 使用樣式綁定實現投票和撤回投票
功能 41
【任務提出】 41
【任務分析】 42
【知識準備】 42
3.5 綁定樣式類 42
3.5.1 對象語法 42
3.5.2 數組語法 45
3.6 綁定內聯樣式 47
3.6.1 對象語法 47
3.6.2 數組語法 49
【任務實現】 49
【任務總結】 51
【鞏固練習】 51
【任務拓展】 52
Vue內置指令 53
任務1 跑馬燈 54
【任務提出】 54
【任務分析】 54
【知識準備】 54
4.1 v-on指令 54
4.2 事件修飾符 55
4.3 生命周期 56
4.4 字符串的截取和拼接 57
4.5 定時器 57
【任務實現】 57
【任務總結】 58
【鞏固練習】 59
【任務拓展】 59
任務2 切換登錄方式 60
【任務提出】 60
【任務分析】 60
【知識準備】 60
4.6 條件渲染指令簡介 60
4.6.1 v-if指令 60
4.6.2 v-else-if指令 60
4.6.3 v-else指令 61
4.6.4 v-show指令 61
4.7 v-html和v-text 61
4.7.1 v-html指令 61
4.7.2 v-text指令 62
4.8 input中key屬性作用 62
【任務實現】 62
【任務總結】 64
【鞏固練習】 64
【任務拓展】 64
任務3 搜索指定的圖書信息 65
【任務提出】 65
【任務分析】 65
【知識準備】 65
4.9 v-for指令 65
4.10 search函數 66
【任務實現】 66
【任務總結】 68
【鞏固練習】 68
【任務拓展】 69
任務4 購物車 69
【任務提出】 69
【任務分析】 69
【知識準備】 70
4.10 數組的基本操作方法 70
【任務實現】 70
【任務總結】 72
【鞏固練習】 72
【任務拓展】 73
Vue組件 74
任務1 使用組件嵌套制作“校園新聞”
版塊 75
【任務提出】 75
【任務分析】 75
【知識準備】 75
5.1 組件的定義 75
5.2 組件的使用方法 76
5.3 全局組件 76
5.4 局部組件 77
5.5 組件嵌套 79
【任務實現】 80
【任務總結】 82
【鞏固練習】 83
【任務拓展】 83
任務2 制作“簡易購物車”組件 83
【任務提出】 83
【任務分析】 84
【知識準備】 84
5.6 父組件向子組件傳遞數據 84
5.6.1 靜態傳遞數據 84
5.6.2 動態傳遞數據 85
5.6.3 數據驗證 86
5.7 子組件向父組件傳遞數據 89
【任務實現】 91
【任務總結】 94
【鞏固練習】 94
【任務拓展】 94
任務3 使用具名插槽制作“新聞熱點”
版塊 95
【任務提出】 95
【任務分析】 96
【知識準備】 96
5.8 默認插槽 96
5.9 具名插槽 98
5.10 作用域插槽 100
5.11 動態組件 102
【任務實現】 105
【任務總結】 107
【鞏固練習】 107
【任務拓展】 108
Vue路由管理 109
任務1 實現選項卡 110
【任務提出】 110
【任務分析】 110
【知識準備】 110
6.1 Vue Router入門 110
6.1.1 認識前端路由 110
6.1.2 認識Vue Router 111
6.2 Vue Router的安裝與使用 111
6.2.1 Vue Router的安裝 111
6.2.2 Vue Router的使用步驟 112
【任務實現】 112
【任務總結】 116
【鞏固練習】 116
【任務拓展】 117
任務2 實現後臺管理系統 117
【任務提出】 117
【任務分析】 118
【知識準備】 118
6.3 嵌套路由 118
6.4 動態路由 119
6.5 命名路由 120
6.6 編程式導航 121
【任務實現】 121
【任務總結】 125
【鞏固練習】 125
【任務拓展】 126
Vue組合式API 127
任務 選項卡 128
【任務提出】 128
【任務分析】 128
【知識準備】 128
7.1 Vue組合式API 128
7.2 setup函數 129
7.3 響應式API 129
7.3.1 ref 129
7.3.2 reactive 130
7.3.3 watchEffect 131
7.3.4 computed 131
【任務實現】 132
【任務總結】 134
【鞏固練習】 135
【任務拓展】 135
Vue項目搭建 136
任務1 使用Vue CLI構建項目實現組件
切換 137
【任務提出】 137
【任務分析】 137
【知識準備】 137
8.1 認識Vue CLI 137
8.1.1 什麼是Vue CLI 137
8.1.2 使用Vue CLI的前提——
Node.js的安裝 138
8.1.3 Vue CLI的安裝 140
8.2 使用Vue CLI創建項目 141
8.2.1 快速創建項目 141
8.2.2 分析項目結構 141
8.3 單文件組件 142
8.3.1 什麼是單文件組件 143
8.3.2 創建並使用Hello單文件
組件 143
8.4 在Vue CLI項目中使用路由 145
8.4.1 安裝路由插件Vue Router 145
8.4.2 Vue Router插件在Vue CLI
項目中的使用 146
【任務實現】 147
【任務總結】 149
【鞏固練習】 149
【任務拓展】 150
任務2 使用Vite構建項目實現學生管理
系統的導航功能 150
【任務提出】 150
【任務分析】 150
【知識準備】 151
8.5 認識Vite 151
8.5.1 什麼是Vite 151
8.5.2 Vite的優勢 151
8.6 使用Vite創建Vue 3項目 151
【任務實現】 153
【任務總結】 158
【鞏固練習】 158
【任務拓展】 159
Vue網絡請求 160
任務 調用後臺端口實現用戶管理
模塊 161
【任務提出】 161
【任務分析】 161
【知識準備】 161
9.1 Axios 161
9.1.1 什麼是Axios 162
9.1.2 Axios應用 162
9.2 後端準備 164
9.2.1 搭建服務器環境 164
9.2.2 準備後端網站 165
9.3 跨域問題 169
9.3.1 使用Axios發送網絡請求 169
9.3.2 什麼是跨域請求 171
9.3.3 解決跨域請求問題 171
【任務實現】 172
【任務總結】 181
【鞏固練習】 182
【任務拓展】 182
Vue狀態管理 184
任務 購物車 185
【任務提出】 185
【任務分析】 185
【知識準備】 185
10.1 Vuex介紹 185
10.1.1 什麼是Vuex 185
10.1.2 安裝 186
10.2 Vuex核心概念 186
10.2.1 state 186
10.2.2 Getter 187
10.2.3 Mutation 188
10.2.4 Action 189
10.2.5 Module 189
【任務實現】 190
【任務總結】 198
【鞏固練習】 198
【任務拓展】 198
項目實戰：開發個人博客
系統 199
任務 開發個人博客系統 200
【任務提出】 200
【任務分析】 200
【知識準備】 200
11.1 項目分析 200
11.1.1 項目展示 201
11.1.2 組件規劃 201
11.2 前端準備 204
11.3 後端準備 206
【任務實現】 207
【任務總結】 219
【鞏固練習】 219
【任務拓展】 220
