---
tags: JavaScript 實戰班, Day21, Vue
---

# 設計魔劍三組

## 7/13：Day 21

上回回顧：面臨真心鎮警衛隊追殺之際，小明與小美即將離開真心鎮，重新過上新的生活。

離開前，小明希望可以留給漂亮阿姨一些話，同時解決這段時間所產生的誤會。突然一個陌生的圓手，拿出了 Vue 傳呼機。

小明：J 個是...

陌生的圓手：這是 Vue 的傳呼機，可以用來遠距離通訊使用，不過有點故障，就送給你吧。


說完，這隻手就消失在這個故事裡，並找劇組領了便當回家用餐。

透過小明的研究，了解到這個傳呼機與最近研究的 Vue 是屬於同一個技術，決定花些時間修正錯誤，將心裡的訊息傳遞給漂亮阿姨知道。

任務：

- 參考第四週[課程介紹](https://hackmd.io/@hexschool/HJDbvkFqU/%2FzYR8Trb-RYO0gctZWFpD4Q)、直播錄影、共筆文件，了解 Props 的運作
- 修正範例中的錯誤（三題，只需要調整 HTML）

[https://codepen.io/Wcc723/pen/eYJjgag?editors=1010](https://codepen.io/Wcc723/pen/eYJjgag?editors=1010)

---

### Ryan

<iframe height="265" style="width: 100%;" scrolling="no" title="Vue - Props" src="https://codepen.io/RyanYD/embed/wvMxJda?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/wvMxJda'>Vue - Props</a> by Ryan
(<a href='https://codepen.io/RyanYD'>@RyanYD</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

> 助教回覆：作業做的很好哦，有正確使用 Props 傳送訊息給漂亮阿姨喔 :+1:
>

---

### Vivian Chiang

<iframe height="265" style="width: 100%;" scrolling="no" title="Vue - Props" src="https://codepen.io/vivian820225/embed/jOWpmRQ?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/jOWpmRQ'>Vue - Props</a> by Vivian Chiang
(<a href='https://codepen.io/vivian820225'>@vivian820225</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

> 助教回覆：作業做的很好哦，有正確使用 Props 傳送訊息給漂亮阿姨喔 :+1:
>

---