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