HTML5 + Vue.js 3.x 從入門到精通 (視頻教學版)

張工廠

  • 出版商: 清華大學
  • 出版日期: 2022-09-01
  • 定價: $534
  • 售價: 8.5$454
  • 語言: 簡體中文
  • ISBN: 7302614490
  • ISBN-13: 9787302614494
  • 相關分類: HTMLVue.js
  • 立即出貨 (庫存 < 3)

  • HTML5 + Vue.js 3.x 從入門到精通 (視頻教學版)-preview-1
  • HTML5 + Vue.js 3.x 從入門到精通 (視頻教學版)-preview-2
  • HTML5 + Vue.js 3.x 從入門到精通 (視頻教學版)-preview-3
HTML5 + Vue.js 3.x 從入門到精通 (視頻教學版)-preview-1

買這商品的人也買了...

商品描述

本書通過對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