vue30
Vue 30
本篇幅是 以 Javascript30 線上的教學課程為基礎修改而成的 Vue 3教程，皆基於 Composition API，在三十天的時間每天實作一個簡單的Vue作品並講解相關概念。 原教學網站：https://JavaScript30.com。 原Github位址：wesbos/Javascript30
view on github
以下是 demo 目錄：
| 單元 | 簡介 | Demo效果 | 詳解 |
|---|---|---|---|
| 1. Vue Drum kit | 實作按下鍵盤發出的效果 | 效果 | 詳解 |
| 2. Vue and CSS Clock | 以Vue及CSS實作時鐘 | 效果 | 詳解 |
| 3. Update CSS variable with Vue | 利用 CSS變數去改變CSS及JS的值造成效果 | 效果 | 詳解 |
| 4. Array Cardio Day 1 | 介紹 VueUse 來操作 ref array(filter, map, sort, reduce) | 無，用console操作 | 詳解 |
| 5. Flex Panel Gallery | 利用 flex 的特性及 transition 的動畫效果做出點擊後的效果呈現。 |
效果 | 詳解 |
| 6. Type Ahead | 介紹 Axios用 ajax的方式來取資料(城市名稱)，並依使用者輸入字符的不同查找不同的資料，會使用到正規表達式來處理字串。 |
效果 | 詳解 |
| 7. Array Cardio Day 2 | 介紹 VueUse 來操作 ref array 來操作(some()，every()，find()，findIndex()，利用也提到了關於splice(), slice(), ...)的應用。 |
無，用console操作 | 詳解 |
| 8. Fun with HTML5 Canvas | 本篇主要透過Html的canvas 標籤搭配Javascript做出畫布的效果。效果包括:顏色的變化(hsl)及軌跡的粗細縮放。 |
效果 | 詳解 |
| 9. Dev Tools Domination | 介紹常用的dev tool 以及vue tool ，增加開發javascript的除錯速度。 |
無，用console操作 | 詳解 |
| 10. Hold Shift and Check Checkboxes | 本篇主要是要實作透過點擊checkbox後按下shift鍵之後一次選取多個checkbox的功能。 | 效果 | 詳解 |
| 11. Custom Video Player | 製作一個客製化的撥放器。我們會把chrome預設的撥放器取消，然後放上客製化的撥放器。會學到關於撥放器的事件及屬性。 | 效果 | 詳解 |
| 12. Key Sequence Detection | 以前一定曾有過要輸入一段密碼之後會出現特定的畫面，稱為Key Sequence，要做的是如何偵測Key Sequence並產生特殊畫面。試著輸入’tim’看看 | 效果 | 詳解 |
| 13. Slide in on Scroll | 介紹一般網站上常出現的照片移入移出效果製作。當視窗移到照片的區域以動畫方式出現。 | 效果 | 詳解 |
| 14. JavaScript References VS Copying | 介紹Javascript賦值時，何時是用copy，何時是用reference。 | 無，用console操作 | 詳解 |
| 15. LocalStorage and Event Delegate | 介紹:LocalStorage的使用以及 Event Delegate的介紹 |
效果 | 詳解 |
| 16. Mouse Move Shadow | 實作的是滑鼠在圖片的四周移動，會產生不一樣的效果，會應用到offset的操作。 |
效果 | 詳解 |
| 17. Sort Without Articles (未) | 透過編排文章排序來複習sort, map, join 及replace, trim的使用。 |
效果 | 詳解 |
| 18. Adding Up Time With Reduce (未) | 透過計算複數影片的長度來複習reduce及map的應用。 |
效果 | 詳解 |
| 19. WebCam Fun (未) | 使用原生的Javascript來驅動webcam來紀錄影像資訊，並輸出到canvas上，並用canvas對圖像進行拍照及濾鏡處理。 |
效果 | 詳解 |
| 20. Speech Detection | 介紹如何使用browser內建的語音轉換APIweb speech api。須注意和昨日相同，需要同意授權使用麥克風才能使用API，同理也需要建置本地端伺服器。 |
效果 | 詳解 |
| 21. Geolocation (未) | 介紹如何使用Navigator.geolocation的API去擷取當前的地理位置狀況，包含 指向 及 速度。 |
效果 | 詳解 |
| 22. Follow Along Link Highlight (未) | 當游標移往含有a的element時，加入span，並在span在加入style用css做出反白的動畫效果。 |
效果 | 詳解 |
| 23. Speech Synthesis (未) | 使用SpeechSynthesisUtterance物件，透過可以驅動瀏覽器說話的APIspeechSynthesis，來實作類似google小姐的說話(utterance)功能，包含講話速度(rate)及音頻(pitch)的高低。 |
效果 | 詳解 |
| 24. Sticky Nav (未) | 介紹的是如何實作當scroll超過Nav時，把Nav 固定在上方的效果。 | 效果 | 詳解 |
| 25. Event Capture, Propagation, Bubbling and Once(未) | 介紹關於DOM事件的機制:Event Capture(事件捕捉), Event Bubbling(事件冒泡), Propagation, 及Once(單次執行)。要打開console看結果 | 效果 | 詳解 |
| 26. Stripe Follow Along Nav (未) | 製作當滑鼠在NAV橫移時產生的動畫內容 | 效果 | 詳解 |
| 27. Click and Drag (未) | 實作滑鼠點擊後(mousedown)，左右橫移移動內容的效果。 |
效果 | 詳解 |
| 28. Video speed controller | 製作控制撥放速度的bar，及套用在video上。 | 效果 | 詳解 |
| 29. Countdown Timer | 製作倒數計時，可點選已經設置好的時間及可自行輸入時間的功能。 | 效果 | 詳解 |
| 30. Whack a Hole! | 實作的打地鼠的遊戲，打地鼠的內容如下: 有六個洞會隨機出現地鼠，對著地鼠點擊即可得一分，遊戲時間10秒鐘。 | 效果 | 詳解 |