---
# System prepended metadata

title: Vue 201 工作坊
tags: [學期 3]

---

###### 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 概念延伸，一邊介紹基礎指令，一邊介紹前端框架裡「資料驅動畫面」的核心概念。

