---
# System prepended metadata

title: 設計魔劍三組
tags: [JavaScript 實戰班, ' Day16']

---

---
tags: JavaScript 實戰班, Day16
---


# 設計魔劍三組

## 6/29：Day 16

真心鎮的警備隊在小明進入城鎮時，就開始部署大量的警力，準備抓捕小明。小明雖然很快速地搭上小美的卡車，但後方的警力依然不斷的追上，就算是掌握 ES6 技能的小美也難以應對這麼大量的警力...

小美：沒辦法了，只好用出這招（從背後拿出大捲軸攤開）

![](https://i.imgur.com/R6EGW8Y.png)

小明：J 格是....

小美：這是基於 JS 能力所封印的捲軸，解開以後可以快速的運用各種術

小美：你來開車，我來阻止他們！

小明：可是我沒駕照啊～～～

小美拍了小明肩膀說：「沒關係，我也沒有」，說完話後立刻轉身後飛躍到卡車後方，開始進行 Vue 的術式。

#### 任務

- 閱讀[課前預習](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

![](https://i.imgur.com/uD7iszx.png)

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 的 **語法認識**
- 運作的觀念會在直播課程中做介紹

---

### Yoyo

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

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

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


### Ryan
測驗1：

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


測驗2：

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

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

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

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

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

### Jerry
測驗一：
<iframe height="265" style="width: 100%;" scrolling="no" title="Vue test1" src="https://codepen.io/x82072002/embed/qBbPpeK?height=265&theme-id=dark&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/x82072002/pen/qBbPpeK'>Vue test1</a> by Lu,Shao-Chuan
  (<a href='https://codepen.io/x82072002'>@x82072002</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

測驗二：
<iframe height="265" style="width: 100%;" scrolling="no" title="qBbPxWK" src="https://codepen.io/x82072002/embed/qBbPxWK?height=265&theme-id=dark&default-tab=js,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/x82072002/pen/qBbPxWK'>qBbPxWK</a> by Lu,Shao-Chuan
  (<a href='https://codepen.io/x82072002'>@x82072002</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

> 助教回覆：作業做的很好哦，Vue 操作的很正確 :+1:
>同學是我看到最寫實的 XD
---