《從零開始學Vue.js》是化學工業出版社於2022年出版的書籍，作者是明日科技編著。
基本介紹
- 中文名：從零開始學Vue.js
- 作者：明日科技
- 語言：漢語
- 出版時間：2022年6月1日
- 出版社：化學工業出版社
- 頁數：319 頁
- ISBN：9787122404992
- 開本：16 開
- 裝幀：平裝
內容簡介,圖書目錄,
內容簡介
本書從零基礎讀者的角度出發，通過通俗易懂的語言、豐富多彩的實例，循序漸進地讓讀者在實踐中學習Vue.js編程知識，並提升自己的實際開發能力。 全書共分為4篇18章，內容包括Vue.js簡介、基礎特性、條件判斷、列表渲染、計算屬性、監聽屬性、樣式綁定、事件處理、表單控制項綁定、自定義指令、組件、過渡、渲染函式、常用外掛程式、單頁Web套用、狀態管理、51購商城、仿豆瓣電影評分等。書中知識點講解細緻，側重介紹每個知識點的使用場景，涉及的代碼給出了詳細的注釋，可以使讀者輕鬆領會Vue.js程式開發的精髓，快速提高開發技能。同時，本書配套了大量教學視頻，掃碼即可觀看，還提供所有程式源檔案，方便讀者實踐。 本書適合Vue.js初學者、前端開發工程師等自學使用，也可用作高等院校相關專業的教材及參考書。
圖書目錄
第1篇 基礎知識篇
第1章 Vue.js簡介 2 視頻講解：8節，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的開發模式 5
1.4 開發工具WebStorm簡介 6
1.4.1 WebStorm的下載 6
1.4.2 WebStorm的安裝 7
1.5 創建第一個Vue實例 9
【實例1.1】 輸出“Hello Vue.js” 9
本章知識思維導圖 12
第2章 基礎特性 13 視頻講解：7節，61分鐘
2.1 Vue實例及選項 14
2.1.1 掛載元素 14
2.1.2 數據 14
2.1.3 方法 15
2.1.4 生命周期鉤子函式 16
2.2 數據綁定 17
2.2.1 插值 17
【實例2.1】 插入文本 17
【實例2.2】 插入HTML內容 18
【實例2.3】 為元素設定樣式 18
【實例2.4】 為圖片綁定屬性 20
【實例2.5】 獲取QQ信箱地址中的QQ號 21
2.2.2 過濾器 21
【實例2.6】 獲取當前的日期、星期和時間 22
【實例2.7】 截取新聞標題 23
2.2.3 指令 25
本章知識思維導圖 26
第3章 條件判斷 27 視頻講解：7節，34分鐘
3.1 v-if指令 28
3.1.1 基本用法 28
3.1.2 在<template>元素中使用v-if 28
3.2 v-else指令 29
【實例3.1】 判斷2021年2月份的天數 29
3.3 v-else-if指令 30
【實例3.2】 判斷空氣品質狀況 30
3.4 套用key屬性管理可復用的元素 31
3.5 v-show指令 33
3.5.1 基本用法 33
【實例3.3】 切換圖片的顯示和隱藏 33
3.5.2 v-if和v-show的比較 34
本章知識思維導圖 34
第4章 列表渲染 35 視頻講解：6節，52分鐘
4.1 套用v-for指令遍歷數組 36
4.1.1 基本用法 36
【實例4.1】 輸出省份、省會以及旅遊景點信息 37
4.1.2 在<template>元素中使用v-fo/ 37
【實例4.2】 輸出網站導航選單 38
4.1.3 數組更新檢測 38
【實例4.3】 輸出2020年內地電影票房排行榜前十名 39
4.2 套用v-for指令遍歷對象 41
4.2.1 基本用法 41
4.2.2 向對象中添加屬性 43
4.3 套用v-for指令遍歷整數 44
【實例4.4】 輸出九九乘法表 44
本章知識思維導圖 46
第5章 計算屬性 47 視頻講解：3節，28分鐘
5.1 基本用法 48
5.1.1 什麼是計算屬性 48
5.1.2 計算屬性的套用 48
【實例5.1】 統計購物車中的商品總價 49
5.2 getter和sette/ 50
5.2.1 gette/ 50
5.2.2 sette/ 51
5.3 計算屬性快取 52
本章知識思維導圖 53
第6章 監聽屬性 54 視頻講解：3節，19分鐘
6.1 基本用法 55
6.1.1 什麼是監聽屬性 55
6.1.2 監聽屬性的套用 55
【實例6.1】 實現匯率換算 56
6.2 deep選項 56
6.3 計算屬性和監聽屬性的比較 57
本章知識思維導圖 58
第2篇 核心技術篇
第7章 樣式綁定 60 視頻講解：4節，38分鐘
7.1 class屬性綁定 61
7.1.1 對象語法 61
【實例7.1】 為書名添加顏色 62
【實例7.2】 以垂直方式從右向左顯示文本 65
7.1.2 數組語法 66
7.2 內聯樣式綁定 68
7.2.1 對象語法 68
【實例7.3】 為搜尋框綁定樣式 69
【實例7.4】 豎嚮導航選單 70
7.2.2 數組語法 71
本章知識思維導圖 73
第8章 事件處理 74 視頻講解：6節，38分鐘
8.1 事件監聽 75
8.1.1 使用v-on指令 75
【實例8.1】 統計單擊按鈕的次數 75
8.1.2 事件處理方法 75
【實例8.2】 動態改變頁面的背景顏色 76
【實例8.3】 動態改變圖片透明度 77
【實例8.4】 為圖片添加和去除框線 78
8.1.3 使用內聯JavaScript語句 79
8.1.4 實戰套用 80
【實例8.5】 二級聯動選單 80
8.2 事件處理中的修飾符 82
8.2.1 事件修飾符 82
8.2.2 按鍵修飾符 83
【實例8.6】 按下回車鍵自動切換焦點 84
本章知識思維導圖 86
第9章 表單控制項綁定 87 視頻講解：13節，95分鐘
9.1 綁定文本框 88
9.1.1 單行文本框 88
【實例9.1】 搜尋圖書信息 88
9.1.2 多行文本框 89
【實例9.2】 限制用戶輸入字數 90
9.2 綁定複選框 91
9.2.1 單個複選框 91
【實例9.3】 切換註冊按鈕的狀態 92
9.2.2 多個複選框 93
【實例9.4】 實現複選框的全選、反選和全不選操作 94
9.3 綁定單選按鈕 95
【實例9.5】 模擬查詢話費流量的功能 96
9.4 綁定下拉選單 97
9.4.1 單選 97
【實例9.6】 更換頁面主題 98
9.4.2 多選 99
【實例9.7】 選擇職位 100
9.5 值綁定 101
9.5.1 單選按鈕 101
9.5.2 複選框 101
9.5.3 下拉選單 102
9.6 使用修飾符 103
9.6.1 lazy 103
9.6.2 numbe/ 103
9.6.3 trim 104
本章知識思維導圖 105
第10章 自定義指令 106 視頻講解：7節，40分鐘
10.1 註冊指令 107
10.1.1 註冊全局指令 107
10.1.2 註冊局部指令 107
10.2 鉤子函式 108
【實例10.1】為圖片設定框線 110
【實例10.2】 通過下拉選單設定文字大小 110
10.3 自定義指令的綁定值 111
10.3.1 綁定數值常量 111
10.3.2 綁定字元串常量 112
10.3.3 綁定對象字面量 112
10.4 實戰套用 112
【實例10.3】 實現元素的隨意拖動 113
本章知識思維導圖 115
第11章 組件 116 視頻講解：21節，127分鐘
11.1 註冊組件 117
11.1.1 註冊全局組件 117
11.1.2 註冊局部組件 119
11.2 數據傳遞 120
11.2.1 什麼是Prop 120
11.2.2 Prop的大小寫 121
11.2.3 傳遞動態Prop 121
【實例11.1】 輸出影片信息 122
11.2.4 Prop驗證 124
11.3 自定義事件 127
11.3.1 自定義事件的監聽和觸發 127
【實例11.2】 單擊按鈕放大文本 127
【實例11.3】 導航選單效果 128
11.3.2 將原生事件綁定到組件 130
11.4 內容分發 130
11.4.1 基礎用法 130
11.4.2 編譯作用域 131
11.4.3 後備內容 132
11.4.4 具名插槽 133
【實例11.4】 輸出簡單商品信息 133
11.4.5 作用域插槽 135
【實例11.5】 輸出人物信息列表 136
11.5 混入 137
11.5.1 基礎用法 137
11.5.2 選項合併 138
11.5.3 全局混入 140
11.6 動態組件 141
11.6.1 基礎用法 141
【實例11.6】 實現文字選項卡的切換 141
11.6.2 keep-alive 143
【實例11.7】 實現選項卡內容的快取效果 143
11.7 其他用法 146
11.7.1 使用$refs訪問組件 146
11.7.2 使用<script>標籤定義模板 147
11.8 實戰套用 148
【實例11.8】 實現熱播電影和經典電影之間的切換 148
本章知識思維導圖 151
第12章 過渡 152 視頻講解：11節，89分鐘
12.1 單元素過渡 153
12.1.1 CSS過渡 153
12.1.2 過渡的類名介紹 154
【實例12.1】 顯示和隱藏文章內容的過渡效果 154
12.1.3 CSS動畫 155
【實例12.2】 以縮放的動畫形式隱藏和顯示文字 155
12.1.4 自定義過渡的類名 156
【實例12.3】 以旋轉動畫的形式隱藏和顯示文字 157
12.1.5 JavaScript鉤子函式 157
【實例12.4】 實現文字顯示和隱藏時的不同效果 159
12.2 多元素過渡 160
12.2.1 基礎用法 160
12.2.2 key屬性 162
【實例12.5】 實現古詩的過渡效果 162
12.2.3 過渡模式 165
12.3 多組件過渡 166
【實例12.6】 實現橫向選項卡文字切換的過渡效果 167
12.4 列表過渡 169
【實例12.7】 實現插入數字和移除數字時的過渡效果 169
12.5 實戰套用 170
【實例12.8】 廣告圖片的輪播效果 170
本章知識思維導圖 174
第3篇 高級套用篇
第13章 渲染函式 176 視頻講解：4節，31分鐘
13.1 什麼是虛擬DOM 177
13.2 渲染函式的使用 177
13.2.1 基本用法 177
13.2.2 createElement用法 180
13.2.3 使用JavaScript代替模板功能 183
【實例13.1】 實現文本的放大和縮小 183
【實例13.2】 實現列表的顯示和隱藏 185
【實例13.3】 模擬線上聊天 187
本章知識思維導圖 188
第14章 常用外掛程式 189 視頻講解：13節，81分鐘
14.1 套用vue-router實現路由 190
14.1.1 引入外掛程式 190
14.1.2 基本用法 191
14.1.3 路由動態匹配 192
14.1.4 嵌套路由 193
【實例14.1】 電影和音樂組件的切換 194
14.1.5 命名路由 197
14.1.6 套用push( )方法定義導航 197
【實例14.2】 右側選項卡切換圖片效果 197
14.1.7 命名視圖 201
14.1.8 重定向 202
14.1.9 高級用法 203
【實例14.3】 設定網頁標題 203
14.2 套用axios實現Ajax請求 207
14.2.1 引入方式 207
14.2.2 GET請求 208
【實例14.4】 檢測用戶名是否被占用 209
14.2.3 POST請求 210
【實例14.5】 檢測用戶登錄是否成功 211
14.3 實戰套用 213
【實例14.6】 實現文字選項卡和內容的切換 213
本章知識思維導圖 219
第15章 單頁Web套用 220 視頻講解：9節，78分鐘
15.1 webpack簡介 221
15.1.1 webpack的安裝 221
15.1.2 基本使用 222
15.2 loader簡介 223
15.2.1 載入CSS 223
15.2.2 webpack配置檔案 223
15.2.3 載入圖片檔案 226
15.3 單檔案組件 227
15.4 項目目錄結構 229
15.4.1 @vue/cli的安裝 230
15.4.2 創建項目 230
【實例15.1】 實現購物車功能 232
15.5 實戰套用 235
【實例15.2】 通過選項卡瀏覽新聞標題 235
本章知識思維導圖 240
第16章 狀態管理 241 視頻講解：4節，58分鐘
16.1 Vuex簡介 242
16.2 基本使用 242
16.2.1 Vuex的核心概念 242
16.2.2 簡單例子 243
【實例16.1】 保存用戶登錄狀態 250
16.3 實戰套用 255
【實例16.2】 添加商品和刪除商品 255
本章知識思維導圖 260
第4篇 項目開發篇
第17章 51購商城 262 視頻講解：21節，63分鐘
17.1 項目的設計思路 263
17.1.1 項目概述 263
17.1.2 界面預覽 263
17.1.3 功能結構 263
17.1.4 資料夾組織結構 263
17.2 主頁的設計與實現 266
17.2.1 主頁的設計 266
17.2.2 頂部區和底部區功能的實現 267
17.2.3 商品分類導航功能的實現 269
17.2.4 輪播圖功能的實現 271
17.2.5 商品推薦功能的實現 274
17.3 商品詳情頁面的設計與實現 276
17.3.1 商品詳情頁面的設計 276
17.3.2 圖片放大鏡效果的實現 276
17.3.3 商品概要功能的實現 279
17.3.4 猜你喜歡功能的實現 281
17.3.5 選項卡切換效果的實現 283
17.4 購物車頁面的設計與實現 285
17.4.1 購物車頁面的設計 285
17.4.2 購物車頁面的實現 286
17.5 付款頁面的設計與實現 288
17.5.1 付款頁面的設計 288
17.5.2 付款頁面的實現 289
17.6 登錄註冊頁面的設計與實現 292
17.6.1 登錄註冊頁面的設計 292
17.6.2 登錄頁面的實現 292
17.6.3 註冊頁面的實現 294
本章知識思維導圖 297
第18章 仿豆瓣電影評分網 298 視頻講解：14節，40分鐘
18.1 課程設計目的 299
18.2 系統設計 299
18.2.1 系統功能結構 299
18.2.2 資料夾組織結構 299
18.2.3 系統預覽 299
18.3 在項目中使用jQuery 301
18.4 主頁的設計與實現 302
18.4.1 主頁的設計 302
18.4.2 “正在熱映”版塊的實現 302
18.4.3 “最近熱門的電影”版塊的實現 306
18.5 電影信息頁面的設計與實現 309
18.5.1 “電影基本信息和評分”版塊的設計 309
18.5.2 “劇情簡介”版塊的實現 311
18.5.3 “類似電影推薦”版塊的實現 312
18.6 電影評價功能的實現 313
18.6.1 記錄想看的電影 313
18.6.2 評價看過的電影 316
18.6.3 刪除記錄 318
本章知識思維導圖 319
