第 1章　Vue.js簡介　1

1.1　Vue.js概述　1

1.1.1　什么是Vue.js　1

1.1.2　Vue.js的特性　2

1.2　Vue.js的安裝　2

1.2.1　使用CDN　2

1.2.2　使用NPM　2

1.2.3　使用Vue CLI　3

1.3　開發(fā)工具WebStorm簡介　3

1.4　創(chuàng)建第 一個Vue實例　6

1.5　在WebStorm中引入AIGC工具　10

1.5.1　AIGC編程助手Baidu Comate　10

1.5.2　AIGC編程助手TONGYI Lingma　10

1.5.3　DeepSeek R1推理大模型　11

小結(jié)　11

上機指導(dǎo)　11

習(xí)題　12

第　2章 基礎(chǔ)特性　13

2.1　應(yīng)用程序?qū)嵗�及選項　13

2.1.1　數(shù)據(jù)　13

2.1.2　方法　14

2.1.3　生命周期鉤子函數(shù)　15

2.2　插值　16

2.2.1　文本插值　16

2.2.2　插入HTML　18

2.2.3　綁定屬性　18

2.2.4　使用表達式　20

2.3　指令　21

2.3.1　參數(shù)　21

2.3.2　動態(tài)參數(shù)　22

2.3.3　修飾符　22

2.4　AIGC輔助快速學(xué)習(xí)　22

2.4.1　AIGC輔助添加注釋　22

2.4.2　AIGC輔助解釋代碼　22

2.4.3　AIGC輔助查詢術(shù)語　23

小結(jié)　24

上機指導(dǎo)　24

習(xí)題　25

第3章　條件判斷與列表渲染　26

3.1　條件判斷　26

3.1.1　v-if指令　26

3.1.2　v-else指令　27

3.1.3　v-else-if指令　27

3.1.4　v-show指令　28

3.1.5　v-if和v-show的比較　29

3.2　列表渲染　30

3.2.1　應(yīng)用v-for指令遍歷數(shù)組　30

3.2.2　在元素中使用v-for　32

3.2.3　數(shù)組更新檢測　32

3.2.4　應(yīng)用v-for指令遍歷對象　35

3.2.5　向?qū)ο笾刑砑禹憫?yīng)式屬性　37

3.2.6　應(yīng)用v-for指令遍歷整數(shù)　37

3.3　AIGC輔助編程v-if和v-for指令的應(yīng)用　38

3.3.1　切換登錄類型　38

3.3.2　創(chuàng)建待辦事項列表　39

小結(jié)　40

上機指導(dǎo)　40

習(xí)題　42

第4章　計算屬性與監(jiān)聽屬性　43

4.1　計算屬性　43

4.1.1　什么是計算屬性　43

4.1.2　getter和setter　45

4.1.3　計算屬性的緩存　47

4.2　監(jiān)聽屬性　48

4.2.1　什么是監(jiān)聽屬性　48

4.2.2　deep選項　49

4.3　AIGC輔助編程簡單計數(shù)器和長度單位換算的實現(xiàn)　50

4.3.1　實現(xiàn)簡單計數(shù)器　50

4.3.2　實現(xiàn)長度單位換算　51

小結(jié)　52

上機指導(dǎo)　52

習(xí)題　54

第5章　樣式綁定　55

5.1　class屬性綁定　55

5.1.1　對象語法　55

5.1.2　數(shù)組語法　59

5.2　內(nèi)聯(lián)樣式綁定　61

5.2.1　對象語法　62

5.2.2　數(shù)組語法　64

5.3　AIGC輔助編程為表格和文字使用樣式綁定　65

5.3.1　實現(xiàn)表格隔行換色　65

5.3.2　制作靜態(tài)3D效果的文字　66

小結(jié)　67

上機指導(dǎo)　67

習(xí)題　68

第6章　事件處理　69

6.1　事件監(jiān)聽　69

6.1.1　使用v-on指令　69

6.1.2　事件處理方法　70

6.1.3　使用內(nèi)聯(lián)JavaScript語句　72

6.2　事件處理中的修飾符　73

6.2.1　事件修飾符　73

6.2.2　按鍵修飾符　75

6.3　AIGC輔助編程單擊事件的應(yīng)用　76

6.3.1　統(tǒng)計單擊按鈕的次數(shù)　76

6.3.2　實現(xiàn)選擇題　77

小結(jié)　78

上機指導(dǎo)　78

習(xí)題　80

