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