###### tags: `學期 3` [toc] # Vue 201 工作坊 ## Before Webinar ### 報名 Week 4 Vue 201 工作坊！ #### Week 4 Vue 201 工作坊 <div style="background: #ececec; padding: 15px; margin-bottom: 10px; border-radius: 10px ; min-width:450px; width:fit-content; font-weight: bold;"> 日期與時間：9/14 (三) 19:30 - 21:00 <br> 參加連結：<a href="https://zoom.us/j/83042012388" target="_blank">https://zoom.us/j/83042012388</a><br> 會議密碼：194678<br> <span style="color:#CE2D0F; font-size: 0.95rem; font-weight: bold;">注意：本次工作坊會邀請同學進行快問快答，請盡可能確保你的麥克風、攝影機可以使用，以利工作坊進行</span><br> <a class="btn btn-normal" target="_blank" href="https://calendar.google.com/event?action=TEMPLATE&tmeid=XzhkOWxjZ3JmZHByNmFzamtjZGg2YWQzNTZrczMwYzlsY29zbTJlMWxja3FtYWNyMTcwcTZhZGI0YzhwbTJkYjRjY28wIHM3aWJpNzh1MWdjbmE0cTlobW83OHBsaDI4QGc&tmsrc=s7ibi78u1gcna4q9hmo78plh28%40group.calendar.google.com">將行程添加到 Google 日曆</a> </div> 在這次工作坊中，你將： - 透過快問快答，理清前端框架、與 Vue.js 核心觀念 - 與助教一起開箱設計稿，更進一步思考元件拆分與資料傳遞的關係 #### 工作坊行前準備 為了確保你學習成效，我們建議你在參與工作坊前先完成： - 第 1 階段：完整實作完 [S2 前端開發：TodoMVC x Vue.js](https://lighthouse.alphacamp.co/courses/119/units/25830) 教案 - 第 2 階段：透過 [網紅切版平台的成品](https://codepen.io/alpha-camp/full/dyGPmve)，初步了解頁面結構與資料關係 - 第 3 階段：完成 [A5: MovieList x Vue.js：Round 1](https://lighthouse.alphacamp.co/courses/119/assignments/3604) 與 [A7: MovieList x Vue.js：Round 2](https://lighthouse.alphacamp.co/courses/119/assignments/3606) ##### 硬體設備準備 - <span style="background-color: #CE2D0F; color: #fff ; font-size: 0.9rem; padding: 0 5px; border-radius: 3px; font-weight: bold;">必備</span> 請確保你的「麥克風」可以開啟使用 - 如果是筆電使用者，通常筆電的麥克風即可收音，只要確保音訊有連接即可 - 如果是桌機使用者，或是筆電的麥克風無法使用(無法連接)，建議可以準備一個耳麥來使用（通常手機附的耳麥就很夠用了） - 或著你可以運用手機進行連線，透過手機的話筒進行問答 - 若同學方便，亦可測試「攝影機」是否可以使用，並且快問快答時若能開啟攝影機，與助教對話會更加友善 --- ### 9/14 Vue 201 工作坊 - 行前提醒 <div style="width:50%; margin: 0px auto"> <img style="max-width:800px; width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/17716/vue_201.png"> </div> 經歷了兩週 Vue.js 的學習，同學們都還上手嗎？ 在這次的 Vue 201 工作坊中，我們將更進一步理清前端框架 Vue.js 的核心觀念。 並與助教一起開箱「網紅廣告平台」設計稿，更進一步思考元件拆分與資料傳遞的關係！ 現在就去看看這次工作坊的行前準備吧 ➡️ [報名 Week 4 Vue 201 工作坊](https://lighthouse.alphacamp.co/courses/119/units/28399) <!-- https://lighthouse.alphacamp.co/courses/118/units/28400 --> <div style="width:100%"><img style="max-width:1000px; width:100%;" src="https://assets-lighthouse.s3.amazonaws.com/uploads/image/file/4416/banner_2.001.jpeg"></div> --- ## Webinar Update ### 【今晚 7:30 工作坊提醒】學期 3 前端：Vue 201 工作坊 經歷了兩週 Vue.js 的學習，同學們都還上手嗎？ 今天晚上 7:30 Vue 201 工作坊，將更進一步理清前端框架 Vue.js 的核心觀念！ 別忘記做行前準備，幫助自己更好吸收哦！我們晚上見！ #### 活動資訊 <div style="background: #ececec; padding: 15px; margin-bottom: 10px; border-radius: 10px ; min-width:450px; width:fit-content;"> • 活動時間：9/14 (三) 19:30 - 21:00<br> • 與會連結跟行前準備：請參考 <a href="https://lighthouse.alphacamp.co/courses/118/units/28400" target="_blank"> Vue 201 工作坊活動頁面</a> </div> <div style="width:100%"><img style="max-width:1000px; width:100%;" src="https://assets-lighthouse.s3.amazonaws.com/uploads/image/file/4416/banner_2.001.jpeg"></div> --- ## After Webinar ### Week 4 Vue 201 工作坊 -- 2022/8 月班會後精華 9 月 14 日的工作坊，助教 俊霖 利用程式碼範例講解了 DOM、template 及使用前端框架的差異及優缺點，並透過快問快答和同學互動，幫助同學釐清 Vue 的基礎觀念。 而在工作坊的最後，我們安排了實作練習，讓同學們實際體驗元件拆分的過程，再請助教講解他在實務開發中會如何拆分 vue 元件，以及分享處理畫面結構的技巧。 <div style="position: relative; width: 100%; height: 0; padding-bottom: 56.25%;"> <iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://player.vimeo.com/video/749819621?h=9fde868b80&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allowfullscreen> </iframe> </div> #### 活動使用投影片 ##### 工作坊 <div style="position: relative;width:100%;height:0;padding-bottom: 56.25%;"><iframe style="position:absolute;top:0;left:0;width:100%;height:100%" src="https://docs.google.com/presentation/d/e/2PACX-1vS9wr9QLThvsZu3Y460Nr2eSpk5vKLCZpuuKt5sIHf-3-3gF5vaO-CG5TSQDnLvULu8zMCSUI6yoBOo/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe></div> --- ## 9/14 Week 4 Vue 201 工作坊 - Highlights 9 月 14 日的工作坊，助教 俊霖 利用程式碼範例講解了 DOM、template 及使用前端框架的差異及優缺點，並透過快問快答和同學互動，幫助同學釐清 Vue 的基礎觀念。 而在工作坊的最後，我們安排了實作練習，讓同學們實際體驗元件拆分的過程，再請助教講解他在實務開發中會如何拆分 vue 元件，以及分享處理畫面結構的技巧。 <div style="width:100%"><img style="max-width:1000px; width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/22039/___2022-09-15___11.26.04.png"></div> <div style="height: 5px;"></div> <div style="display:flex; justify-content: space-between; background-color: #f6f6f6; border-radius:5px; font-size: 0.875rem; margin-bottom: 5px;"> <div style="width: 80%; padding: 2% 5%; display:flex; justify-content: space-between; align-items: center;"> 在了解前端Vue框架的概念中，讓自己理解有沒有使用框架的差異、以及框架所提供的優勢是什麼，讓自己清楚未來在學習上可以朝什麼樣的方式去準備。 也在網紅元件拆分箱練習到wireframe的切分，讓我收穫滿滿～ </div> <div style="width: 18%; display:flex; align-items: center; padding: 2% 0;"> <img style="max-height: 30px; border-radius: 50%; margin-right: 5px;" src="https://assets-lighthouse.alphacamp.co/uploads/user/photo/8704/medium_BMW.jpeg"> <p style="margin-block-start: 0.25em; margin-block-end: 0.25em;">Elliot</p> </div> </div> <div style="display:flex; justify-content: space-between; background-color: #f6f6f6; border-radius:5px; font-size: 0.875rem; margin-bottom: 5px;"> <div style="width: 80%; padding: 2% 5%; display:flex; justify-content: space-between; align-items: center;"> 助教直接開 devtool，看新增一筆 todo時會動到哪些 DOM節點。沒有想過可以用這方式看效能，這很實用 </div> <div style="width: 18%; display:flex; align-items: center; padding: 2% 0;"> <img style="max-height: 30px; border-radius: 50%; margin-right: 5px;" src="https://assets-lighthouse.alphacamp.co/uploads/user/photo/7308/medium_688A2EC5-7581-4A35-A2DD-3BD13976E63D.jpeg"> <p style="margin-block-start: 0.25em; margin-block-end: 0.25em;">Bun</p> </div> </div> 現在就去看看精彩的會後錄影吧 ➡️ [Week 4 Vue 201 工作坊 -- 2022/8 月班會後精華](https://lighthouse.alphacamp.co/courses/119/units/28399) https://lighthouse.alphacamp.co/courses/118/units/28400 <div style="width:100%"><img style="max-width:1000px; width:100%;" src="https://assets-lighthouse.s3.amazonaws.com/uploads/image/file/4416/banner_2.001.jpeg"></div> --- ## 備份 本工作坊設計為「Vue 框架新手入門」，助教 俊霖 介紹最基本的前端框架概念，以及 Vue 基礎指令與相關學習資源。 在工作坊中，助教從同學學過的 DOM 概念延伸，一邊介紹基礎指令，一邊介紹前端框架裡「資料驅動畫面」的核心概念。