2019黑馬程式設計師vue.js專案實戰全套
課程目錄
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.今天內容總結
1 G9 X c; b* }# n. H* [$ f' H" q
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原理
: L4 ^# c, D2 ~& g
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方式
) J( [" T) E6 e n5 f% s
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
% h; E) [/ T0 e1 B, E
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.抽離路由模組
, L, A7 j, j( \0 M8 c9 \8 H/ z
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.每日打卡
8 y# I9 W( q- e1 ~( t5 }3 m3 B/ ?3 X7 L$ {
day9視訊
01.專案-完成發表評論的功能
02.專案-改造圖片分析按鈕為路由的連結並顯示對應的元件頁面
03.專案-圖片列表頂部導航條製作1
04.專案-圖片列表頂部導航條製作2-解決初始化問題
05.專案-解決tabbar無法正常切換元件的問題
06.專案-渲染分類列表的資料
07.專案-獲取對應分類的圖片列表資料並渲染頁面
08.專案-美化圖片列表並實現懶載入效果
09.專案-實現圖片詳情的資料載入和介面美化
10.專案-完成圖片詳情中縮圖的製作
11.專案-改造商品列表路由
12.專案-實現商品列表的經典兩列布局
13.專案-在安卓手機中除錯網站
, N" b4 h' u, J% Y: C. X* H9 @8 e6 c
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把本機的網站埠對映到外網
下載地址:百度網盤
相關文章
- 黑馬程式設計師程式設計師
- 黑馬程式設計師-Java概述程式設計師Java
- 黑馬程式設計師Android實戰影片教程等,超過30程式設計師Android
- 黑馬程式設計師前端學習之路程式設計師前端
- 黑馬程式設計師——型別轉換程式設計師型別
- 【原始碼分享】讓黑馬程式設計師逆襲的仿騰訊 IM 專案原始碼程式設計師
- 黑馬程式設計師第七天程式設計師
- 黑馬程式設計師——Java高新技術---反射程式設計師Java反射
- 黑馬程式設計師_Java高新技術之列舉程式設計師Java
- 黑馬程式設計師——Java學習筆記之⑦——“網路程式設計”程式設計師Java筆記
- 黑馬程式設計師java筆記之一-----Map集合程式設計師Java筆記
- 【黑馬程式設計師濟南中心】代理模式-Cglib代理程式設計師模式CGLib
- 【黑馬程式設計師濟南中心】java基礎-陣列程式設計師Java陣列
- 黑馬程式設計師面試題一(交通燈管理系統)程式設計師面試題
- 黑馬程式設計師---學習筆記3:進位制程式設計師筆記
- 黑馬程式設計師—一張帖看完黑馬所有學科、班級就業薪資貼程式設計師就業
- 黑馬程式設計師Java培訓和Android培訓:程式設計基礎程式設計師JavaAndroid
- 黑馬程式設計師_ios基礎總結1_IOS概述程式設計師iOS
- 黑馬程式設計師--java高新技術 25--列舉,反射程式設計師Java反射
- 程式設計師【黑話】指南程式設計師
- 最新Python教程全套合集專案實戰(完整)Python
- 黑馬程式設計師匠心之作-4.2物件的初始化和清理程式設計師物件
- 黑馬程式設計師——Java學習筆記之⑧——“Java新技術”程式設計師Java筆記
- 黑馬程式設計師Java培訓和Android培訓:列舉程式設計師JavaAndroid
- 黑馬程式設計師Java培訓和Android培訓:I/O程式設計師JavaAndroid
- 黑馬程式設計師Java培訓和Android培訓_IO(二)程式設計師JavaAndroid
- 程式設計師的燈下黑:“逗到底”的程式設計師程式設計師
- 黑馬程式設計師:PHP為何能成最搶手後端語言?程式設計師PHP後端
- 黑馬程式設計師Java培訓和Android培訓:培訓前奏程式設計師JavaAndroid
- 黑馬程式設計師Java培訓和Android培訓:物件導向程式設計師JavaAndroid物件
- 黑馬程式設計師Java培訓和Android培訓:內部類程式設計師JavaAndroid
- 黑馬程式設計師_畢向東JAVA基礎_設計模式&異常處理機制程式設計師Java設計模式
- 黑馬程式設計師Linux系統開發視訊之VIM使用教程程式設計師Linux
- 【黑馬程式設計師西安中心】激動!剛剛人事給我發offer了.......程式設計師
- 黑馬程式設計師Java培訓和Android培訓:多執行緒程式設計師JavaAndroid執行緒
- 黑馬程式設計師Java培訓和Android培訓Java技術二程式設計師JavaAndroid
- 程式設計師、設計師、專案經理眼中的對方程式設計師
- 黑馬PM-電商專案-電商後臺