第 1章　Vue.js簡(jiǎn)介　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簡(jiǎn)介　3

1.4　創(chuàng)建第 一個(gè)Vue實(shí)例　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

上機(jī)指導(dǎo)　11

習(xí)題　12

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

2.1　應(yīng)用程序?qū)嵗�及選項(xiàng)　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　使用表達(dá)式　20

2.3　指令　21

2.3.1　參數(shù)　21

2.3.2　動(dòng)態(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

上機(jī)指導(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ù)組更新檢測(cè)　32

3.2.4　應(yīng)用v-for指令遍歷對(duì)象　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)建待辦事項(xiàng)列表　39

小結(jié)　40

上機(jī)指導(dǎo)　40

習(xí)題　42

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

4.1　計(jì)算屬性　43

4.1.1　什么是計(jì)算屬性　43

4.1.2　getter和setter　45

4.1.3　計(jì)算屬性的緩存　47

4.2　監(jiān)聽屬性　48

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

4.2.2　deep選項(xiàng)　49

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

4.3.1　實(shí)現(xiàn)簡(jiǎn)單計(jì)數(shù)器　50

4.3.2　實(shí)現(xiàn)長(zhǎng)度單位換算　51

小結(jié)　52

上機(jī)指導(dǎo)　52

習(xí)題　54

第5章　樣式綁定　55

5.1　class屬性綁定　55

5.1.1　對(duì)象語法　55

5.1.2　數(shù)組語法　59

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

5.2.1　對(duì)象語法　62

5.2.2　數(shù)組語法　64

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

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

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

小結(jié)　67

上機(jī)指導(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)計(jì)單擊按鈕的次數(shù)　76

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

小結(jié)　78

上機(jī)指導(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　單個(gè)復(fù)選框　84

7.2.2　多個(gè)復(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

上機(jī)指導(dǎo)　96

習(xí)題　99

第8章　自定義指令　100

8.1　注冊(cè)自定義指令　100

8.1.1　注冊(cè)全局自定義指令　100

8.1.2　注冊(cè)局部自定義指令　101

8.2　鉤子函數(shù)　102

8.3　自定義指令的綁定值　105

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

8.3.2　綁定字符串常量　106

8.3.3　綁定對(duì)象字面量　106

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

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

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

小結(jié)　109

上機(jī)指導(dǎo)　109

習(xí)題　110

第9章　組件　111

9.1　注冊(cè)組件　111

9.1.1　注冊(cè)全局組件　111

9.1.2　注冊(cè)局部組件　113

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

9.2.1　什么是Prop　114

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

9.2.3　Prop驗(yàn)證　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　默認(rèn)內(nèi)容　125

9.4.4　命名插槽　125

9.4.5　作用域插槽　128

9.5　動(dòng)態(tài)組件　130

9.5.1　基礎(chǔ)用法　130

9.5.2　keep-alive　132

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

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

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

小結(jié)　135

上機(jī)指導(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動(dòng)畫　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輔助編程文字與列表項(xiàng)的過渡效果　152

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

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

小結(jié)　156

上機(jī)指導(dǎo)　156

習(xí)題　158

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

11.1　路由基礎(chǔ)　159

11.1.1　引入Vue Router　159

11.1.2　基本用法　159

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

11.1.4　命名路由　163

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

11.3　嵌套路由　166

11.4　命名視圖　170

11.5　高級(jí)用法　173

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

11.5.2　scrollBehavior()方法　176

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

11.6.1　實(shí)現(xiàn)簡(jiǎn)單的選項(xiàng)卡切換　177

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

小結(jié)　180

上機(jī)指導(dǎo)　180

習(xí)題　183

第　12章 使用axios實(shí)現(xiàn)Ajax請(qǐng)求　184

12.1　什么是axios　184

12.2　引入axios　184

12.3　發(fā)送請(qǐng)求　185

12.3.1　發(fā)送get請(qǐng)求　185

12.3.2　發(fā)送post請(qǐng)求　187

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

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

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

小結(jié)　192

上機(jī)指導(dǎo)　192

習(xí)題　194

第　13章 Vue CLI　195

13.1　Vue CLI簡(jiǎn)介　195

13.2　Vue CLI的安裝　196

13.3　創(chuàng)建項(xiàng)目　196

13.3.1　使用vue create命令　196

13.3.2　使用圖形界面　199

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

13.5　單文件組件　202

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

13.6.1　編寫一個(gè)簡(jiǎn)單的計(jì)數(shù)器組件　204

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

小結(jié)　207

上機(jī)指導(dǎo)　207

習(xí)題　210

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

14.1　Vuex簡(jiǎn)介　211

14.2　Vuex的安裝　212

14.3　基礎(chǔ)用法　212

14.3.1　Vuex的組成　212

14.3.2　在項(xiàng)目中使用Vuex　212

14.4　實(shí)例　222

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

14.5.1　管理選項(xiàng)卡切換圖片效果　228

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

小結(jié)　233

上機(jī)指導(dǎo)　233

習(xí)題　237

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

15.1　項(xiàng)目的設(shè)計(jì)思路　238

15.1.1　項(xiàng)目概述　238

15.1.2　頁面預(yù)覽　238

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

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

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

15.2.1　主頁的設(shè)計(jì)　241

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

15.6.3　注冊(cè)頁面的實(shí)現(xiàn)　272

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

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

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

15.7.3　AIGC輔助完善項(xiàng)目　279

小結(jié)　280

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

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

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

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

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

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

16.3　實(shí)現(xiàn)過程　283

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

16.3.2　活動(dòng)圖片的設(shè)計(jì)　284

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

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

16.3.5　浮動(dòng)窗口的設(shè)計(jì)　291

小結(jié)　292