---
tags: JavaScript 實戰班, Daily JS
---

# 設計魔劍二組 每日任務(6/29)

## Day 16 任務 (6/29)

#### 任務說明

- 閱讀[課前預習](https://hackmd.io/@hexschool/S1DJeKTdL/%2FRhud3_1PR9qv1RJyMfwUmA)
- 測驗 1：將小美所準備好的 Vue 資料呈現於畫面上（只能操作 HTML）
https://codepen.io/Wcc723/pen/jOWLdeZ
- 測驗 2：小明也要玩玩看：前方已經有小美所準備好的 {{ }}，請試著把 data 補上，讓畫面可運作
https://codepen.io/Wcc723/pen/OJMjdap

#### 繳交作業說明：

請 fork 課程中所提供的 Codepen，並以 iframe 的方式內嵌於團隊內的 HackMD


iframe 範例（同上，選擇右下方的 Embed 的 iframe 選項）

<iframe height="265" style="width: 100%;" scrolling="no" title="Vue 將資料呈現於畫面上" src="https://codepen.io/Wcc723/embed/jOWLdeZ?height=265&theme-id=light&default-tab=js,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/Wcc723/pen/jOWLdeZ'>Vue 將資料呈現於畫面上</a> by Wcc723
(<a href='https://codepen.io/Wcc723'>@Wcc723</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

#### 學習重點

- 著重在 Vue 的 **語法認識**
- 運作的觀念會在直播課程中做介紹
---

#### YC
測驗一
[codepen](https://codepen.io/YC_Chang/pen/YzwrWBx)

測驗二
[codepen](https://codepen.io/YC_Chang/pen/RwrLRdx)

> 助教回覆：作業做的很好哦，Vue 操作的很正確 :+1:

#### JimmyWu
測驗一
<iframe height="265" style="width: 100%;" scrolling="no" title="Vue 創建資料" src="https://codepen.io/Jimmy_Wu/embed/wvMrWbY?height=265&theme-id=light&default-tab=js,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/Jimmy_Wu/pen/wvMrWbY'>Vue 創建資料</a> by Jimmy_Wu
(<a href='https://codepen.io/Jimmy_Wu'>@Jimmy_Wu</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

測驗二
<iframe height="265" style="width: 100%;" scrolling="no" title="Vue 將資料呈現於畫面上" src="https://codepen.io/Jimmy_Wu/embed/JjGrKgE?height=265&theme-id=light&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/Jimmy_Wu/pen/JjGrKgE'>Vue 將資料呈現於畫面上</a> by Jimmy_Wu
(<a href='https://codepen.io/Jimmy_Wu'>@Jimmy_Wu</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

> 助教回覆：作業做的很好哦，Vue 操作的很正確 :+1:

#### Gaga (任務補交)
Day 13 解構 (6/29 補交)
[codepen 連結](https://codepen.io/gagajia/pen/MWKEJwP)
> 助教回覆：作業做的很好哦，Vue 操作的很正確 :+1:

Day 14 參數(6/29 補交)
[codepen 連結](https://codepen.io/gagajia/pen/RwrLKgp)
> 助教回覆：作業做的很好哦，Vue 操作的很正確 :+1:

Day 15 ES6 縮寫(6/29 補交)
[codepen 連結](https://codepen.io/gagajia/pen/gOPGgQv)
> 助教回覆：作業做的很好哦，Vue 操作的很正確 :+1: