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指令結合