Vue 應用程序開發

劉海，廣東科學技術職業學院計算機工程技術學院教師，碩士研究生，中共黨員，副教授職稱，自2006年進入高職院校工作後，在教育崗位辛勤耕耘至今，一直從事實踐教學管理工作，擔任軟件技術專業、移動應用開發專業主任職務，從事教育工作14年以來一直站在實踐教學的第一線，“沒有不合格的學生，只有不合格的教師”是他課堂教學的座右銘，近10年年度教學評價均為優秀等級，獲“學生最滿意課程獎”，工作業績成績突出。近五年來指導學生參加計算機設計大賽，移動應用開發職業技能競賽、中國軟件杯等競賽中榮獲***三等獎1項，省級一等獎2項、二等獎4項；作為項目負責人認定為***應用技術協同創新中心1項，***骨干專業1項，***服務外包項目1項，省級創新項目1項。

目錄CONTENTS

第1篇基礎知識
第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的響應式理解6
1．4本章小結7
1．5本章習題7

第２章
第一個Vue．js應用8
2．1 Vue．js的使用8
2．2實例及選項10
2．2．1模板11
2．2．2數據12
2．2．3方法12
2．2．4計算屬性13
2．2．5觀察/監聽13
2 ．3數據綁定14
2．4計算屬性16
2．4．1計算屬性的用法16
2．4．2計算屬性傳參18
2．4．3計算屬性的getter和setter 19
2．4．4計算屬性與方法的區別20
2．5生命週期21
2．6案例——簡單的定時器23
2．7本章小結24
2．8本章習題25
第3章
Vue．js內置指令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數組更新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指令動態渲染選項48
3．3．3綁定值49
3．3．4修飾符49
3．4案例——簡易學生管理功能50
3．5本章小結55
3．6本章習題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元素創建組件60
4． 1．5組件嵌套62
4．1．6使用props傳遞數據63
4．2組件通信68
4．2．1父組件向子組件傳通信69
4．2．2子組件向父組件通信71
4．2．3非父子組件之間的通信73
4．2．4創建自定義組件75
4． 3內容分發77
4．3．1單個插槽77
4．3．2具名插槽78
4．3．3作用域插槽82
4．4動態組件83
4．5案例——使用組件實現購物車功能87
4．6本章小結89
4．7本章習題89

第5章
Vue．js過濾器和自定義指令91
5．1過濾器註冊和使用91
5．2動態參數94
5．3自定義指令的註冊和使用95
5．3．1自定義全局指令95
5．3．2自定義局部指令95
5．4鉤子函數96
5．5對象字面量98
5．6案例——過濾器變換輸出形式99
5．7本章小結100
5．8本章習題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本章小結112
6．7本章習題112
第2篇工程化項目開發
第7章
Vue腳手架114
7．1快速構建項目114
7．1．1 Vue腳手架的安裝114
7．1．2初始化項目115
7．1．3項目結構117
7．1．4初識單文件組件118
7．1．5單文件組件嵌套119
7．1．6構建一個簡單的腳手架項目120
7．1．7組件通信123
7．2前端路由127
7．2．1路由的安裝和使用128
7．2．2跳轉方式131
7．2．3編程式導航134
7．2．4路由傳參及獲取參數135
7．2 ．5子路由136
7．2．6路由攔截140
7．3服務器端數據訪問Axios 145
7．3．1使用CDN安裝Axios 145
7．3．2使用NPM安裝Axios 147
7．3．3請求本地JSON數據149
7．3．4跨域請求數據152
7．3．5 GET請求155
7．3．6 POST請求161
7．4 Webpack基礎163
7．4．1 Webpack簡介163
7．4．2 Vue-CLI中Webpack的配置基礎164
7．4．3 Webpack常用的Loaders和插件165
7．5案例——課程和教師列表管理頁面167
7．6本章小結177
7．7本章習題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的複雜使用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本章小結193
8．7本章習題193

第9章
跨平台開發Weex 194
9．1 Weex簡介及安裝194
9．2創建一個Weex項目195
9．3 Weex的生命週期198
9 ．4 Vue在Weex中的差異性198
9．5 Weex基本概念199
9．6 Weex內置組件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內置模塊209
9．7．1 dom模塊209
9．7．2 stream模塊210
9．7．3 modal模塊210
9．8本章小結215
9．9本章習題216
第3篇工程化項目實戰

第10章
實戰項目開發218
10．1項目介紹218
10．2項目開發前期準備219
10．2．1初始化項目目錄219
10．2．2安裝依賴包和插件220
10．2．3配置項目路由220
10．3項目功能設計與開發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留言詳情頁和發布留言頁231
10．3．8註冊登錄界面232
10．3．9個人中心頁233