第7章　表單控件綁定　81

7.1　綁定文本框　81

7.1.1　單行文本框　81

7.1.2　多行文本框　83

7.2　綁定復(fù)選框　84

7.2.1　單個復(fù)選框　84

7.2.2　多個復(fù)選框　84

7.3　綁定單選按鈕　86

7.4　綁定下拉菜單　87

7.4.1　單選　87

7.4.2　多選　88

7.5　值綁定　90

7.5.1　單選按鈕　90

7.5.2　復(fù)選框　90

7.5.3　下拉菜單　92

7.6　使用修飾符　92

7.6.1　.lazy　93

7.6.2　.number　93

7.6.3　.trim　94

7.7　AIGC輔助編程綁定輸入框的值和下拉菜單　94

7.7.1　綁定輸入框的值　94

7.7.2　綁定下拉菜單　95

小結(jié)　96

上機指導(dǎo)　96

習(xí)題　99

第8章　自定義指令　100

8.1　注冊自定義指令　100

8.1.1　注冊全局自定義指令　100

8.1.2　注冊局部自定義指令　101

8.2　鉤子函數(shù)　102

8.3　自定義指令的綁定值　105

8.3.1　綁定數(shù)值常量　105

8.3.2　綁定字符串常量　106

8.3.3　綁定對象字面量　106

8.4　AIGC輔助編程設(shè)置圖片的不透明度和元素的邊框　107

8.4.1　設(shè)置圖片的不透明度　107

8.4.2　設(shè)置元素的邊框　108

小結(jié)　109

上機指導(dǎo)　109

習(xí)題　110

第9章　組件　111

9.1　注冊組件　111

9.1.1　注冊全局組件　111

9.1.2　注冊局部組件　113

9.2　數(shù)據(jù)傳遞　114

9.2.1　什么是Prop　114

9.2.2　傳遞動態(tài)Prop　115

9.2.3　Prop驗證　116

9.3　自定義事件　119

9.3.1　自定義事件的監(jiān)聽和觸發(fā)　119

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

9.4　內(nèi)容分發(fā)　123

9.4.1　基礎(chǔ)用法　123

9.4.2　編譯作用域　124

9.4.3　默認內(nèi)容　125

9.4.4　命名插槽　125

9.4.5　作用域插槽　128

9.5　動態(tài)組件　130

9.5.1　基礎(chǔ)用法　130

9.5.2　keep-alive　132

9.6　AIGC輔助編程自定義事件與動態(tài)組件的應(yīng)用　133

9.6.1　為元素設(shè)置背景顏色　133

9.6.2　切換文本內(nèi)容　134

小結(jié)　135

上機指導(dǎo)　136

習(xí)題　137

第　10章 過渡　138

10.1　單元素過渡　138

10.1.1　CSS過渡　138

10.1.2　過渡的類介紹　139

10.1.3　自定義過渡類　141

10.1.4　CSS動畫　142

10.1.5　JavaScript鉤子函數(shù)　143

10.2　多元素過渡　146

10.2.1　基礎(chǔ)用法　146

10.2.2　key屬性　147

10.2.3　過渡模式　148

10.3　多組件過渡　149

10.4　列表過渡　151

10.5　AIGC輔助編程文字與列表項的過渡效果　152

10.5.1　實現(xiàn)文字顯示和隱藏的過渡效果　153

10.5.2　實現(xiàn)列表項的過渡效果　153

小結(jié)　156

上機指導(dǎo)　156

習(xí)題　158

第　11章 使用Vue Router實現(xiàn)路由管理　159

11.1　路由基礎(chǔ)　159

11.1.1　引入Vue Router　159

11.1.2　基本用法　159

11.1.3　動態(tài)路由匹配　162

11.1.4　命名路由　163

11.2　編程式導(dǎo)航　163

11.3　嵌套路由　166

11.4　命名視圖　170

11.5　高級用法　173

11.5.1　beforeEach()鉤子函數(shù)　173

11.5.2　scrollBehavior()方法　176

11.6　AIGC輔助編程使用兩種方式實現(xiàn)內(nèi)容切換　177

11.6.1　實現(xiàn)簡單的選項卡切換　177

11.6.2　使用編程式導(dǎo)航實現(xiàn)內(nèi)容切換　178

小結(jié)　180

上機指導(dǎo)　180

習(xí)題　183

第　12章 使用axios實現(xiàn)Ajax請求　184

12.1　什么是axios　184

12.2　引入axios　184

