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

 
 
第1章Vue簡(jiǎn)介
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ù)對(duì)視圖的影響
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注冊(cè)自定義指令
2．2．2自定義指令的鉤子函數(shù)
2．2．3自定義指令的動(dòng)態(tài)參數(shù)和動(dòng)態(tài)值
2．2．4把對(duì)象字面量賦值給自定義指令
2．2．5鉤子函數(shù)簡(jiǎn)寫
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ì)算屬性過(guò)濾數(shù)組
3．1．4計(jì)算屬性實(shí)用范例：實(shí)現(xiàn)購(gòu)物車
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把對(duì)象與表單綁定
4．6小結(jié)
4．7思考題
第5章綁定CSS樣式
5．1綁定class屬性
5．1．1綁定對(duì)象類型的變量
5．1．2綁定計(jì)算屬性
5．1．3綁定數(shù)組
5．1．4為Vue組件綁定CSS樣式
5．2綁定style屬性
5．2．1綁定對(duì)象類型的變量
5．2．2綁定數(shù)組
5．2．3與瀏覽器兼容
5．3范例： 變換表格奇偶行的樣式
5．4小結(jié)
5．5思考題
第6章CSS過(guò)渡和動(dòng)畫
6．1CSS過(guò)渡
6．1．1為組件設(shè)定名字 6．1．2為組件顯式指定過(guò)渡樣式類型 6．1．3使用鉤子函數(shù)和Velocity函數(shù)庫(kù)
6．1．4設(shè)置初始過(guò)渡效果
6．1．5切換過(guò)渡的DOM元素
6．1．6過(guò)渡模式
6．1．7切換過(guò)渡的組件
6．2CSS動(dòng)畫
6．2．1使用第三方的CSS動(dòng)畫樣式類型庫(kù)
6．2．2使用鉤子函數(shù)和Velocity函數(shù)庫(kù)
6．3過(guò)渡組合組件 6．4動(dòng)態(tài)控制過(guò)渡和動(dòng)畫
6．5小結(jié)
6．6思考題
第7章Vue組件開發(fā)基礎(chǔ)
7．1注冊(cè)全局組件和局部組件
7．1．1注冊(cè)全局組件
7．1．2注冊(cè)局部組件
7．2組件的命名規(guī)則
7．3向組件傳遞屬性
7．3．1傳遞動(dòng)態(tài)值
7．3．2對(duì)象類型的屬性
7．3．3數(shù)組類型的屬性
7．3．4綁定靜態(tài)數(shù)據(jù)
7．3．5傳遞對(duì)象
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)對(duì)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通過(guò)vmodel指令綁定屬性
7．6．3通過(guò)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組件之間的互相訪問(wèn)
8．6．1訪問(wèn)根組件
8．6．2訪問(wèn)父組件
8．6．3訪問(wèn)子組件
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語(yǔ)法
9．7綜合范例： 博客帖子列表
9．8小結(jié)
9．9思考題
第10章Vue CLI腳手架工具
10．1Vue CLI簡(jiǎn)介以及安裝
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è)應(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簡(jiǎn)單的路由管理
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通過(guò)函數(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è)面應(yīng)用中設(shè)置目標(biāo)路由的頁(yè)面標(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è)置頁(yè)面的滾動(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注冊(cè)組件的生命周期鉤子函數(shù)
12．1．9通過(guò)watch()函數(shù)監(jiān)聽數(shù)據(jù)
12．1．10通過(guò)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章通過(guò)Axios訪問(wèn)服務(wù)器
13．1Axios的基本用法
13．1．1同域訪問(wèn)和跨域訪問(wèn)
13．1．2獲取響應(yīng)結(jié)果
13．1．3處理錯(cuò)誤
13．2在Vue項(xiàng)目中使用Axios
13．2．1異步請(qǐng)求
13．2．2POST請(qǐng)求方式
13．2．3對(duì)象和查詢字符串的轉(zhuǎn)換
13．2．4下載圖片 
13．2．5上傳文件
13．2．6設(shè)置反向代理服務(wù)器
13．3Axios API的用法
13．4請(qǐng)求配置
13．4．1創(chuàng)建axios實(shí)例
13．4．2設(shè)定默認(rèn)的請(qǐng)求配置
13．4．3請(qǐng)求配置的優(yōu)先順序
13．4．4取消請(qǐng)求的令牌
13．5并發(fā)請(qǐng)求
13．6請(qǐng)求攔截器和響應(yīng)攔截器
13．7前端與后端的會(huì)話
13．7．1通過(guò)Cookie跟蹤會(huì)話
13．7．2通過(guò)token令牌跟蹤會(huì)話
13．8前端與后端代碼的整合
13．9小結(jié)
13．10思考題
第14章通過(guò)Vuex進(jìn)行狀態(tài)管理
14．1Vuex的基本工作原理
14．2Vuex的基本用法
14．3在Vue項(xiàng)目中使用Vuex
14．3．1strict嚴(yán)格模式
14．3．2通過(guò)計(jì)算屬性訪問(wèn)狀態(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倉(cāng)庫(kù)的getters選項(xiàng)
14．4．1getters映射函數(shù)： mapGetters()
14．4．2為getters選項(xiàng)的屬性設(shè)置參數(shù)
14．5倉(cāng)庫(kù)的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倉(cāng)庫(kù)的模塊化
14．8．1模塊的局部狀態(tài)
14．8．2訪問(wèn)根狀態(tài)
14．8．3命名空間
14．9通過(guò)Composition API訪問(wèn)倉(cāng)庫(kù)
14．10狀態(tài)的持久化
14．11小結(jié)
14．12思考題
第15章創(chuàng)建綜合購(gòu)物網(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è)組件的頁(yè)面標(biāo)題
15．2．7用戶登錄流程
15．2．8受保護(hù)的資源
15．2．9異步處理Axios的請(qǐng)求
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ù)庫(kù)
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思考題答案