JavaScript+Vue.js前端開發(fā)任務(wù)驅(qū)動式教程
定 價:69.8 元
叢書名:工信精品網(wǎng)站開發(fā)系列教材
- 作者:仇善梁 陳承歡
- 出版時間:2025/1/1
- ISBN:9787115664525
- 出 版 社:人民郵電出版社
- 中圖法分類:TP393.092
- 頁碼:
- 紙張:膠版紙
- 版次:
- 開本:16開
本書在教材模塊化、一體化、層次化、活頁式等方面做了大量的探索與實踐,合理選取并有序組織了教材內(nèi)容,兼顧了知識講解的靈活性與教材的實用性。本書分為上、下兩篇,將JavaScript+Vue.js前端開發(fā)的理論知識講解與編程技能訓(xùn)練按由易到難、由淺入深的規(guī)律劃分為了15個模塊,分別是JavaScript知識入門及應(yīng)用、JavaScript編程基礎(chǔ)及應(yīng)用、JavaScript流程控制及應(yīng)用、JavaScript函數(shù)編程及應(yīng)用、JavaScript對象編程及應(yīng)用、JavaScript對象模型及應(yīng)用、JavaScript事件處理及應(yīng)用、Vue.js基礎(chǔ)知識及應(yīng)用、Vue.js網(wǎng)頁模板制作、Vue.js數(shù)據(jù)綁定與樣式綁定、Vue.js項目創(chuàng)建與運行、Vue.js組件構(gòu)建與應(yīng)用、Vue.js過渡與動畫實現(xiàn)、Vue.js路由配置與應(yīng)用,以及Vuex狀態(tài)管理。
本書可以作為普通高等院校、高職高;蛑械嚷殬I(yè)院校各專業(yè)相關(guān)課程的教材,也可以作為前端開發(fā)愛好者的自學(xué)參考書。
1. 模塊化構(gòu)建,凸顯職教特性:以工作流程為基準(zhǔn),采用模塊化架構(gòu),將前端開發(fā)知識體系拆解為實操性強的任務(wù)模塊,契合職教實踐導(dǎo)向。
2. 任務(wù)遞進拆解,強化知行合一:秉持由淺入深、從基礎(chǔ)到進階的思路,教材將各模塊細化為多項任務(wù),理論與實踐緊密結(jié)合,助力學(xué)生綜合能力提升。
3. 思政元素?zé)o痕融入,落實育人目標(biāo):在任務(wù)執(zhí)行中著重培養(yǎng)團隊協(xié)作與責(zé)任意識,案例剖析時融入創(chuàng)新與工匠精神,項目開發(fā)中引導(dǎo)學(xué)生關(guān)注技術(shù)的社會價值與倫理準(zhǔn)則,實現(xiàn)立德樹人。
仇善梁,男,1983年12月17日出生,碩士,副教授,江蘇旅游職業(yè)學(xué)院教務(wù)處處長,長期從事web開發(fā)技術(shù)教學(xué)研究,曾獲全國職業(yè)院校信息化教學(xué)大賽教學(xué)軟件組一等獎,江蘇省職業(yè)院校技能大賽二等獎,指導(dǎo)學(xué)生獲第十四屆藍橋杯全國軟件和信息技術(shù)專業(yè)人才大賽web應(yīng)用開發(fā)項目江蘇省一等獎,全國三等獎,取得軟著2項,主持開發(fā)技術(shù)服務(wù)類橫向項目3項,任江蘇省高等學(xué)校教育信息化研究會教學(xué)技術(shù)委員會委員,南京市人社局職業(yè)技術(shù)培訓(xùn)(HarmonyOS應(yīng)用開發(fā))講師。
上篇 JavaScript應(yīng)用程序設(shè)計
模塊1 JavaScript知識入門及應(yīng)用 2
學(xué)習(xí)領(lǐng)會 2
1.1 JavaScript簡介 2
1.2 初識ECMAScript 6.0 3
1.3 JavaScript常用的開發(fā)工具 3
1.4 ECMAScript的基本語法規(guī)則 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
應(yīng)用實踐 14
【任務(wù)1】 使用JavaScript實現(xiàn)具有手風(fēng)琴效果的橫向焦點圖片輪換 14
在線測試 16
模塊2 JavaScript編程基礎(chǔ)及應(yīng)用 17
學(xué)習(xí)領(lǐng)會 17
2.1 ECMAScript的關(guān)鍵字與保留字 17
2.2 JavaScript的常量及常量聲明 18
2.3 JavaScript的變量 21
2.4 JavaScript的數(shù)據(jù)類型 23
2.5 typeof運算符與數(shù)據(jù)類型的檢測 25
2.6 JavaScript數(shù)據(jù)類型的轉(zhuǎn)換 26
2.7 字符串的基本操作 28
2.8 JavaScript的運算符與表達式 29
2.9 JSON及其使用 33
應(yīng)用實踐 35
【任務(wù)2】 實現(xiàn)動態(tài)加載網(wǎng)頁內(nèi)容 35
在線測試 36
模塊3 JavaScript流程控制及應(yīng)用 37
學(xué)習(xí)領(lǐng)會 37
3.1 JavaScript的條件語句 37
3.2 JavaScript的循環(huán)語句 41
應(yīng)用實踐 46
【任務(wù)3-1】 在不同的節(jié)日顯示對應(yīng)的問候語 46
【任務(wù)3-2】 在不同時間段顯示不同的問候語 46
【任務(wù)3-3】 一周內(nèi)每天顯示不同的圖片 47
【任務(wù)3-4】 實現(xiàn)鼠標(biāo)指針滑過時動態(tài)改變顯示內(nèi)容及其外觀效果 48
在線測試 50
模塊4 JavaScript函數(shù)編程及應(yīng)用 51
學(xué)習(xí)領(lǐng)會 51
4.1 JavaScript的函數(shù) 51
4.2 JavaScript的計時方法 58
應(yīng)用實踐 61
【任務(wù)4-1】 實現(xiàn)動態(tài)改變樣式 61
【任務(wù)4-2】 實現(xiàn)動態(tài)改變網(wǎng)頁字體大小及關(guān)閉網(wǎng)頁窗口 62
在線測試 63
模塊5 JavaScript對象編程及應(yīng)用 64
學(xué)習(xí)領(lǐng)會 64
5.1 JavaScript的字符串對象及方法 64
5.2 JavaScript的數(shù)值對象及方法 68
5.3 JavaScript的日期對象及方法 71
5.4 JavaScript的數(shù)組對象及方法 74
5.5 JavaScript的自定義對象 79
5.6 ES6使用class構(gòu)造對象 83
5.7 JavaScript的this指針 85
5.8 JavaScript的正則表達式與應(yīng)用 86
5.9 JavaScript的RegExp對象及其方法 88
5.10 支持正則表達式的String對象的方法 91
應(yīng)用實踐 94
【任務(wù)5-1】 在特定日期范圍內(nèi)顯示打折促銷信息 94
【任務(wù)5-2】 實現(xiàn)在線考試倒計時 95
【任務(wù)5-3】 顯示常規(guī)格式的當(dāng)前日期與時間 96
在線測試 97
模塊6 JavaScript對象模型及應(yīng)用 98
學(xué)習(xí)領(lǐng)會 98
6.1 JavaScript的文檔對象及操作 98
6.2 JavaScript的瀏覽器對象及操作 103
6.3 位置與尺寸及JavaScript的設(shè)置方法 106
6.3.1 網(wǎng)頁元素的寬度和高度 106
6.3.2 網(wǎng)頁元素的位置 109
6.3.3 通過網(wǎng)頁元素的樣式屬性style獲取或設(shè)置元素的尺寸和位置 111
應(yīng)用實踐 111
【任務(wù)6-1】 實現(xiàn)郵箱自動導(dǎo)航 111
【任務(wù)6-2】 實現(xiàn)網(wǎng)頁內(nèi)容折疊與展開 112
在線測試 114
模塊7 JavaScript事件處理及應(yīng)用 115
學(xué)習(xí)領(lǐng)會 115
7.1 認(rèn)知JavaScript的事件 115
7.2 JavaScript的鼠標(biāo)事件和鍵盤事件 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代碼的調(diào)試 120
應(yīng)用實踐 120
【任務(wù)7-1】 實現(xiàn)網(wǎng)頁中的橫向?qū)Ш讲藛巍?20
【任務(wù)7-2】 實現(xiàn)網(wǎng)頁中圖片連續(xù)向上滾動 122
在線測試 123
下篇 Vue.js應(yīng)用程序設(shè)計
模塊8 Vue.js基礎(chǔ)知識及應(yīng)用 125
學(xué)習(xí)領(lǐng)會 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應(yīng)用入門 129
8.3.1 頁面模板插值 131
8.3.2 創(chuàng)建Vue.js實例 131
8.3.3 瀏覽網(wǎng)頁demo0802.html與查看數(shù)據(jù) 132
8.4 Vue.js實例的數(shù)據(jù)選項 132
8.5 Vue.js的DOM選項 138
8.6 Vue.js的實例屬性 139
8.7 Vue.js的實例方法 139
8.8 認(rèn)知MVVM模式 141
8.8.1 什么是MVVM 141
8.8.2 為什么要使用MVVM 142
8.8.3 MVVM的組成部分 142
8.8.4 MVVM模式的實現(xiàn)者 143
應(yīng)用實踐 143
【任務(wù)8-1】 編寫程序代碼計算金額 143
【任務(wù)8-2】 反向輸出字符串 145
【任務(wù)8-3】 編寫程序代碼實現(xiàn)圖片輪播 146
在線測試 147
模塊9 Vue.js網(wǎng)頁模板制作 148
學(xué)習(xí)領(lǐng)會 148
9.1 Vue.js的指令 148
9.1.1 指令概述 148
9.1.2 常用的Vue.js指令 149
9.2 模板內(nèi)容渲染 153
9.2.1 模板動態(tài)插值 153
9.2.2 使用v-html指令輸出HTML代碼 153
9.2.3 表達式插值 154
9.2.4 使用v-text指令實現(xiàn)模板插值的類似效果 155
9.2.5 靜態(tài)插值 155
9.2.6 使用v-bind指令動態(tài)地綁定一個或多個特性 156
9.3 模板邏輯控制 157
9.3.1 模板條件渲染 157
9.3.2 循環(huán)渲染 160
9.4 Vue.js數(shù)組更新 165
9.4.1 使用Vue.js的變異方法更新數(shù)組 165
9.4.2 使用Vue.js的非變異方法更新數(shù)組 165
9.4.3 數(shù)組的過濾或排序 166
9.5 Vue.js事件處理 166
9.5.1 事件監(jiān)聽 166
9.5.2 巧用事件修飾符 170
9.6 網(wǎng)頁模板制作 171
9.7 鼠標(biāo)修飾符與鍵值修飾符 173
9.7.1 鼠標(biāo)修飾符 173
9.7.2 鍵值修飾符 173
9.7.3 其他修飾符 174
應(yīng)用實踐 175
【任務(wù)9-1】 使用帶有v-for指令的標(biāo)簽來渲染多個元素 175
【任務(wù)9-2】 使用v-for指令循環(huán)顯示嵌套的對象 175
在線測試 176
模塊10 Vue.js數(shù)據(jù)綁定與樣式綁定 177
學(xué)習(xí)領(lǐng)會 177
10.1 Vue.js表單控件的數(shù)據(jù)綁定 177
10.1.1 輸入框的數(shù)據(jù)綁定 177
10.1.2 復(fù)選框的數(shù)據(jù)綁定 179
10.1.3 單選按鈕的數(shù)據(jù)綁定 179
10.1.4 選擇列表的數(shù)據(jù)綁定 180
10.2 綁定value 182
10.2.1 復(fù)選框綁定value 182
10.2.2 單選按鈕綁定value 183
10.2.3 選擇列表綁定value 183
10.3 在v-model指令中巧用修飾符 184
10.3.1 巧用.lazy修飾符 184
10.3.2 巧用.number修飾符 185
10.3.3 巧用.trim修飾符 185
10.4 綁定class屬性 185
10.4.1 以對象方式綁定class屬性 186
10.4.2 以數(shù)組方式綁定class屬性 188
10.4.3 以三元表達式方式綁定class屬性 189
10.4.4 以組件方式綁定class屬性 189
10.5 綁定style 190
10.5.1 使用v-bind:style直接設(shè)置樣式 190
10.5.2 使用v-bind:style綁定樣式對象 191
10.5.3 使用v-bind:style綁定樣式數(shù)組 191
10.5.4 使用三元表達式動態(tài)綁定style 191
10.5.5 使用v-bind:style綁定多重值 192
10.5.6 Vue.js對瀏覽器前綴的處理 192
10.6 定義與使用過濾器 192
10.6.1 過濾器的基本用法 192
10.6.2 串聯(lián)使用的過濾器 192
10.6.3 以帶參數(shù)的JavaScript函數(shù)使用過濾器 193
10.6.4 在v-bind表達式中使用過濾器 193
應(yīng)用實踐 193
【任務(wù)10-1】 編寫程序?qū)崿F(xiàn)英寸與毫米之間的單位換算 193
【任務(wù)10-2】 編寫程序代碼實現(xiàn)圖片自動播放與單擊播放功能 194
【任務(wù)10-3】 編寫程序代碼實現(xiàn)圖片自動縮放與圖片播放功能 195
在線測試 196
模塊11 Vue.js項目創(chuàng)建與運行 197
學(xué)習(xí)領(lǐng)會 197
11.1 創(chuàng)建基于webpack模板的Vue.js項目 197
11.2 使用vue create命令創(chuàng)建Vue 2.x項目 200
11.3 使用vue create命令創(chuàng)建Vue 3.x項目 202
11.4 認(rèn)知Vue.js項目的組成結(jié)構(gòu)與自定義配置 203
11.4.1 認(rèn)知基于Vue CLI 2.x的項目的組成結(jié)構(gòu) 203
11.4.2 認(rèn)知基于Vue CLI 2.x的package.json文件 203
11.4.3 基于Vue CLI 2.x的項目的自定義配置 204
11.4.4 認(rèn)知基于Vue CLI 3.x的項目的組成結(jié)構(gòu) 205
應(yīng)用實踐 207
【任務(wù)11】 基于Node.js+Vue.js+MySQL實現(xiàn)前后端分離的登錄與注冊功能 207
在線測試 211
模塊12 Vue.js組件構(gòu)建與應(yīng)用 212
學(xué)習(xí)領(lǐng)會 212
12.1 組件基礎(chǔ) 212
12.1.1 初識組件定義 212
12.1.2 組件的組織 215
12.1.3 嵌套限制 215
12.1.4 根元素 216
12.1.5 原生事件 216
12.2 組件注冊與使用 217
12.2.1 組件命名 217
12.2.2 全局注冊 218
12.2.3 局部注冊 219
12.2.4 使用組件 220
12.3 組件構(gòu)建 220
12.3.1 使用extend()方法構(gòu)建組件 220
12.3.2 使用標(biāo)簽構(gòu)建組件 221
12.3.3 使用