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

# 設計魔劍三組

## 7/2：Day 19

透過幾個英雄卡片的協助，小明與小美終於擺脫了真心鎮警力的追捕，不過謹慎的小美決定在家裡的周圍擺上陷阱，避免夜間時遭受偷襲。

任務：

- 閱讀 v-on 的課前[預習章節](https://hackmd.io/@hexschool/S1DJeKTdL/%2FvMG7FM1GSBafDKCZXuylCw)
- 將陷阱事件綁定於 button 標籤上（可使用縮寫的形式）

測驗：https://codepen.io/Wcc723/pen/WNrEmqW?editors=1010

---
### Vivian Chiang

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

> 助教回覆：作業做的很好哦，v-on 事件設置的很正確 :+1:
>

---

### Jerry

<iframe height="265" style="width: 100%;" scrolling="no" title="7/2：Day 19" src="https://codepen.io/x82072002/embed/ExPoNNv?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/ExPoNNv'>7/2：Day 19</a> by Lu,Shao-Chuan
(<a href='https://codepen.io/x82072002'>@x82072002</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

> 助教回覆：作業做的很好哦，v-on 事件設置的很正確 :+1:
>

補繳 7/1：Day 18任務

<iframe height="265" style="width: 100%;" scrolling="no" title="7/1：Day 18" src="https://codepen.io/x82072002/embed/XWXVNMg?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/XWXVNMg'>7/1：Day 18</a> by Lu,Shao-Chuan
(<a href='https://codepen.io/x82072002'>@x82072002</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

>助教回覆：作業做的很好哦，v-for 、 v-bind 使用的很正確 :+1:
>

補繳 6/30：Day 17任務

<iframe height="265" style="width: 100%;" scrolling="no" title="6/30 : Day 17" src="https://codepen.io/x82072002/embed/RwrxopE?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/RwrxopE'>6/30 : Day 17</a> by Lu,Shao-Chuan
(<a href='https://codepen.io/x82072002'>@x82072002</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

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

### Yoyo

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

> 助教回覆：作業做的很好哦，v-on 事件設置的很正確 :+1:

---