JavaScript+Vue.js前端開發任務驅動式教程

仇善梁，男，1983年12月17日出生，碩士，副教授，江蘇旅遊職業學院教務處處長，長期從事web開發技術教學研究，曾獲全國職業院校信息化教學大賽教學軟件組一等獎，江蘇省職業院校技能大賽二等獎，指導學生獲第十四屆藍橋杯全國軟件和信息技術專業人才大賽web應用開發項目江蘇省一等獎，全國三等獎，取得軟著2項，主持開發技術服務類橫向項目3項，任江蘇省高等學校教育信息化研究會教學技術委員會委員，南京市人社局職業技術培訓（HarmonyOS應用開發）講師。

上篇 JavaScript應用程序設計

模塊1　JavaScript知識入門及應用　2

學習領會　2

1.1　JavaScript簡介　2

1.2　初識ECMAScript 6.0　3

1.3　JavaScript常用的開發工具　3

1.4　ECMAScript的基本語法規則　4

1.5　JavaScript的註釋　7

1.6　在HTML文檔中嵌入JavaScript代碼的方法　7

1.7　JavaScript的功能展示　10

1.8　JavaScript的輸出　11

1.9　JavaScript的消息框　12

1.10　JavaScript庫　13

應用實踐　14

【任務1】 使用JavaScript實現具有手風琴效果的橫向焦點圖片輪換　14

在線測試　16

模塊2　JavaScript編程基礎及應用　17

學習領會　17

2.1　ECMAScript的關鍵字與保留字　17

2.2　JavaScript的常量及常量聲明　18

2.3　JavaScript的變量　21

2.4　JavaScript的數據類型　23

2.5　typeof運算符與數據類型的檢測　25

2.6　JavaScript數據類型的轉換　26

2.7　字符串的基本操作　28

2.8　JavaScript的運算符與表達式　29

2.9　JSON及其使用　33

應用實踐　35

【任務2】 實現動態加載網頁內容　35

在線測試　36

模塊3　JavaScript流程控制及應用　37

學習領會　37

3.1　JavaScript的條件語句　37

3.2　JavaScript的循環語句　41

應用實踐　46

【任務3-1】 在不同的節日顯示對應的問候語　46

【任務3-2】 在不同時間段顯示不同的問候語　46

【任務3-3】 一周內每天顯示不同的圖片　47

【任務3-4】 實現鼠標指針滑過時動態改變顯示內容及其外觀效果　48

在線測試　50

模塊4　JavaScript函數編程及應用　51

學習領會　51

4.1　JavaScript的函數　51

4.2　JavaScript的計時方法　58

應用實踐　61

【任務4-1】 實現動態改變樣式　61

【任務4-2】 實現動態改變網頁字體大小及關閉網頁窗口　62

在線測試　63

模塊5　JavaScript對象編程及應用　64

學習領會　64

5.1　JavaScript的字符串對象及方法　64

5.2　JavaScript的數值對象及方法　68

5.3　JavaScript的日期對象及方法　71

5.4　JavaScript的數組對象及方法　74

5.5　JavaScript的自定義對象　79

5.6　ES6使用class構造對象　83

5.7　JavaScript的this指針　85

5.8　JavaScript的正則表達式與應用　86

5.9　JavaScript的RegExp對象及其方法　88

5.10　支持正則表達式的String對象的方法　91

應用實踐　94

【任務5-1】 在特定日期範圍內顯示打折促銷信息　94

【任務5-2】 實現在線考試倒計時　95

【任務5-3】 顯示常規格式的當前日期與時間　96

在線測試　97

模塊6　JavaScript對象模型及應用　98

學習領會　98

6.1　JavaScript的文檔對象及操作　98

6.2　JavaScript的瀏覽器對象及操作　103

6.3　位置與尺寸及JavaScript的設置方法　106

6.3.1　網頁元素的寬度和高度　106

6.3.2　網頁元素的位置　109

6.3.3　通過網頁元素的樣式屬性style獲取或設置元素的尺寸和位置　111

應用實踐　111

【任務6-1】 實現郵箱自動導航　111

【任務6-2】 實現網頁內容折疊與展開　112

在線測試　114

模塊7　JavaScript事件處理及應用　115

學習領會　115

7.1　認知JavaScript的事件　115

7.2　JavaScript的鼠標事件和鍵盤事件　116

7.3　頁面事件　116

7.4　表單及表單控件事件　116

7.5　編輯事件　117

7.6　event對象　117

7.7　JavaScript的事件方法　117

7.8　JavaScript的異常處理　118

7.9　JavaScript代碼的調試　120

應用實踐　120

【任務7-1】 實現網頁中的橫向導航菜單　120

【任務7-2】 實現網頁中圖片連續向上滾動　122

在線測試　123

下篇 Vue.js應用程序設計

模塊8　Vue.js基礎知識及應用　125

學習領會　125

8.1　Vue.js概述　125

8.2　下載、安裝與引入Vue.js　128

8.2.1　下載與安裝Vue.js　128

8.2.2　引入Vue.js　129

8.3　Vue.js應用入門　129

8.3.1　頁面模板插值　131

8.3.2　創建Vue.js實例　131

8.3.3　瀏覽網頁demo0802.html與查看數據　132

8.4　Vue.js實例的數據選項　132

8.5　Vue.js的DOM選項　138

8.6　Vue.js的實例屬性　139

8.7　Vue.js的實例方法　139

8.8　認知MVVM模式　141

8.8.1　什麼是MVVM　141

8.8.2　為什麼要使用MVVM　142

8.8.3　MVVM的組成部分　142

8.8.4　MVVM模式的實現者　143

應用實踐　143

【任務8-1】 編寫程序代碼計算金額　143

【任務8-2】 反向輸出字符串　145

【任務8-3】 編寫程序代碼實現圖片輪播　146

在線測試　147

模塊9　Vue.js網頁模板制作　148

學習領會　148

9.1　Vue.js的指令　148

9.1.1　指令概述　148

9.1.2　常用的Vue.js指令　149

9.2　模板內容渲染　153

9.2.1　模板動態插值　153

9.2.2　使用v-html指令輸出HTML代碼　153

9.2.3　表達式插值　154

9.2.4　使用v-text指令實現模板插值的類似效果　155

9.2.5　靜態插值　155

9.2.6　使用v-bind指令動態地綁定一個或多個特性　156

9.3　模板邏輯控制　157

9.3.1　模板條件渲染　157

9.3.2　循環渲染　160

9.4　Vue.js數組更新　165

9.4.1　使用Vue.js的變異方法更新數組　165

9.4.2　使用Vue.js的非變異方法更新數組　165

9.4.3　數組的過濾或排序　166

9.5　Vue.js事件處理　166

9.5.1　事件監聽　166

9.5.2　巧用事件修飾符　170

9.6　網頁模板制作　171

9.7　鼠標修飾符與鍵值修飾符　173

9.7.1　鼠標修飾符　173

9.7.2　鍵值修飾符　173

9.7.3　其他修飾符　174

應用實踐　175

【任務9-1】 使用帶有v-for指令的