從零開始學(xué)Vue.js

第1篇　基礎(chǔ)知識篇
第1章　Vue.js簡介 2 視頻講解：8節(jié)，28分鐘
1.1 Vue.js概述 3
1.1.1 什么是Vue.js 3
1.1.2 Vue.js的特性 3
1.2 Vue.js的安裝 4
1.2.1 直接下載并引入 4
1.2.2 使用CDN方法 5
1.2.3 使用NPM方法 5
1.3 Vue.js的開發(fā)模式 5
1.4 開發(fā)工具WebStorm簡介 6
1.4.1 WebStorm的下載 6
1.4.2 WebStorm的安裝 7
1.5 創(chuàng)建第一個(gè)Vue實(shí)例 9
[實(shí)例1.1] 輸出“Hello Vue.js” 9
本章知識思維導(dǎo)圖 12

第2章 基礎(chǔ)特性 13 視頻講解：7節(jié)，61分鐘
2.1 Vue實(shí)例及選項(xiàng) 14
2.1.1 掛載元素 14
2.1.2 數(shù)據(jù) 14
2.1.3 方法 15
2.1.4 生命周期鉤子函數(shù) 16
2.2 數(shù)據(jù)綁定 17
2.2.1 插值 17
[實(shí)例2.1] 插入文本 17
[實(shí)例2.2] 插入HTML內(nèi)容 18
[實(shí)例2.3] 為元素設(shè)置樣式 18
[實(shí)例2.4] 為圖片綁定屬性 20
[實(shí)例2.5] 獲取QQ郵箱地址中的QQ號 21
2.2.2 過濾器 21
[實(shí)例2.6] 獲取當(dāng)前的日期、星期和時(shí)間 22
[實(shí)例2.7] 截取新聞標(biāo)題 23
2.2.3 指令 25
本章知識思維導(dǎo)圖 26

第3章 條件判斷 27 視頻講解：7節(jié)，34分鐘
3.1 v-if指令 28
3.1.1 基本用法 28
3.1.2 在元素中使用v-if 28
3.2 v-else指令 29
[實(shí)例3.1] 判斷2021年2月份的天數(shù) 29
3.3 v-else-if指令 30
[實(shí)例3.2] 判斷空氣質(zhì)量狀況 30
3.4 應(yīng)用key屬性管理可復(fù)用的元素 31
3.5 v-show指令 33
3.5.1 基本用法 33
[實(shí)例3.3] 切換圖片的顯示和隱藏 33
3.5.2 v-if和v-show的比較 34
本章知識思維導(dǎo)圖 34

第4章 列表渲染 35 視頻講解：6節(jié)，52分鐘
4.1 應(yīng)用v-for指令遍歷數(shù)組 36
4.1.1 基本用法 36
[實(shí)例4.1] 輸出省份、省會以及旅游景點(diǎn)信息 37
4.1.2 在元素中使用v-fo/ 37
[實(shí)例4.2] 輸出網(wǎng)站導(dǎo)航菜單 38
4.1.3 數(shù)組更新檢測 38
[實(shí)例4.3] 輸出2020年內(nèi)地電影票房排行榜前十名 39
4.2 應(yīng)用v-for指令遍歷對象 41
4.2.1 基本用法 41
4.2.2 向?qū)ο笾刑砑訉傩?43
4.3 應(yīng)用v-for指令遍歷整數(shù) 44
[實(shí)例4.4] 輸出九九乘法表 44
本章知識思維導(dǎo)圖 46

第5章 計(jì)算屬性 47 視頻講解：3節(jié)，28分鐘
5.1 基本用法 48
5.1.1 什么是計(jì)算屬性 48
5.1.2 計(jì)算屬性的應(yīng)用 48
[實(shí)例5.1] 統(tǒng)計(jì)購物車中的商品總價(jià) 49
5.2 getter和sette/ 50
5.2.1 gette/ 50
5.2.2 sette/ 51
5.3 計(jì)算屬性緩存 52
本章知識思維導(dǎo)圖 53

第6章 監(jiān)聽屬性 54 視頻講解：3節(jié)，19分鐘
6.1 基本用法 55
6.1.1 什么是監(jiān)聽屬性 55
6.1.2 監(jiān)聽屬性的應(yīng)用 55
[實(shí)例6.1] 實(shí)現(xiàn)匯率換算 56
6.2 deep選項(xiàng) 56
6.3 計(jì)算屬性和監(jiān)聽屬性的比較 57
本章知識思維導(dǎo)圖 58

第2篇　核心技術(shù)篇
第7章 樣式綁定 60 視頻講解：4節(jié)，38分鐘
7.1 class屬性綁定 61
7.1.1 對象語法 61
[實(shí)例7.1] 為書名添加顏色 62
[實(shí)例7.2] 以垂直方式從右向左顯示文本 65
7.1.2 數(shù)組語法 66
7.2 內(nèi)聯(lián)樣式綁定 68
7.2.1 對象語法 68
[實(shí)例7.3] 為搜索框綁定樣式 69
[實(shí)例7.4] 豎向?qū)Ш讲藛?70
7.2.2 數(shù)組語法 71
本章知識思維導(dǎo)圖 73

