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把本機的網站埠對映到外網
下載地址:百度網盤
相關文章
- 黑馬程式設計師程式設計師
- 黑馬程式設計師Android實戰影片教程等,超過30程式設計師Android
- 黑馬程式設計師前端學習之路程式設計師前端
- 黑馬程式設計師第七天程式設計師
- 【黑馬程式設計師濟南中心】代理模式-Cglib代理程式設計師模式CGLib
- 最新Python教程全套合集專案實戰(完整)Python
- 【黑馬程式設計師濟南中心】java基礎-陣列程式設計師Java陣列
- 程式設計師【黑話】指南程式設計師
- Rust程式設計與專案實戰-結構體Rust程式設計結構體
- 黑馬程式設計師匠心之作-4.2物件的初始化和清理程式設計師物件
- 黑馬程式設計師Linux系統開發視訊之VIM使用教程程式設計師Linux
- Python專案實戰(一)《Python程式設計 從入門到實踐》Python程式設計
- 為什麼大多程式設計師黑php不黑python?程式設計師PHPPython
- [MAUI 專案實戰] 筆記App(一):介紹與程式設計UI筆記APP程式設計
- Python專案實戰:20行程式設計迷宮大陣Python行程程式設計
- 開課吧Web全棧架構師正式課(Vue.JS及實戰專案)Web全棧架構Vue.js
- 不黑程式設計師會死星人程式設計師
- 誰再黑程式設計師我就打誰程式設計師
- 【黑馬程式設計師西安中心】激動!剛剛人事給我發offer了.......程式設計師
- 程式設計師自黑的梗!產品經理:功能實現起來很簡單!—程式設計師:*&%程式設計師
- 程式設計師到底是幹什麼的?請不要再黑程式設計師了程式設計師
- @程式設計師:GitHub這個專案快薅羊毛程式設計師Github
- 程式設計師如何修煉專案管理能力?程式設計師專案管理
- <數字IC設計> 實戰專案之GPIO埠設計 3
- 千鋒UI設計專案全套影片合集,教你如何快速UI設計入門UI
- 玩轉 PHP 網路程式設計全套之多程式程式設計PHP程式設計
- 黑馬程式設計師匠心之作|C++教程從0到1入門程式設計--結構體定義和使用程式設計師C++結構體
- 好程式設計師web前端分享js實現實戰案例程式設計師Web前端JS
- 幽默:程式設計師在專案開始和專案結束的狀態程式設計師
- 一個天才程式設計師的黑幫大佬人生程式設計師
- socket程式設計實戰程式設計
- 黑馬PM-電商專案-財務管理
- 黑馬PM-內容專案-內容管理
- 2019最新實戰!給程式設計師的7節深度學習必修課,最好還會Python!程式設計師深度學習Python
- springboot的web練手專案,適合新手,以及初級程式設計師專案實戰,也適合老手進行二次開發的眾多專案Spring BootWeb程式設計師
- 網際網路程式設計師行話(黑話)合集程式設計師
- 程式設計師高薪盛宴背後:程式設計師其實正在消失?程式設計師高薪
- 玩轉 PHP 網路程式設計全套之 socket stream 程式設計PHP程式設計