隨著互聯(lián)網(wǎng) 的飛速發(fā)展，Web前端開(kāi)發(fā)技術(shù)也在更新迭代，從最初的HTML靜態(tài)頁(yè)面、動(dòng)態(tài)網(wǎng)頁(yè)發(fā)展到富媒體開(kāi)發(fā)，又從MVC模式過(guò)渡到MVVM模式，從前后端混合開(kāi)發(fā)到前后端分離開(kāi)發(fā)，各類新技術(shù)層出不窮。
Web前端開(kāi)發(fā)僅采用HTML、CSS、JavaScript三大技術(shù)開(kāi)發(fā)項(xiàng)目已經(jīng)無(wú)法滿足用戶對(duì)頁(yè)面的動(dòng)態(tài)、實(shí)時(shí)、交互功能的需要，迫切需要采用新框架技術(shù)改善用戶的訪問(wèn)體驗(yàn)，實(shí)現(xiàn)數(shù)據(jù)、信息快速呈現(xiàn)。目前出現(xiàn)的許多主流前端開(kāi)發(fā)框架可以大大地提升Web前端項(xiàng)目開(kāi)發(fā)速度和質(zhì)量，降低開(kāi)發(fā)成本，滿足快速交付的需要。這些主流前端開(kāi)發(fā)框架主要包括React、Angular和Vue.js。Vue.js 是前后端分離開(kāi)發(fā)的主流技術(shù)之一，它是一套構(gòu)建用戶界面的漸進(jìn)式框架，以數(shù)據(jù)驅(qū)動(dòng)視圖和組件化的思想構(gòu)建，采用自底向上、增量開(kāi)發(fā)的設(shè)計(jì)，其核心庫(kù)只關(guān)注視圖層。與React、Angular相比，Vue.js在可讀性、可維護(hù)性和趣味性之間做到了很好的平衡，非常適合中小型項(xiàng)目的快速開(kāi)發(fā)。隨著Vue.js 3.x的推出，用戶已經(jīng)可以使用其開(kāi)發(fā)大型項(xiàng)目。
1. 主要內(nèi)容
本書(shū)共13章。第1章為Vue.js發(fā)展概述； 第2章為Vue.js基礎(chǔ)； 第3章為Vue.js指令； 第4章為Vue 3新特性應(yīng)用； 第5章為Vue.js組件開(kāi)發(fā)； 第6章為Vue.js過(guò)渡與動(dòng)畫(huà)； 第7章為Vue開(kāi)發(fā)環(huán)境與SFC新特性； 第8章為路由Vue Router； 第9章為狀態(tài)管理Vuex； 第10章為Vue 3 UI框架Element Plus； 第11章為Vue 3.x構(gòu)建工具Vite； 第12章為網(wǎng)絡(luò)請(qǐng)求庫(kù)Axios與JSON Server； 第13章為Vue 3 Element Plus實(shí)戰(zhàn)簡(jiǎn)易圖書(shū)管理系統(tǒng)。
2. 編寫特色
有機(jī)融入周邊生態(tài)系統(tǒng)，實(shí)用性強(qiáng)。及時(shí)將新發(fā)布的Vue.js 3.2新特性和新應(yīng)用寫入本書(shū)，同時(shí)將下一代前端開(kāi)發(fā)與構(gòu)建工具Vite、Axios、基于Vue 3 UI框架的Element Plus一起整合進(jìn)來(lái)。融入Vue 3集成的Vuex 4和Vue Router 4，能夠滿足快捷、高效的單頁(yè)應(yīng)用開(kāi)發(fā)的需要。
精心遴選工程實(shí)戰(zhàn)案例，通用性強(qiáng)。從不同行業(yè)領(lǐng)域遴選真實(shí)的應(yīng)用場(chǎng)景，依托知識(shí)點(diǎn)和技能點(diǎn)要求設(shè)計(jì)案例。案例由淺入深，循序漸進(jìn)，易學(xué)通用。
合理規(guī)劃知識(shí)框架結(jié)構(gòu)，可讀性強(qiáng)。每章規(guī)劃了本章學(xué)習(xí)目標(biāo)、教學(xué)內(nèi)容、本章小結(jié)、練習(xí)與項(xiàng)目實(shí)戰(zhàn)。以簡(jiǎn)易HTML文件構(gòu)建為基礎(chǔ)，逐步向工程化工具構(gòu)建項(xiàng)目過(guò)渡；以Vue 3.0中使用Options API開(kāi)發(fā)項(xiàng)目為基礎(chǔ)，逐步向Vue 3.2中使用Composition API開(kāi)發(fā)項(xiàng)目過(guò)渡。這樣的學(xué)習(xí)線路能夠適應(yīng)大多數(shù)讀者的需要，可讀性強(qiáng)，容易掌握并靈活運(yùn)用。
3. 教學(xué)資源
為了使讀者能夠更好地掌握本書(shū)內(nèi)容，筆者錄制了項(xiàng)目實(shí)戰(zhàn)教學(xué)視頻，總時(shí)長(zhǎng)800分鐘，幫助讀者學(xué)習(xí)和消化所學(xué)知識(shí)，提高實(shí)踐技能。本書(shū)還提供了大量的配套資源，包括教學(xué)大綱、教學(xué)課件、電子教案、程序源碼、在線題庫(kù)、習(xí)題答案和教學(xué)進(jìn)度表。
資源下載提示
課件等資源： 掃描封底的課件下載二維碼，在公眾號(hào)書(shū)圈下載。
素材（源碼）等資源： 掃描目錄上方的二維碼下載。
在線作業(yè)： 掃描封底的作業(yè)系統(tǒng)二維碼，登錄網(wǎng)站在線做題及查看答案。
微課視頻： 掃描封底的文泉云盤防盜碼，再掃描書(shū)中相應(yīng)章節(jié)的視頻講解二維碼，可以在線學(xué)習(xí)。
本書(shū)的出版得到清華大學(xué)出版社相關(guān)人員的大力支持與合作，在此謹(jǐn)表示衷心感謝。
由于Web前端框架技術(shù)發(fā)展迅速，新特性和功能不斷增加，加之時(shí)間緊、任務(wù)重、能力有限，書(shū)中疏漏在所難免，懇請(qǐng)各位技術(shù)專家和讀者朋友批評(píng)指正。
儲(chǔ)久良2024年1月于蘇州虎丘
掃一掃
源碼下載
第1章Vue.js發(fā)展概述
1.1Vue.js簡(jiǎn)介
1.1.1Vue.js發(fā)展簡(jiǎn)史
1.1.2Vue 3新特性簡(jiǎn)介
1.2Vue.js生產(chǎn)環(huán)境配置
1.2.1Vue.js引入方法
1.2.2安裝Vue devtools
1.2.3Node.js環(huán)境配置
1.2.4創(chuàng)建第1個(gè)Vue單頁(yè)
程序
1.3Vue.js開(kāi)發(fā)工具
1.3.1Visual Studio Code
1.3.2HBuilderX
1.4ECMAScript 6.0基礎(chǔ)
1.4.1let和const
1.4.2解構(gòu)賦值
1.4.3箭頭函數(shù)
1.4.4展開(kāi)運(yùn)算符
1.4.5模板字符串
本章小結(jié)
練習(xí)1
項(xiàng)目實(shí)戰(zhàn)1
第2章Vue.js基礎(chǔ)
2.1MVVM模式
2.1.1MVVM模式簡(jiǎn)介
2.1.2MVVM模式的前端框架
發(fā)展趨勢(shì)
2.1.3MVVM模式的應(yīng)用
2.2數(shù)據(jù)綁定與插值
2.2.1文本綁定
2.2.2HTML代碼綁定
2.2.3屬性綁定
2.2.4JavaScript表達(dá)式
綁定
2.3計(jì)算屬性與方法
2.3.1計(jì)算屬性基礎(chǔ)應(yīng)用
2.3.2計(jì)算屬性的setter和
getter
2.4偵聽(tīng)屬性watch
2.4.1偵聽(tīng)屬性基本用法
2.4.2偵聽(tīng)屬性高級(jí)用法
2.5生命周期鉤子函數(shù)
2.5.1生命周期鉤子函數(shù)
作用
2.5.2生命周期鉤子函數(shù)
應(yīng)用
2.6Vue中數(shù)組變動(dòng)更新
2.6.1變異方法
2.6.2非變異方法
2.7控制臺(tái)console對(duì)象
2.7.1顯示信息的命令
2.7.2占位符
2.7.3分組顯示
2.7.4查看對(duì)象的信息
本章小結(jié)
練習(xí)2
項(xiàng)目實(shí)戰(zhàn)2
第3章Vue.js指令
3.1條件渲染
3.1.1vif/velse/velseif
指令
3.1.2Vue 3.x中key值的
應(yīng)用
3.1.3vshow指令
3.2列表渲染(vfor指令)
3.3類與樣式綁定(vbind
指令)
3.4事件處理(von指令)
3.5表單輸入綁定(vmodel
指令)
3.6vhtml與vtext指令
3.7vonce、vcloak、vpre指令
3.8Vue.js自定義指令
3.8.1自定義指令注冊(cè)
3.8.2對(duì)象字面量
本章小結(jié)
練習(xí)3
項(xiàng)目實(shí)戰(zhàn)3
第4章Vue 3新特性應(yīng)用
4.1響應(yīng)式基礎(chǔ)
4.1.1組件選項(xiàng)setup()
4.1.2ref()、reactive()、toRefs()
和toRef()函數(shù)
4.1.3watch、watchEffect和
computed
4.2Vue 3生命周期
4.2.1Vue 3生命周期鉤子函數(shù)
(組合式API)
4.2.2生命周期鉤子函數(shù)
應(yīng)用
本章小結(jié)
練習(xí)4
項(xiàng)目實(shí)戰(zhàn)4
第5章Vue.js組件開(kāi)發(fā)
5.1組件基礎(chǔ)
5.1.1組件命名
5.1.2組件注冊(cè)
5.2組件間通信
5.2.1父組件向子組件傳值
5.2.2子組件向父組件傳值
5.2.3父鏈與子組件索引
5.3插槽
5.3.1匿名插槽
5.3.2具名插槽
5.3.3作用域插槽
5.3.4動(dòng)態(tài)插槽名
本章小結(jié)
練習(xí)5
項(xiàng)目實(shí)戰(zhàn)5
第6章Vue.js過(guò)渡與動(dòng)畫(huà)
6.1單元素/組件的過(guò)渡
6.1.1過(guò)渡的類名
6.1.2CSS過(guò)渡
6.1.3CSS動(dòng)畫(huà)
6.1.4自定義過(guò)渡的類名
6.1.5同時(shí)使用過(guò)渡和動(dòng)畫(huà)
6.1.6顯性的過(guò)渡持續(xù)時(shí)間
6.1.7JavaScript鉤子
6.1.8Velocity動(dòng)畫(huà)庫(kù)簡(jiǎn)介
6.2初始渲染的過(guò)渡
6.3多個(gè)元素的過(guò)渡
6.4多個(gè)組件的過(guò)渡
6.5列表過(guò)渡
6.5.1列表的進(jìn)入/離開(kāi)
過(guò)渡
6.5.2列表的排序過(guò)渡
6.5.3列表的交錯(cuò)過(guò)渡
本章小結(jié)
練習(xí)6
項(xiàng)目實(shí)戰(zhàn)6
第7章Vue開(kāi)發(fā)環(huán)境與SFC新
特性
7.1Vue開(kāi)發(fā)環(huán)境簡(jiǎn)介
7.1.1Node.js簡(jiǎn)介
7.1.2Node.js部署
7.2Node包管理器npm
7.2.1npm簡(jiǎn)介
7.2.2npm常用命令
7.3webpack打包工具
7.3.1webpack簡(jiǎn)介
7.3.2webpack配置與應(yīng)用
7.3.3webpack配置加載器
7.3.4webpack配置開(kāi)發(fā)服
務(wù)器
7.4Vue CLI
7.4.1Vue CLI安裝
7.4.2Vue CLI創(chuàng)建Vue
項(xiàng)目
7.5單文件組件
7.5.1單文件組件的結(jié)構(gòu)
7.5.2單文件組件的新特點(diǎn)
7.6組合式API： 依賴注入
7.7組合式API： 模板引用
7.7.1獲取節(jié)點(diǎn)
7.7.2在組件上使用ref
7.8組合式函數(shù)
7.9模板refs
本章小結(jié)
練習(xí)7
項(xiàng)目實(shí)戰(zhàn)7
第8章路由Vue Router
8.1Vue Router概述
8.1.1Vue Router安裝與
使用
8.1.2Vue Router基礎(chǔ)
應(yīng)用
8.2Vue Router高級(jí)應(yīng)用
8.2.1動(dòng)態(tài)路由匹配
8.2.2嵌套路由
8.2.3編程式導(dǎo)航
8.2.4命名路由
8.2.5命名視圖
8.2.6重定向和別名
8.2.7HTML 5 History
模式
8.2.8路由組件傳參
本章小結(jié)
練習(xí)8
項(xiàng)目實(shí)戰(zhàn)8
第9章?tīng)顟B(tài)管理Vuex
9.1Vuex概述
9.1.1Vuex定義
9.1.2簡(jiǎn)單狀態(tài)管理store
模式
9.2Vuex基本使用
9.3Vuex核心概念
9.3.1一個(gè)完整的store
結(jié)構(gòu)
9.3.2最簡(jiǎn)單的store
9.3.3Vuex中的state
9.3.4Vuex中的getter
9.3.5Vuex中的mutation
9.3.6Vuex中的action
9.3.7Vuex中的module
9.4Vuex多模塊實(shí)戰(zhàn)案例
本章小結(jié)
練習(xí)9
項(xiàng)目實(shí)戰(zhàn)9
第10章Vue 3 UI框架Element
Plus
10.1Element Plus概述
10.1.1Element Plus安裝與
配置
10.1.2Element Plus
導(dǎo)航
10.1.3Element Plus快速
開(kāi)始
10.1.4Element Plus全局
配置
10.2Element Plus組件
10.3Element Plus組件
應(yīng)用
10.3.1Basic基礎(chǔ)組件
Container布局
容器
10.3.2Basic基礎(chǔ)組件
Layout 布局
10.3.3配置組件Config
Provider全局配置
10.3.4Form表單組件
10.3.5Data數(shù)據(jù)展示組件
Avatar、Badge、Calendar、
Card、Carousel
10.3.6Data數(shù)據(jù)展示組件
Table表格
10.3.7Data數(shù)據(jù)展示組件
Virtualized Table
虛擬化表格
10.3.8Navigation導(dǎo)航
組件
本章小結(jié)
練習(xí)10
項(xiàng)目實(shí)戰(zhàn)10
第11章Vue 3.x構(gòu)建工具Vite
11.1Vite創(chuàng)建項(xiàng)目
11.1.1Vite簡(jiǎn)介
11.1.2創(chuàng)建第1個(gè) Vite
項(xiàng)目
11.2Vite創(chuàng)建惠民早點(diǎn)
項(xiàng)目
11.2.1創(chuàng)建默認(rèn)項(xiàng)目
11.2.2更新完善項(xiàng)目
本章小結(jié)
練習(xí)11
項(xiàng)目實(shí)戰(zhàn)11
第12章網(wǎng)絡(luò)請(qǐng)求庫(kù)Axios與JSON
Server
12.1Axios概述
12.1.1Axios簡(jiǎn)介
12.1.2Axios特性
12.1.3Axios應(yīng)用
12.2Axios舉例
12.2.1執(zhí)行g(shù)et請(qǐng)求
12.2.2執(zhí)行post請(qǐng)求
12.2.3一次執(zhí)行多個(gè)
請(qǐng)求
12.3JSON Server與
Postman
12.3.1JSON Server
簡(jiǎn)介
12.3.2JSON Server
應(yīng)用
12.3.3接口測(cè)試工具
Postman
12.4跨域請(qǐng)求數(shù)據(jù)
12.4.1Vue CLI創(chuàng)建項(xiàng)目跨域
配置
12.4.2Vite創(chuàng)建項(xiàng)目跨域
配置
12.5Axios API
12.5.1通過(guò)配置(config)發(fā)送
請(qǐng)求
12.5.2請(qǐng)求方式的別名
12.5.3請(qǐng)求配置
12.5.4Axios實(shí)例
12.6Axios攔截器
12.7Axios應(yīng)用實(shí)戰(zhàn)
12.7.1請(qǐng)求本地JSON
數(shù)據(jù)
12.7.2請(qǐng)求遠(yuǎn)程天氣預(yù)報(bào)
數(shù)據(jù)
本章小結(jié)
練習(xí)12
項(xiàng)目實(shí)戰(zhàn)12
第13章Vue 3 Element Plus實(shí)戰(zhàn)
簡(jiǎn)易圖書(shū)管理系統(tǒng)
13.1簡(jiǎn)易圖書(shū)管理系統(tǒng)需求
13.1.1簡(jiǎn)易圖書(shū)管理系統(tǒng)
功能
13.1.2簡(jiǎn)易圖書(shū)管理系統(tǒng)
實(shí)現(xiàn)技術(shù)
13.2簡(jiǎn)易圖書(shū)管理系統(tǒng)實(shí)現(xiàn)
13.2.1項(xiàng)目創(chuàng)建
13.2.2定義main.js
文件
13.2.3修改App.vue
組件
13.2.4定義BookView.vue
組件
13.2.5定義Header.vue
組件
13.2.6定義Footer.vue
組件
13.2.7定義router/index.js
文件
13.2.8定義store/index.js
文件
13.2.9定義HomeView.vue
組件
13.2.10定義SettingView.vue
組件
13.2.11定義AboutView.vue
組件
13.2.12定義BookAdd.vue
組件
13.2.13定義BookModify.vue
組件
13.2.14定義BookQuery.vue
組件
本章小結(jié)
練習(xí)13
項(xiàng)目實(shí)戰(zhàn)13
參考文獻(xiàn)
書(shū)單推薦