第8章 事件處理 74 視頻講解：6節(jié)，38分鐘
8.1 事件監(jiān)聽 75
8.1.1 使用v-on指令 75
[實(shí)例8.1] 統(tǒng)計(jì)單擊按鈕的次數(shù) 75
8.1.2 事件處理方法 75
[實(shí)例8.2] 動態(tài)改變頁面的背景顏色 76
[實(shí)例8.3] 動態(tài)改變圖片透明度 77
[實(shí)例8.4] 為圖片添加和去除邊框 78
8.1.3 使用內(nèi)聯(lián)JavaScript語句 79
8.1.4 實(shí)戰(zhàn)應(yīng)用 80
[實(shí)例8.5] 二級聯(lián)動菜單 80
8.2 事件處理中的修飾符 82
8.2.1 事件修飾符 82
8.2.2 按鍵修飾符 83
[實(shí)例8.6] 按下回車鍵自動切換焦點(diǎn) 84
本章知識思維導(dǎo)圖 86

第9章 表單控件綁定 87 視頻講解：13節(jié)，95分鐘
9.1 綁定文本框 88
9.1.1 單行文本框 88
[實(shí)例9.1] 搜索圖書信息 88
9.1.2 多行文本框 89
[實(shí)例9.2] 限制用戶輸入字?jǐn)?shù) 90
9.2 綁定復(fù)選框 91
9.2.1 單個(gè)復(fù)選框 91
[實(shí)例9.3] 切換注冊按鈕的狀態(tài) 92
9.2.2 多個(gè)復(fù)選框 93
[實(shí)例9.4] 實(shí)現(xiàn)復(fù)選框的全選、反選和全不選操作 94
9.3 綁定單選按鈕 95
[實(shí)例9.5] 模擬查詢話費(fèi)流量的功能 96
9.4 綁定下拉菜單 97
9.4.1 單選 97
[實(shí)例9.6] 更換頁面主題 98
9.4.2 多選 99
[實(shí)例9.7] 選擇職位 100
9.5 值綁定 101
9.5.1 單選按鈕 101
9.5.2 復(fù)選框 101
9.5.3 下拉菜單 102
9.6 使用修飾符 103
9.6.1 lazy 103
9.6.2 numbe/ 103
9.6.3 trim 104
本章知識思維導(dǎo)圖 105

第10章 自定義指令 106 視頻講解：7節(jié)，40分鐘
10.1 注冊指令 107
10.1.1 注冊全局指令 107
10.1.2 注冊局部指令 107
10.2 鉤子函數(shù) 108
[實(shí)例10.1]為圖片設(shè)置邊框 110
[實(shí)例10.2] 通過下拉菜單設(shè)置文字大小 110
10.3 自定義指令的綁定值 111
10.3.1 綁定數(shù)值常量 111
10.3.2 綁定字符串常量 112
10.3.3 綁定對象字面量 112
10.4 實(shí)戰(zhàn)應(yīng)用 112
[實(shí)例10.3] 實(shí)現(xiàn)元素的隨意拖動 113
本章知識思維導(dǎo)圖 115

第11章 組件 116 視頻講解：21節(jié)，127分鐘
11.1 注冊組件 117
11.1.1 注冊全局組件 117
11.1.2 注冊局部組件 119
11.2 數(shù)據(jù)傳遞 120
11.2.1 什么是Prop 120
11.2.2 Prop的大小寫 121
11.2.3 傳遞動態(tài)Prop 121
[實(shí)例11.1] 輸出影片信息 122
11.2.4 Prop驗(yàn)證 124
11.3 自定義事件 127
11.3.1 自定義事件的監(jiān)聽和觸發(fā) 127
[實(shí)例11.2] 單擊按鈕放大文本 127
[實(shí)例11.3] 導(dǎo)航菜單效果 128
11.3.2 將原生事件綁定到組件 130
11.4 內(nèi)容分發(fā) 130
11.4.1 基礎(chǔ)用法 130
11.4.2 編譯作用域 131
11.4.3 后備內(nèi)容 132
11.4.4 具名插槽 133
[實(shí)例11.4] 輸出簡單商品信息 133
11.4.5 作用域插槽 135
[實(shí)例11.5] 輸出人物信息列表 136
11.5 混入 137
11.5.1 基礎(chǔ)用法 137
11.5.2 選項(xiàng)合并 138
11.5.3 全局混入 140
11.6 動態(tài)組件 141
11.6.1 基礎(chǔ)用法 141
[實(shí)例11.6] 實(shí)現(xiàn)文字選項(xiàng)卡的切換 141
11.6.2 keep-alive 143
[實(shí)例11.7] 實(shí)現(xiàn)選項(xiàng)卡內(nèi)容的緩存效果 143
11.7 其他用法 146
11.7.1 使用$refs訪問組件 146
11.7.2 使用