課程目錄
day1視頻：
01.反饋
02.vue課程介紹
03.什麼是Vue
04.爲什麼要學習前端的流行框架
05.框架和庫的區別
06.MVC和MVVM的關係圖解
07.Vue基本代碼和MVVM之間對應關係
08.講解v-cloak、v-text、v-HTML的基本使用
09.v-bind指令的學習
10.使用v-on指令定義Vue中的事件
11.×××燈效果製作-上
12.×××燈效果製作-下
13.事件修飾符的介紹
14.講解v-model實現表單元素的數據雙向綁定
15.使用v-model實現計算器的案例
16.vue中通過屬性綁定爲元素設置class類樣式
17.vue中通過屬性綁定爲元素綁定style行內樣式
18.v-for指令的四種使用方式
19.v-for中key的使用注意事項
20.v-if和v-show的使用和特點
21.今天內容總結
day2視頻：
01.反饋
02.今天內容的說明
03.品牌案例-完成品牌列表的添加功能
04.品牌案例-根據Id完成品牌的刪除
05.Vue-devtools的兩種安裝方式
06.品牌案例-根據關鍵字實現數組的過濾
07.過濾器-Vue中全局過濾器的基本使用
08.過濾器-定義格式化時間的全局過濾器
09.過濾器-定義私有過濾器
10.字符串的padStart方法使用
11.自定義按鍵修飾符
12.指令-自定義全局指令讓文本框獲取焦點
13.指令-使用鉤子函數的第二個binding參數拿到傳遞的值
14.指令-定義私有指令
15.指令-指令函數的簡寫形式
16.生命週期函數-組件創建期間的4個鉤子函數
17.生命週期函數-組件運行和銷燬階段的鉤子函數
18.vue-resource發起get、post、jsonp請求
19.結合Node手寫JSONP服務器剖析JSONP原理
day3視頻
01.品牌列表-從數據庫獲取列表
02.品牌列表-完成添加功能
03.品牌列表-完成刪除功能
04.品牌列表-全局配置數據接口的根域名
05.品牌列表-全局配置emulateJSON選項
06.動畫-使用過渡類名實現動畫
07.動畫-自定義v-前綴
08.動畫-使用第三方animate.css類庫實現動畫
09.動畫-鉤子函數實現半場動畫的介紹
10.動畫-鉤子函數實現小球半場動畫
11.動畫-小球動畫每次重新開始的位置說明
12.動畫-使用transition-group元素實現列表動畫
13.動畫-實現列表刪除和刪除時候的動畫效果
14.動畫-transition-group中appear和tag屬性的作用
15.組件化和模塊化的區別
16.組件-創建組件的方式1
17.組件-創建組件的方式2
18.組件-創建組件的方式3
19.組件-使用components定義私有組件
20.組件-組件中的data
21.組件-爲什麼組件的data必須是一個function
22.組件切換-使用v-if和v-else結合flag進行切換
23.組件切換-使用Vue提供的component元素實現組件切換
24.組件切換-應用切換動畫和mode方式
day4視頻
01.動畫-小球動畫flag標識符的作用分析
02.組件-組件定義方式的複習
03.組件傳值-父組件向子組件傳值和data與props的區別
04.組件傳值-子組件通過事件調用向父組件傳值
05.組件案例-發表評論功能的實現
06.組件案例-實現評論的發表和自動刷新列表
07.使用ref獲取DOM元素和組件引用
08.路由-前端路由和後端路由的概念
09.路由-安裝vue-router的兩種方式
10.路由-vue-router的基本使用
11.路由-router-link的使用
12.路由-路由redirect重定向的使用
13.路由-設置選中路由高亮的兩種方式
14.路由-爲路由切換啓動動畫
15.路由傳參-使用query方式傳遞參數
16.路由傳參-使用params方式傳遞路由參數
17.路由-使用children屬性實現路由嵌套
18.路由-使用命名視圖實現經典佈局
19.路由-關於命名視圖的名稱到底是變量還是字符串的說明
day5視頻
01.複習-父子組件之間的傳值
02.複習-基本路由的使用
03.名稱案例-使用keyup事件實現
04.名稱案例-使用watch監聽文本框數據的變化
05.watch-監視路由地址的改變
06.computed-計算屬性的使用和3個特點
07.watch、computed、methods的對比
08.nrm的使用
09.Webpack-概念的引入
10.webpack-最基本的使用方式
11.webpack-最基本的配置文件的使用
12.webpack-dev-server的基本使用
13.webpack-dev-server的常用命令參數
14.webpack-dev-server配置命令的第2種方式
15.html-webpack-plugin的兩個基本作用
16.loader-配置處理css樣式表的第三方loader
17.loader-分析webpack調用第三方loader的過程
18.loader-配置處理less文件的loader
19.loader-配置處理scss文件的loader
day6視頻
01.複習-webpack基本配置1
02.複習-webpack基本配置2
03.webpack中url-loader的使
04.webpack中使用url-loader處理字體文件
05.關於webpack和npm中幾個問題的說明
06.webpack中babel的配置
07.關於Babel的幾點說明
08.使用vue實例的render方法渲染組件
09.區分webpack中導入vue和普通網頁使用script導入Vue的區別
10.在vue中結合render函數渲染指定的組件到容器中
11.webpack結合vue使用的總結
12.export default 和 export 的使用方式
13.結合webpack使用vue-router
14.結合webpack實現children子路由
15.組件中style標籤lang屬性和scoped屬性的介紹
16.抽離路由模塊
day7視頻
01.scoped屬性選擇器的實現原理
02.Mint-UI中按鈕組件的使用
03.Mint-UI中Toast組件的使用
04.Mint-UI的按需導入組件
05.介紹MUI
06.MUI的使用
07.項目-vue項目演示
08.項目-整理出一個基本的項目模板
09.項目-製作項目首頁的Header和Tabbar區域
10.項目-把本地項目託管到碼雲中
11.項目-使用vs code默認集成的Git工具快速提交代碼
12.項目-完成tabbar的小圖標設置
13.項目-完成tabbar路由鏈接的改造和路由高亮
14.項目-實現tabbar路由組件的切換功能
15.項目-完成首頁輪播圖樣式佈局
16.項目-完成首頁中輪播圖數據的加載
17.項目-完成首頁中九宮格改造工程
18.項目-完成組件切換時候的動畫效果
19.項目-將一天的代碼上傳到Git服務器
day8視頻
01.Promise-關於Promise要解決回調地獄問題的說明
02.Promise-基本概念的介紹【重要】
03.Promise-形式上的和具體的Promise異步操作的區別
04.Promise-Promise實例只要被創建就會立即執行裏面的異步方法
05.Promise-通過.then指定成功和失敗的回調
06.Promise-分析Promise的執行步驟
07.Promise-打開Promise的正確使用方式
08.Promise-捕獲異常的兩種方式
09.Promise-Jquery中Ajax使用Promise指定成功回調函數
10.項目-改造新聞資訊的路由鏈接
11.項目-繪製新聞資訊列表頁面佈局
12.項目-獲取新聞資訊列表並渲染頁面
13.項目-完成新聞列表中時間格式化
14.項目-改造新聞列表跳轉到新聞詳情的路由
15.項目-獲取並渲染新聞詳情數據
16.項目-繪製評論子組件的樣式
17.項目-加載首頁評論內容
18.項目-完成評論數據的點擊加載更多功能
19.每日打卡
day9視頻
01.項目-完成發表評論的功能
02.項目-改造圖片分析按鈕爲路由的鏈接並顯示對應的組件頁面
03.項目-圖片列表頂部導航條製作1
04.項目-圖片列表頂部導航條製作2-解決初始化問題
05.項目-解決tabbar無法正常切換組件的問題
06.項目-渲染分類列表的數據
07.項目-獲取對應分類的圖片列表數據並渲染頁面
08.項目-美化圖片列表並實現懶加載效果
09.項目-實現圖片詳情的數據加載和界面美化
10.項目-完成圖片詳情中縮略圖的製作
11.項目-改造商品列表路由
12.項目-實現商品列表的經典兩列布局
13.項目-在安卓手機中調試網站
day10視頻
01.項目-加載商品列表中的數據並實現加載更多
02.項目-vue-router中編程式導航的介紹
03.項目-繪製商品詳情頁面的卡片視圖
04.項目-獲取商品詳情的輪播圖數據並分析如何抽離輪播組件
05.項目-抽離輪播圖組件
06.項目-解決輪播圖寬度問題
07.項目-繪製商品購買區域的樣式
08.項目-渲染商品詳情頁面的數據
09.項目-使用編程式導航實現圖文介紹和商品評論跳轉
10.項目-實現商品詳情中的圖文介紹和評論頁面渲染
11.項目-實現基本的加入購物車小球動畫
12.項目-完美實現小球動畫適配不同滾動條位置和分辨率
13.項目-每當numbox的值改變立即把購買數量傳遞給父組件
14.項目-使用JS的API設置numbox的最大值
15.項目-爲什麼要使用vuex
16.項目-vuex的基本概念
17.項目-將store中的數據顯示到組件中
18.項目-使用mutations來操作state中的數據
19.項目-在提交mutaions方法的時候提交參數
20.項目-使用getters包裝數據並總結vuex的使用方式
day11視頻
01.vue項目-啓用vuex並設計購物車數據存儲方式
02.vue項目-實現點擊加入購物車功能
03.vue項目-實現徽標數值的自動更新
04.vue項目-實現購物車商品的本地持久存儲
05.vue項目-繪製購物車頁面中商品列表的佈局
06.vue項目-獲取購物車中所有商品列表並加載顯示
07.vue項目-在循環購物車列表時候初始化數量值
08.vue項目-實現購物車商品數量改變同步到store中
09.vue項目-實現購物車中商品的刪除
10.vue項目-繪製結算區域樣式
11.vue項目-把store中選中的狀態同步到頁面上
12.vue項目-同步商品的勾選狀態到store中保存
13.vue項目-實現勾選數量和總價的自動計算
14.vue項目-實現返回按鈕的功能
15.vue項目-將項目託管到Apache並啓用Gzip壓縮
16.vue項目-使用ngrok把本機的網站端口映射到外網