12.3　發(fā)送請求　185

12.3.1　發(fā)送get請求　185

12.3.2　發(fā)送post請求　187

12.4　AIGC輔助編程獲取響應(yīng)數(shù)據(jù)　189

12.4.1　使用axios發(fā)送get請求獲取響應(yīng)數(shù)據(jù)　189

12.4.2　使用axios發(fā)送post請求獲取響應(yīng)數(shù)據(jù)　191

小結(jié)　192

上機指導(dǎo)　192

習(xí)題　194

第　13章 Vue CLI　195

13.1　Vue CLI簡介　195

13.2　Vue CLI的安裝　196

13.3　創(chuàng)建項目　196

13.3.1　使用vue create命令　196

13.3.2　使用圖形界面　199

13.4　項目結(jié)構(gòu)　200

13.5　單文件組件　202

13.6　AIGC輔助編程單文件組件的應(yīng)用　204

13.6.1　編寫一個簡單的計數(shù)器組件　204

13.6.2　實現(xiàn)選項卡切換圖片效果　206

小結(jié)　207

上機指導(dǎo)　207

習(xí)題　210

第　14章 狀態(tài)管理　211

14.1　Vuex簡介　211

14.2　Vuex的安裝　212

14.3　基礎(chǔ)用法　212

14.3.1　Vuex的組成　212

14.3.2　在項目中使用Vuex　212

14.4　實例　222

14.5　AIGC輔助編程管理選項卡切換圖片效果與計數(shù)器狀態(tài)　228

14.5.1　管理選項卡切換圖片效果　228

14.5.2　管理計數(shù)器狀態(tài)　231

小結(jié)　233

上機指導(dǎo)　233

習(xí)題　237

第　15章 綜合開發(fā)實例51購商城　238

15.1　項目的設(shè)計思路　238

15.1.1　項目概述　238

15.1.2　頁面預(yù)覽　238

15.1.3　功能結(jié)構(gòu)　240

15.1.4　文件夾組織結(jié)構(gòu)　241

15.2　主頁的設(shè)計與實現(xiàn)　241

15.2.1　主頁的設(shè)計　241

15.2.2　頂部區(qū)和底部區(qū)功能的實現(xiàn)　243

15.2.3　商品分類導(dǎo)航功能的實現(xiàn)　246

15.2.4　輪播圖功能的實現(xiàn)　248

15.2.5　商品推薦功能的實現(xiàn)　250

15.3　商品詳情頁面的設(shè)計與實現(xiàn)　252

15.3.1　商品詳情頁面的設(shè)計　252

15.3.2　圖片放大鏡效果的實現(xiàn)　253

15.3.3　商品概要功能的實現(xiàn)　255

15.3.4　猜你喜歡功能的實現(xiàn)　258

15.3.5　選項卡切換效果的實現(xiàn)　260

15.4　購物車頁面的設(shè)計與實現(xiàn)　262

15.4.1　購物車頁面的設(shè)計　262

15.4.2　購物車頁面的實現(xiàn)　262

15.5　付款頁面的設(shè)計與實現(xiàn)　265

15.5.1　付款頁面的設(shè)計　265

15.5.2　付款頁面的實現(xiàn)　266

15.6　登錄和注冊頁面的設(shè)計與實現(xiàn)　269

15.6.1　登錄和注冊頁面的設(shè)計　269

15.6.2　登錄頁面的實現(xiàn)　270

15.6.3　注冊頁面的實現(xiàn)　272

15.7　AIGC輔助分析優(yōu)化項目　275

15.7.1　AIGC輔助提供項目開發(fā)思路　275

15.7.2　AIGC輔助優(yōu)化代碼　276

15.7.3　AIGC輔助完善項目　279

小結(jié)　280

第　16章 課程設(shè)計智匯企業(yè)官方網(wǎng)站首頁　281

16.1　課程設(shè)計目的　281

16.2　系統(tǒng)設(shè)計　281

16.2.1　業(yè)務(wù)流程　281

16.2.2　功能結(jié)構(gòu)　282

16.2.3　系統(tǒng)預(yù)覽　282

16.3　實現(xiàn)過程　283

16.3.1　導(dǎo)航欄的設(shè)計　283

16.3.2　活動圖片的設(shè)計　284

16.3.3　新聞列表的設(shè)計　286

16.3.4　產(chǎn)品推薦列表的設(shè)計　288

16.3.5　浮動窗口的設(shè)計　291

小結(jié)　292