Vue.js基礎與應用開發實戰（微課版）

Vue.js是一套用於構建用戶界面的漸進式框架，採用“模型—視圖—視圖模型”的模式，支持數據驅動和組件化開發。

本書在模塊化、層次化、活頁式、在線式等方面做了大量的探索與實踐，構建了獨特的模塊化結構，合理選取並有序組織內容，兼顧知識學習的靈活性與教材使用的實用性。本書構建了Vue.js應用開發的理論知識學習與編程技能訓練的層次化結構，由易到難、由淺入深，分為10個單元（包括9個教學單元和1個綜合應用實戰單元）和6個附錄進行講解。除單元10外，每個教學單元又劃分為4個學習階段：學習領會、拓展提升、應用實戰、在線測試。其中，理論知識學習分為3個層次，即入門知識、必修知識、拓展知識；編程技能訓練也分為3個層次，即驗證程序編寫、實例程序編寫、綜合應用實戰。本書將紙質固定方式與電子活頁方式相結合，構建了模塊化的新形態教材的活頁式結構，充分發揮網絡資源優勢，構建了網絡資源共享新模式。

本書可以作為普通高等院校、高等或中等職業院校和高等專科院校相關專業的Vue.js程序設計課程的教材，也可以作為Vue.js程序設計的培訓教材及自學參考書。

陈承欢，湖南铁道职业技术学院教授，高级工程师，软件设计师，湖南省省级专业带头人，湖南省青年骨干教师，武汉大学软件工程专业。2008年，曾赴澳大利亚坎培门理工学院培训交流，2015年，曾赴加拿大圣力嘉学院培训交流，2019年，曾赴英国、德国学习交流。主持开发职业教育特色教材50多本，其中国家级“十一五”规划教材4本，国家级“十二五”规划教材10本，国家级“十三五”规划教材7本。国家精品课程与国家精品共享课程配套教材1本，国家职业教育资源库配套教材3本。主持《网页设计与制作》国家精品课程，主持《网页设计与制作》国家精品共享课程，主持《计算机维护与维修》、《实用工具软件应用》、《网页样式设计》3门国家资源库课程。国家级教学成果奖二等奖1项，湖南省职业教育教学成果奖特等奖1项、三等奖1项，湖南省教育教学改革发展优秀成果奖参等奖1项。

單元1

Vue.js起步　1

學習領會　1

1.1　Vue概述　1

【實例1-1】借助JavaScript訪問HTML元素　4

1.2　下載、安裝與引入Vue　5

1.2.1　下載與安裝Vue　5

1.2.2　引入Vue　6

1.3　Vue應用入門　6

【實例1-2】在網頁中輸出Vue變量的值　6

1.3.1　模板插值　8

1.3.2　創建Vue實例　8

1.3.3　瀏覽網頁0102.html與查看數據　9

1.4　v2.x的API　9

1.4.1　Vue的全局配置　9

【實例1-3】使用Vue的全局配置項　9

1.4.2　Vue的全局API方法　10

【實例1-4】應用Vue組件構造器Vue.extend　10

1.4.3　Vue實例對象的數據選項　14

【實例1-5】通過vm.$data訪問Vue實例的數據對象　15

【實例1-6】應用Vue的計算屬性computed　18

【實例1-7】比較computed與methods的用法　19

【實例1-8】應用Vue的watch()方法　20

1.4.4　Vue的DOM選項　21

1.4.5　Vue的實例屬性　22

1.4.6　Vue的實例方法　23

【實例1-9】應用Vue的$watch()方法　23

1.4.7　Vue的實例事件　25

【實例1-10】應用Vue的實例事件改變數量　26

拓展提升　26

1.5　Vue實例的生命周期　26

1.5.1　圖解Vue實例的生命周期　26

1.5.2　認知Vue實例生命周期與鉤子函數　26

【實例1-11】應用Vue實例的鉤子函數　29

1.6　認知MVVM模式　30

1.6.1　什麽是MVVM　30

1.6.2　為什麽要使用MVVM　30

1.6.3　MVVM的組成部分　30

1.6.4　MVVM模式的實現者　31

應用實戰　32

【任務1-1】編寫程序代碼計算金額　32

【任務1-2】反向輸出字符串　33

【任務1-3】編寫程序代碼實現圖片輪播　34

在線測試　35

單元2

Vue網頁模板製作　36

學習領會　36

2.1　Vue的指令　36

2.1.1　指令概述　36

2.1.2　常用的Vue指令　37

2.1.3　自定義指令　43

【實例2-1】註冊一個使元素自動獲取焦點的自定義指令　44

2.1.4　自定義指令的鉤子函數　44

2.2　模板內容渲染　46

2.2.1　模板動態插值　46

【實例2-2】使用兩對大括號進行模板動態插值　46

2.2.2　使用v-html指令輸出HTML代碼　47

【實例2-3】使用v-html指令輸出指定內容　47

2.2.3　表達式插值　47

【實例2-4】使用兩對大括號進行表達式插值　48

2.2.4　使用v-text指令實現模板插值的類似效果　48

【實例2-5】使用v-text指令實現模板插值的類似效果　49

2.2.5　靜態插值　49

【實例2-6】使用v-once指令實現靜態插值　49

2.2.6　使用v-bind指令動態綁定一個或多個特性　50

【實例2-7】使用v-bind指令動態綁定多個特性　50

2.3　模板邏輯控制　51

2.3.1　模板條件渲染　51

【實例2-8】使用v-if指令控制元素的顯示或隱藏　51

【實例2-9】使用v-if指令結合