本書較為全面地介紹了Vue.js 技術(shù)的基礎(chǔ)知識與實戰(zhàn)項目開發(fā),每個章節(jié)都以案例教學(xué)為引導(dǎo),以培養(yǎng)讀者能力為目的,充分體現(xiàn)了“做中學(xué)”“學(xué)中做”的思想,以方便更多的初學(xué)者輕松地掌握本書的內(nèi)容。本書分為3 篇,第1 篇為基礎(chǔ)知識,包括第1~6 章;第2 篇為工程化項目開發(fā),包括第7~9 章;第3 篇為工程化項目實戰(zhàn),包括第10 章。各章具體內(nèi)容為Vue.js 入門、第一個Vue.js 應(yīng)用、Vue.js 內(nèi)置指令、Vue.js組件、Vue.js 過濾器和自定義指令、Vue.js 過渡和動畫、Vue 腳手架、Vuex、跨平臺開發(fā)Weex 和實訓(xùn)項目開發(fā)。
本書內(nèi)容組織合理、通俗易懂,突出實用性,適合作為計算機相關(guān)專業(yè)學(xué)生的教材,也適合計算機培訓(xùn)班教學(xué)使用,還可作為計算機愛好者的自學(xué)參考用書。
1.案例式教學(xué)
本書中的案例來自于實際項目,體現(xiàn)了“教、學(xué)、做一體化”的思想,方便讀
者快速上手,能夠培養(yǎng)讀者實際操作的動手能力。
2.內(nèi)容組織合理
本書按照由淺入深的順序,分為基礎(chǔ)知識、工程化項目開發(fā)和工程項目實戰(zhàn)3
篇;A(chǔ)知識篇介紹了項目開發(fā)所需要的Vue.js 基礎(chǔ)知識;工程化項目開發(fā)篇講解
了Vue 腳手架、Vuex 和Weex 的相關(guān)內(nèi)容;工程化項目實戰(zhàn)篇通過實戰(zhàn)項目帶領(lǐng)
讀者整合前面章節(jié)所學(xué)習(xí)的內(nèi)容。
3.教學(xué)資源豐富
本書配備了豐富的立體化教學(xué)資源,包括PPT、在線視頻、課后習(xí)題答案、教學(xué)大綱、源代碼等。
劉海,廣東科學(xué)技術(shù)職業(yè)學(xué)院計算機工程技術(shù)學(xué)院教師,碩士研究生,中共黨員,副教授職稱,自2006年進入高職院校工作后,在教育崗位辛勤耕耘至今,一直從事實踐教學(xué)管理工作,擔(dān)任軟件技術(shù)專業(yè)、移動應(yīng)用開發(fā)專業(yè)主任職務(wù),從事教育工作14年以來一直站在實踐教學(xué)的第一線,“沒有不合格的學(xué)生,只有不合格的教師”是他課堂教學(xué)的座右銘,近10年年度教學(xué)評價均為優(yōu)秀等級,獲 “學(xué)生最滿意課程獎”,工作業(yè)績成績突出。 近五年來指導(dǎo)學(xué)生參加計算機設(shè)計大賽,移動應(yīng)用開發(fā)職業(yè)技能競賽、中國軟件杯等競賽中榮獲國家級三等獎1項,省級一等獎2項、二等獎4項;作為項目負責(zé)人認定為國家級應(yīng)用技術(shù)協(xié)同創(chuàng)新中心1項,國家級骨干專業(yè)1項,國家級服務(wù)外包項目1項,省級創(chuàng)新項目1項。
目錄 CONTENTS
第 1篇 基礎(chǔ)知識
第 1章
Vue.js入門 2
1.1 初識Vue.js 2
1.1.1 什么是Vue.js 2
1.1.2 為什么要使用Vue.js 2
1.1.3 MVVM模式 4
1.2 使用Vue.js理解MVVM模式 5
1.3 Vue.js的響應(yīng)式理解 6
1.4 本章小結(jié) 7
1.5 本章習(xí)題 7
第2章
第 一個Vue.js應(yīng)用 8
2.1 Vue.js的使用 8
2.2 實例及選項 10
2.2.1 模板 11
2.2.2 數(shù)據(jù) 12
2.2.3 方法 12
2.2.4 計算屬性 13
2.2.5 觀察/監(jiān)聽 13
2.3 數(shù)據(jù)綁定 14
2.4 計算屬性 16
2.4.1 計算屬性的用法 16
2.4.2 計算屬性傳參 18
2.4.3 計算屬性的getter和setter 19
2.4.4 計算屬性與方法的區(qū)別 20
2.5 生命周期 21
2.6 案例——簡單的定時器 23
2.7 本章小結(jié) 24
2.8 本章習(xí)題 25
第3章
Vue.js內(nèi)置指令 26
3.1 本指令 26
3.1.1 v-text和v-html指令 26
3.1.2 v-cloak指令 27
3.1.3 v-once指令 27
3.1.4 v-if、v-else和v-show指令 28
3.1.5 v-on指令 29
3.1.6 v-for指令 32
3.1.7 數(shù)組更新 36
3.2 v-bind指令 41
3.2.1 v-bind指令的基本用法 41
3.2.2 v-bind綁定樣式 42
3.3 v-model指令 46
3.3.1 v-model指令的基本用法 47
3.3.2 使用v-for指令動態(tài)渲染選項 48
3.3.3 綁定值 49
3.3.4 修飾符 49
3.4 案例——簡易學(xué)生管理功能 50
3.5 本章小結(jié) 55
3.6 本章習(xí)題 55
第4章
Vue.js組件 57
4.1 組件的基本使用 57
4.1.1 全局組件 57
4.1.2 局部組件 58
4.1.3 組件中的data 59
4.1.4 使用template元素創(chuàng)建組件 60
4.1.5 組件嵌套 62
4.1.6 使用props傳遞數(shù)據(jù) 63
4.2 組件通信 68
4.2.1 父組件向子組件傳通信 69
4.2.2 子組件向父組件通信 71
4.2.3 非父子組件之間的通信 73
4.2.4 創(chuàng)建自定義組件 75
4.3 內(nèi)容分發(fā) 77
4.3.1 單個插槽 77
4.3.2 具名插槽 78
4.3.3 作用域插槽 82
4.4 動態(tài)組件 83
4.5 案例——使用組件實現(xiàn)購物車功能 87
4.6 本章小結(jié) 89
4.7 本章習(xí)題 89
第5章
Vue.js過濾器和自定義指令 91
5.1 過濾器注冊和使用 91
5.2 動態(tài)參數(shù) 94
5.3 自定義指令的注冊和使用 95
5.3.1 自定義全局指令 95
5.3.2 自定義局部指令 95
5.4 鉤子函數(shù) 96
5.5 對象字面量 98
5.6 案例——過濾器變換輸出形式 99
5.7 本章小結(jié) 100
5.8 本章習(xí)題 100
第6章
Vue.js過渡和動畫 101
6.1 CSS過渡 101
6.2 CSS動畫 105
6.3 JavaScript過渡 106
6.4 自定義過渡類名 108
6.5 案例——新增列表項的動畫效果 110
6.6 本章小結(jié) 112
6.7 本章習(xí)題 112
第 2篇 工程化項目開發(fā)
第7章
Vue腳手架 114
7.1 快速構(gòu)建項目 114
7.1.1 Vue腳手架的安裝 114
7.1.2 初始化項目 115
7.1.3 項目結(jié)構(gòu) 117
7.1.4 初識單文件組件 118
7.1.5 單文件組件嵌套 119
7.1.6 構(gòu)建一個簡單的腳手架項目 120
7.1.7 組件通信 123
7.2 前端路由 127
7.2.1 路由的安裝和使用 128
7.2.2 跳轉(zhuǎn)方式 131
7.2.3 編程式導(dǎo)航 134
7.2.4 路由傳參及獲取參數(shù) 135
7.2.5 子路由 136
7.2.6 路由攔截 140
7.3 服務(wù)器端數(shù)據(jù)訪問Axios 145
7.3.1 使用CDN安裝Axios 145
7.3.2 使用NPM安裝Axios 147
7.3.3 請求本地JSON數(shù)據(jù) 149
7.3.4 跨域請求數(shù)據(jù) 152
7.3.5 GET請求 155
7.3.6 POST請求 161
7.4 Webpack基礎(chǔ) 163
7.4.1 Webpack簡介 163
7.4.2 Vue-CLI中Webpack的配置基礎(chǔ) 164
7.4.3 Webpack常用的Loaders和插件 165
7.5 案例——課程和教師列表管理頁面 167
7.6 本章小結(jié) 177
7.7 本章習(xí)題 177
第8章
Vuex 179
8.1 Vuex概述 179
8.2 Vuex的安裝 180
8.3 Vuex的基本使用 180
8.3.1 Store概述 180
8.3.2 Vuex的使用 181
8.4 Vuex的復(fù)雜使用 182
8.4.1 mutations 182
8.4.2 actions 184
8.4.3 getters 187
8.4.4 mapState、mapMutations、mapActions和mapGetters 187
8.4.5 模塊化 188
8.5 案例——虛擬用戶管理功能 188
8.6 本章小結(jié) 193
8.7 本章習(xí)題 193
第9章
跨平臺開發(fā)Weex 194
9.1 Weex簡介及安裝 194
9.2 創(chuàng)建一個Weex項目 195
9.3 Weex的生命周期 198
9.4 Vue在Weex中的差異性 198
9.5 Weex基本概念 199
9.6 Weex內(nèi)置組件 201
9.6.1
組件 202
9.6.2 組件 202
9.6.3 組件 203
9.6.4 組件 205
9.6.5 組件 206
9.6.6 組件 207
9.7 Weex內(nèi)置模塊 209
9.7.1 dom模塊 209
9.7.2 stream模塊 210
9.7.3 modal模塊 210
9.8 本章小結(jié) 215
9.9 本章習(xí)題 216
第3篇 工程化項目實戰(zhàn)
第 10章
實戰(zhàn)項目開發(fā) 218
10.1 項目介紹 218
10.2 項目開發(fā)前期準備 219
10.2.1 初始化項目目錄 219
10.2.2 安裝依賴包和插件 220
10.2.3 配置項目路由 220
10.3 項目功能設(shè)計與開發(fā) 221
10.3.1 首頁 221
10.3.2 首頁下拉刷新和上拉加載 223
10.3.3 首頁搜索 225
10.3.4 課程列表頁 226
10.3.5 課程詳情頁 228
10.3.6 留言列表頁 229
10.3.7 留言詳情頁和發(fā)布留言頁 231
10.3.8 注冊登錄界面 232
10.3.9 個人中心頁 233