精通Vue.js：Web前端開發(fā)技術(shù)詳解（微課視頻版）

 
 
第1章Vue簡介
1．1MVVM設(shè)計(jì)模式
1．2Vue框架的特點(diǎn)
1．3個(gè)Vue范例
1．3．1把模型數(shù)據(jù)綁定到視圖
1．3．2把視圖上的輸入數(shù)據(jù)與模型綁定
1．3．3改變模型數(shù)據(jù)對視圖的影響
1．4Vue組件的選項(xiàng)
1．4．1data選項(xiàng)
1．4．2template選項(xiàng)
1．4．3methods選項(xiàng)
1．5Vue組件實(shí)例的生命周期
1．6Vue編譯模板和渲染DOM的基本原理
1．6．1編譯模板
1．6．2渲染DOM
1．7異步渲染DOM
1．8防抖動(dòng)函數(shù)debounce()
1．9Vue的開發(fā)和調(diào)試工具
1．9．1NPM
1．9．2vuedevtools調(diào)試工具
1．10小結(jié)
1．11思考題
第2章Vue指令
2．1內(nèi)置Vue指令
2．1．1vbind指令
2．1．2vmodel指令
2．1．3vshow指令
2．1．4vif/velseif/velse指令
2．1．5vfor指令
2．1．6von指令
2．1．7von指令的事件修飾符
2．1．8vtext指令
2．1．9vhtml指令
2．1．10vpre指令
2．1．11vonce指令
2．1．12vcloak指令
2．2自定義Vue指令
2．2．1注冊自定義指令
2．2．2自定義指令的鉤子函數(shù)
2．2．3自定義指令的動(dòng)態(tài)參數(shù)和動(dòng)態(tài)值
2．2．4把對象字面量賦值給自定義指令
2．2．5鉤子函數(shù)簡寫
2．2．6自定義指令范例： vimg指令
2．2．7自定義指令范例： vdrag指令
2．2．8自定義指令范例： vclickoutside指令
2．3小結(jié)
2．4思考題
第3章計(jì)算屬性和數(shù)據(jù)監(jiān)聽
3．1計(jì)算屬性
3．1．1讀寫計(jì)算屬性
3．1．2比較計(jì)算屬性和方法
3．1．3用計(jì)算屬性過濾數(shù)組
3．1．4計(jì)算屬性實(shí)用范例：實(shí)現(xiàn)購物車
3．2數(shù)據(jù)監(jiān)聽
3．2．1用Web Worker執(zhí)行數(shù)據(jù)監(jiān)聽中的異步操作
3．2．2在watch選項(xiàng)中調(diào)用方法
3．2．3比較同步操作和異步操作
3．2．4深度監(jiān)聽
3．2．5立即監(jiān)聽
3．2．6比較計(jì)算屬性和數(shù)據(jù)監(jiān)聽watch選項(xiàng)
3．3Vue的響應(yīng)式系統(tǒng)的基本原理
3．4小結(jié)
3．5思考題
第4章綁定表單
4．1綁定文本域
4．2綁定單選按鈕
4．3綁定復(fù)選框
4．4下拉列表
4．5把對象與表單綁定
4．6小結(jié)
4．7思考題
第5章綁定CSS樣式
5．1綁定class屬性
5．1．1綁定對象類型的變量
5．1．2綁定計(jì)算屬性
5．1．3綁定數(shù)組
5．1．4為Vue組件綁定CSS樣式
5．2綁定style屬性
5．2．1綁定對象類型的變量
5．2．2綁定數(shù)組
5．2．3與瀏覽器兼容
5．3范例： 變換表格奇偶行的樣式
5．4小結(jié)
5．5思考題
第6章CSS過渡和動(dòng)畫
6．1CSS過渡
6．1．1為組件設(shè)定名字 6．1．2為組件顯式指定過渡樣式類型 6．1．3使用鉤子函數(shù)和Velocity函數(shù)庫
6．1．4設(shè)置初始過渡效果
6．1．5切換過渡的DOM元素
6．1．6過渡模式
6．1．7切換過渡的組件
6．2CSS動(dòng)畫
6．2．1使用第三方的CSS動(dòng)畫樣式類型庫
6．2．2使用鉤子函數(shù)和Velocity函數(shù)庫
6．3過渡組合組件 6．4動(dòng)態(tài)控制過渡和動(dòng)畫
6．5小結(jié)
6．6思考題
第7章Vue組件開發(fā)基礎(chǔ)
7．1注冊全局組件和局部組件
7．1．1注冊全局組件
7．1．2注冊局部組件
7．2組件的命名規(guī)則
7．3向組件傳遞屬性
7．3．1傳遞動(dòng)態(tài)值
7．3．2對象類型的屬性
7．3．3數(shù)組類型的屬性
7．3．4綁定靜態(tài)數(shù)據(jù)
7．3．5傳遞對象
7．3．6屬性的不可改變性
7．3．7單向數(shù)據(jù)流
7．3．8屬性驗(yàn)證
7．4nonprop屬性
7．4．1單節(jié)點(diǎn)模板中根節(jié)點(diǎn)對nonprop屬性的繼承
7．4．2在單節(jié)點(diǎn)模板中禁止nonprop屬性的繼承
7．4．3多節(jié)點(diǎn)模板中節(jié)點(diǎn)與nonprop屬性的綁定
7．5組件樹
7．6監(jiān)聽子組件的事件
7．6．1驗(yàn)證事件
7．6．2通過vmodel指令綁定屬性
7．6．3通過vmodel指令綁定多個(gè)屬性
7．6．4vmodel指令的自定義修飾符
7．6．5處理子組件中DOM元素的原生事件
7．7綜合范例： 自定義組件 7．8小結(jié)
7．9思考題
第8章Vue組件開發(fā)高級(jí)技術(shù)
8．1插槽 8．1．1組件的渲染作用域 8．1．2組件的默認(rèn)內(nèi)容 8．1．3為組件命名  8．1．4組件的動(dòng)態(tài)名字 8．1．5組件的自定義屬性 8．2動(dòng)態(tài)組件 8．3異步組件
8．3．1異步組件的選項(xiàng)
8．3．2局部異步組件
8．4組件的生命周期
8．5組件的混入塊
8．5．1合并規(guī)則
8．5．2全局混入塊
8．5．3自定義合并策略
8．5．4使用混入塊的注意事項(xiàng)
8．6組件之間的互相訪問
8．6．1訪問根組件
8．6．2訪問父組件
8．6．3訪問子組件
8．6．4依賴注入
8．7組件的遞歸
8．8定義組件模板的其他方式
8．9組件與DOM元素的通信 8．9．1在組件中包裹子組件  8．9．2多個(gè)組件與同一個(gè)DOM元素通信 8．10小結(jié)
8．11思考題
第9章render()函數(shù)和虛擬DOM
9．1render()函數(shù)
9．2真實(shí)DOM
9．3虛擬DOM
9．4h()函數(shù)的用法
9．4．1虛擬DOM中虛擬節(jié)點(diǎn)的性
9．4．2h()函數(shù)的完整范例
9．4．3創(chuàng)建組件的虛擬節(jié)點(diǎn)
9．5用render()函數(shù)實(shí)現(xiàn)模板的一些功能
9．5．1實(shí)現(xiàn)vif和vfor指令的流程控制功能
9．5．2實(shí)現(xiàn)vmodel指令的數(shù)據(jù)綁定功能
9．5．3實(shí)現(xiàn)von指令的監(jiān)聽事件功能
9．5．4實(shí)現(xiàn)事件修飾符和按鍵修飾符的功能
9．5．5實(shí)現(xiàn)插槽功能
9．5．6生成動(dòng)態(tài)組件的節(jié)點(diǎn)
9．5．7自定義指令
9．6在render()函數(shù)中使用JSX語法
9．7綜合范例： 博客帖子列表
9．8小結(jié)
9．9思考題
第10章Vue CLI腳手架工具
10．1Vue CLI簡介以及安裝
10．2創(chuàng)建Vue項(xiàng)目 
10．2．1vue create命令的用法
10．2．2刪除預(yù)配置
10．2．3vue ui命令的用法
10．3Vue項(xiàng)目的結(jié)構(gòu)
10．3．1單文件組件
10．3．2程序入口main．js文件
10．3．3項(xiàng)目的index．html文件和SPA單頁應(yīng)用
10．3．4運(yùn)行項(xiàng)目
10．4安裝和配置Visual Studio Code
10．4．1安裝Vetur和ESLint插件
10．4．2在VSCode中打開helloworld項(xiàng)目
10．4．3在VSCode中運(yùn)行helloworld項(xiàng)目
10．5創(chuàng)建單文件組件 10．5．1創(chuàng)建Hello．vue文件
10．5．2修改App．vue文件
10．5．3運(yùn)行修改后的helloworld項(xiàng)目
10．6創(chuàng)建正式產(chǎn)品
10．7在Tomcat中發(fā)布正式產(chǎn)品
10．7．1安裝Tomcat
10．7．2把helloworld正式產(chǎn)品發(fā)布到Tomcat中
10．8小結(jié)
10．9思考題
第11章Vue Router路由管理器
11．1簡單的路由管理
11．2路由管理器的基本用法
11．3在Vue項(xiàng)目中使用路由管理器
11．3．1創(chuàng)建Home．vue和About．vue組件文件
11．3．2在組件中加入圖片
11．3．3在index．js中創(chuàng)建路由管理器實(shí)例
11．3．4在main．js中使用路由管理器
11．3．5在App．vue中加入組件和組件 11．3．6運(yùn)行helloworld項(xiàng)目
11．4路由模式
11．5動(dòng)態(tài)鏈接
11．5．1鏈接中包含路徑參數(shù)
11．5．2鏈接中包含查詢參數(shù)
11．5．3鏈接與通配符匹配
11．6嵌套的路由
11．6．1創(chuàng)建Items父組件的文件Items．vue
11．6．2創(chuàng)建Item子組件的文件Item．vue
11．6．3在index．js中設(shè)置父組件和子組件的路由
11．6．4在根組件的模板中加入Items父組件的導(dǎo)航鏈接
11．7命名路由
11．7．1重定向
11．7．2使用別名
11．8命名視圖
11．9向路由的組件傳遞屬性
11．9．1向命名視圖的組件傳遞屬性
11．9．2通過函數(shù)傳遞屬性
11．10編程式導(dǎo)航
11．11導(dǎo)航守衛(wèi)函數(shù)
11．11．1全局導(dǎo)航守衛(wèi)函數(shù)
11．11．2驗(yàn)證用戶是否登錄
11．11．3設(shè)置受保護(hù)資源
11．11．4在單頁面應(yīng)用中設(shè)置目標(biāo)路由的頁面標(biāo)題
11．11．5特定路由的導(dǎo)航守衛(wèi)函數(shù)
11．11．6組件內(nèi)的導(dǎo)航守衛(wèi)函數(shù)
11．12數(shù)據(jù)抓取
11．12．1導(dǎo)航后抓取
11．12．2導(dǎo)航前抓取
11．13設(shè)置頁面的滾動(dòng)行為
11．13．1scrollBehavior()函數(shù)的返回值
11．13．2延遲滾動(dòng)
11．14延遲加載路由
11．14．1把多個(gè)組件打包到同一個(gè)文件中
11．14．2在路由的組件中嵌套異步組件
11．15動(dòng)態(tài)路由
11．16小結(jié)
11．17思考題
第12章組合API
12．1setup()函數(shù)的用法
12．1．1props參數(shù)
12．1．2context參數(shù)
12．1．3ref()函數(shù)
12．1．4reactive()函數(shù)
12．1．5toRefs()函數(shù)
12．1．6readonly()函數(shù)
12．1．7定義計(jì)算屬性
12．1．8注冊組件的生命周期鉤子函數(shù)
12．1．9通過watch()函數(shù)監(jiān)聽數(shù)據(jù)
12．1．10通過watchEffect()函數(shù)監(jiān)聽數(shù)據(jù)
12．1．11獲取模板中DOM元素的引用
12．1．12依賴注入(provide/inject)
12．2分割setup()函數(shù)
12．2．1把setup()函數(shù)分割到多個(gè)函數(shù)中 
12．2．2把setup()函數(shù)分割到多個(gè)文件中
12．3小結(jié)
12．4思考題
第13章通過Axios訪問服務(wù)器
13．1Axios的基本用法
13．1．1同域訪問和跨域訪問
13．1．2獲取響應(yīng)結(jié)果
13．1．3處理錯(cuò)誤
13．2在Vue項(xiàng)目中使用Axios
13．2．1異步請求
13．2．2POST請求方式
13．2．3對象和查詢字符串的轉(zhuǎn)換
13．2．4下載圖片 
13．2．5上傳文件
13．2．6設(shè)置反向代理服務(wù)器
13．3Axios API的用法
13．4請求配置
13．4．1創(chuàng)建axios實(shí)例
13．4．2設(shè)定默認(rèn)的請求配置
13．4．3請求配置的優(yōu)先順序
13．4．4取消請求的令牌
13．5并發(fā)請求
13．6請求攔截器和響應(yīng)攔截器
13．7前端與后端的會(huì)話
13．7．1通過Cookie跟蹤會(huì)話
13．7．2通過token令牌跟蹤會(huì)話
13．8前端與后端代碼的整合
13．9小結(jié)
13．10思考題
第14章通過Vuex進(jìn)行狀態(tài)管理
14．1Vuex的基本工作原理
14．2Vuex的基本用法
14．3在Vue項(xiàng)目中使用Vuex
14．3．1strict嚴(yán)格模式
14．3．2通過計(jì)算屬性訪問狀態(tài)
14．3．3狀態(tài)映射函數(shù)： mapState()
14．3．4更新荷載
14．3．5更新映射函數(shù)： mapMutations()
14．3．6把更新函數(shù)的名字設(shè)為常量
14．3．7更新函數(shù)只能包含同步操作
14．4倉庫的getters選項(xiàng)
14．4．1getters映射函數(shù)： mapGetters()
14．4．2為getters選項(xiàng)的屬性設(shè)置參數(shù)
14．5倉庫的actions選項(xiàng)
14．5．1傳入更新荷載
14．5．2動(dòng)作映射函數(shù)： mapActions()
14．6異步動(dòng)作
14．6．1異步動(dòng)作范例
14．6．2使用async/await的范例
14．7表單處理
14．7．1在處理input事件的方法中提交更新函數(shù)
14．7．2可讀寫的計(jì)算屬性
14．8倉庫的模塊化
14．8．1模塊的局部狀態(tài)
14．8．2訪問根狀態(tài)
14．8．3命名空間
14．9通過Composition API訪問倉庫
14．10狀態(tài)的持久化
14．11小結(jié)
14．12思考題
第15章創(chuàng)建綜合購物網(wǎng)站應(yīng)用
15．1前端組件的結(jié)構(gòu)
15．2前端開發(fā)技巧
15．2．1狀態(tài)管理
15．2．2狀態(tài)同步
15．2．3運(yùn)用Composition API提高代碼可重用性
15．2．4在組件中顯示圖片
15．2．5路由管理
15．2．6每個(gè)組件的頁面標(biāo)題
15．2．7用戶登錄流程
15．2．8受保護(hù)的資源
15．2．9異步處理Axios的請求
15．2．10單獨(dú)運(yùn)行前端項(xiàng)目
15．3后端架構(gòu)
15．3．1實(shí)現(xiàn)業(yè)務(wù)數(shù)據(jù)
15．3．2實(shí)現(xiàn)業(yè)務(wù)邏輯服務(wù)層
15．3．3實(shí)現(xiàn)DAO層
15．3．4實(shí)現(xiàn)控制器層
15．3．5前端與后端的數(shù)據(jù)交換
15．4發(fā)布和運(yùn)行netstore應(yīng)用
15．4．1安裝SAMPLEDB數(shù)據(jù)庫
15．4．2發(fā)布后端netstore項(xiàng)目
15．4．3調(diào)試和運(yùn)行前端netstore項(xiàng)目
15．4．4創(chuàng)建并發(fā)布前端項(xiàng)目的正式產(chǎn)品
15．4．5運(yùn)行netstore應(yīng)用
15．5小結(jié)
附錄A思考題答案