《HTML5+Vue.js 3.x從入門到精通（視頻教學版）》是一本清華大學出版社出版的圖書，作者是張工廠。
基本介紹
- 中文名：《HTML5+Vue.js 3.x從入門到精通（視頻教學版）》
- 作者：張工廠
- 出版社：清華大學出版社
- 出版時間：2022年9月1日
- 頁數：89 頁
- 開本：16 開
- ISBN：9787302614494
內容簡介,圖書目錄,作者簡介,
內容簡介
本書通過對HTML5+Vue.js 3.x實例的介紹與演練，使讀者快速掌握HTML5+Vue.js 3.x框架的用法，提高Web前端實戰開發的能力。本書配套案例源碼、PPT課件、教學教案、同步教學視頻、上機習題及答案，以及其他教學資源與答疑服務。
本書共分21章。內容包括HTML5快速入門，文本、圖像和超連結，創建表格和表單，HTML5繪製圖形，HTML5中的音頻和視頻，地理定位、離線Web套用和Web存儲，認識Vue.js 3.x，Vue.js模板語法，精通指令，計算屬性，綁定v-bind與class或style，表單與v-model雙向綁定，精通監聽器，事件處理，過渡和動畫效果，組件和組合API，精通Vue CLI和Vite，使用Vue Router開發單頁面套用，使用axios與伺服器通信，使用Vuex管理組件狀態；最後通過開發一個網上商城項目，幫助讀者進一步鞏固和積累使用HTML5+Vue.js 3.x進行項目開發的知識和經驗。
本書內容豐富、注重實踐，對HTML5+Vue.js框架的初學者來說，是一本簡明易懂的入門書和工具書；對從事Web前端開發的讀者來說，也是一本難得的參考手冊。同時本書也適合作為高等院校和培訓機構計算機相關專業的教材。
圖書目錄
第1章 HTML5快速入門 1
1.1 HTML5概述 1
1.2 HTML5的文檔結構 2
1.2.1 文檔類型說明 2
1.2.2 HTML標籤 2
1.2.3 頭標籤<head> 2
1.2.4 網頁的主體標籤<body> 5
1.2.5 頁面注釋標籤<!-- --> 5
1.3 HTML5檔案的編寫方法 5
1.3.1 使用記事本手工編寫HTML檔案 6
1.3.2 安裝和使用編輯器 HBuilder 6
1.4 HTML5語法的新變化 8
第2章 文本、圖像和超連結 9
2.1 添加文本 9
2.2 文本排版 11
2.2.1 換行標籤<br/>與段落標籤<p> 11
2.2.2 標題標籤<h1>～<h6> 12
2.3 文字列表 13
2.3.1 無序列表<ul> 13
2.3.2 有序列表<ol> 14
2.4 網頁中的圖片 14
2.4.1 使用路徑 14
2.4.2 在網頁中插入圖像標籤<img> 16
2.5 URL的概念 17
2.5.1 URL的格式 17
2.5.2 URL的類型 18
2.6 超連結標籤<a> 19
2.6.1 設定文本和圖片的超連結 19
2.6.2 超連結指向的目標類型 19
第3章 創建表格和表單 21
3.1 表格基本結構及操作 21
3.1.1 表格基本結構 21
3.1.2 合併單元格 22
3.2 設計產品報價單 25
3.3 表單基本元素的使用 27
3.4 表單高級元素的使用 31
3.4.1 url和email屬性 31
3.4.2 日期和時間類型屬性 31
3.4.3 number屬性 32
3.4.4 range屬性 33
3.4.5 required屬性 33
第4章 HTML5繪製圖形 35
4.1 canvas概述 35
4.1.1 添加canvas元素 35
4.1.2 繪製矩形 36
4.2 繪製基本形狀 37
4.2.1 繪製圓形 37
4.2.2 繪製直線 38
4.2.3 繪製貝塞爾曲線 40
4.3 繪製漸變圖形 41
4.3.1 繪製線性漸變 41
4.3.2 繪製徑向漸變 43
4.4 繪製變形圖形 44
4.4.1 變換原點坐標 44
4.4.2 圖形縮放 45
4.4.3 圖形旋轉 46
4.5 圖形組合 47
4.6 繪製帶陰影的圖形 49
4.7 使用圖像 50
4.7.1 繪製圖像 50
4.7.2 平鋪圖像 51
4.7.3 裁剪圖像 53
4.8 繪製文字 54
4.9 圖形的保存與恢復 56
4.9.1 保存與恢復狀態 56
4.9.2 保存到URL數據中 57
4.10 項目實戰—繪製商標 58
第5章 HTML5中的音頻和視頻 60
5.1 <audio>標籤 60
5.1.1 <audio>標籤概述 60
5.1.2 <audio>標籤的屬性 61
5.1.3 音頻解碼器 61
5.1.4 <audio>標籤瀏覽器的支持情況 61
5.2 <video>標籤 62
5.2.1 <video>標籤概述 62
5.2.2 <video>標籤的屬性 63
5.2.3 視頻解碼器 63
5.2.4 <video>標籤瀏覽器的支持情況 64
5.3 音頻和視頻中的方法 64
5.3.1 canPlayType()方法 64
5.3.2 load()方法 65
5.3.3 play()方法和pause()方法 66
5.4 音頻和視頻中的屬性 67
5.4.1 autoplay屬性 67
5.4.2 buffered屬性 68
5.4.3 controls屬性 69
5.4.4 currentSrc屬性 71
第6章 地理定位、離線Web套用和Web存儲 72
6.1 獲取地理位置 72
6.1.1 地理定位的原理 72
6.1.2 地理定位的函式 72
6.1.3 指定緯度和經度坐標 73
6.2 HTML5離線Web套用 74
6.2.1 新增的本地快取 74
6.2.2 本地快取的管理者—快取的管理者L5檔案 74
6.2.3 瀏覽器網頁快取與本地快取的區別 76
6.3 Web存儲 76
6.3.1 本地存儲和Cookie的區別 76
6.3.2 在客戶端存儲數據 76
6.3.3 sessionStorage函式 77
6.3.4 localStorage函式 78
第7章 認識Vue.js 3.x 79
7.1 Vue.js概述 79
7.1.1 Vue.js是什麼 79
7.1.2 Vue.js的發展歷程 81
7.2 MV*模式 81
7.2.1 MVC模式 81
7.2.2 MVVM模式 82
7.3 在項目中引入Vue.js 82
7.3.1 使用CDN的方式 82
7.3.2 使用NPM的方式 83
7.3.3 使用命令行工具的方式 83
7.3.4 使用Vite的方式 84
7.4 項目實訓—第一個Vue.js程式 84
第8章 Vue.js模板語法 86
8.1 創建應用程式實例 86
8.2 插值 87
8.3 方法選項 89
8.3.1 方法的使用方式 89
8.3.2 傳遞參數 91
8.3.3 方法之間的調用 92
8.4 指令 93
第9章 精通指令 96
9.1 常見內置指令 96
9.1.1 v-show 96
9.1.2 v-bind 97
9.1.3 v-model 98
9.1.4 v-on 100
9.1.5 v-text 101
9.1.6 v-html 102
9.1.7 v-once 103
9.1.8 v-pre 104
9.1.9 v-cloak 105
9.2 條件指令 106
9.2.1 v-if 106
9.2.2 v-else-if和v-else 107
9.2.3 v-for 108
9.3 指令縮寫 120
9.4 自定義指令 120
9.4.1 註冊自定義指令 120
9.4.2 鉤子函式 121
9.4.3 動態指令參數 123
9.5 項目實戰—通過指令實現隨機背景色效果 124
第10章 計算屬性 126
10.1 計算屬性的定義 126
10.2 計算屬性的getter和setter方法 127
10.3 計算屬性的快取 129
10.4 計算屬性代替v-for和v-if 132
10.5 項目實戰—使用計算屬性設計計算器 133
第11章 綁定v-bind與class或style 135
11.1 綁定HTML樣式class 135
11.1.1 數組語法 135
11.1.2 對象語法 137
11.1.3 在組件上使用 141
11.2 綁定內聯樣式style 141
11.2.1 對象語法 141
11.2.2 數組語法 144
11.3 項目實戰—設計隔行變色的水果信息表 145
第12章 表單與v-model雙向綁定 148
12.1 實現雙向數據綁定 148
12.2 單行文本輸入框 148
12.3 多行文本輸入框 149
12.4 複選框 150
12.5 單選按鈕 152
12.6 選擇框 153
12.7 值綁定 156
12.7.1 複選框的選項 156
12.7.2 單選框的選項 156
12.7.3 選擇框的選項 157
12.8 修飾符 158
12.8.1 lazy 158
12.8.2 number 159
12.8.3 trim 160
12.9 項目實戰—設計用戶註冊頁面 161
第13章 精通監聽器 163
13.1 使用監聽器 163
13.2 監聽方法和對象 164
13.2.1 監聽方法 164
13.2.2 監聽對象 165
13.3 實例方法$watch 168
13.4 項目實戰—使用監聽器設計購物車效果 169
第14章 事件處理 174
14.1 監聽事件 174
14.2 事件處理方法 175
14.3 事件修飾符 178
14.3.1 stop 179
14.3.2 capture 180
14.3.3 self 182
14.3.4 once 184
14.3.5 prevent 185
14.3.6 passive 186
14.4 按鍵修飾符 186
14.5 系統修飾鍵 188
14.6 項目實戰—處理用戶註冊信息 189
第15章 過渡和動畫效果 192
15.1 單元素/組件的過渡和動畫 192
15.1.1 CSS過渡 192
15.1.2 過渡的類名 194
15.1.3 CSS動畫 196
15.1.4 自定義過渡的類名 197
15.1.5 動畫的JavaScript鉤子函式 198
15.2 初始渲染的過渡 202
15.3 多個元素的過渡 203
15.4 列表過渡 204
15.4.1 列表的進入/離開過渡 205
15.4.2 列表的排序過渡 206
15.4.3 列表的交錯過渡 207
15.5 項目實戰—設計摺疊選單的過渡動畫 209
第16章 組件和組合API 212
16.1 組件是什麼 212
16.2 組件的註冊 213
16.2.1 全局註冊 213
16.2.2 局部註冊 214
16.3 使用prop向子組件傳遞數據 214
16.3.1 prop基本用法 215
16.3.2 單向數據流 218
16.3.3 prop驗證 218
16.3.4 非prop的屬性 220
16.4 子組件向父組件傳遞數據 221
16.4.1 監聽子組件事件 222
16.4.2 將原生事件綁定到組件 223
16.4.3 .sync修飾符 225
16.5 插槽 226
16.5.1 插槽的基本用法 227
16.5.2 編譯作用域 227
16.5.3 默認內容 227
16.5.4 命名插槽 229
16.5.5 作用域插槽 232
16.5.6 解構插槽prop 233
16.6 什麼是組合API 235
16.7 setup()函式 235
16.8 回響式API 236
16.8.1 reactive()方法和watchEffect()方法 236
16.8.2 ref()方法 237
16.8.3 readonly()方法 238
16.8.4 computed()方法 239
16.8.5 watch()方法 239
16.9 項目實戰—使用組件創建樹狀項目分類 240
第17章 精通Vue CLI和Vite 243
17.1 腳手架的組件 243
17.2 腳手架環境搭建 244
17.3 安裝腳手架 245
17.4 創建項目 246
17.4.1 使用命令 246
17.4.2 使用圖形化界面 249
17.5 分析項目結構 250
17.6 配置SCSS、Less和Stylus 253
17.7 配置檔案package.json 256
17.8 Vue.js 3.x新增的開發構建工具—Vite 257
17.8.1 創建項目 257
17.8.2 項目結構 258
第18章 使用Vue Router開發單頁面套用 260
18.1 使用Vue Router 260
18.1.1 在HTML頁面中使用路由 260
18.1.2 在項目中使用路由 265
18.2 命名路由 266
18.3 命名視圖 268
18.4 路由傳參 272
18.5 編程式導航 277
18.6 組件與Vue Router之間解耦 281
18.6.1 布爾模式 281
18.6.2 對象模式 284
18.6.3 函式模式 287
第19章 使用axios與伺服器通信 290
19.1 什麼是axios 290
19.2 安裝axios 291
19.3 基本用法 291
19.3.1 get請求和post請求 291
19.3.2 請求JSON數據 293
19.3.3 跨域請求數據 295
19.3.4 並發請求 297
19.4 axios API 298
19.5 請求配置 299
19.6 創建實例 301
19.7 配置默認選項 301
19.8 攔截器 302
19.9 項目實戰—顯示近7日的天氣情況 303
第20章 使用Vuex管理組件狀態 305
20.1 什麼是Vuex 305
20.2 安裝Vuex 306
20.3 在項目中使用Vuex 307
20.3.1 搭建一個項目 307
20.3.2 state對象 309
20.3.3 getters對象 310
20.3.4 mutation對象 312
20.3.5 action對象 313
第21章 開發網上商城項目 316
21.1 系統功能模組 316
21.2 系統結構分析 317
21.3 系統運行效果 317
21.4 系統功能模組的設計與實現 318
21.4.1 首頁頭部組件 318
21.4.2 首頁信息模組 319
21.4.3 用戶註冊與登錄模組 322
21.4.4 商品模組 324
21.4.5 購買模組 329
21.4.6 支付模組 331
作者簡介
張工廠，鄭州某軟體公司技術總監，技術主攻方向為PHP、MySQL與Web前端技術，具有很強的實戰經驗。長期從事PHP、MySQL的外包服務，對動態網站架構有著較為長期的設計經驗。著有圖書《PHP 8從入門到精通(視頻教學版)》《MySQL 5.7從入門到精通（視頻教學版）（第2版）》《PHP 7+MySQL 8動態網站開發從入門到精通（視頻教學版）》《HTML5+CSS3+jQuery Mobile+Bootstrap開發APP從入門到精通（視頻教學版）》。
