---
tags: 直播班
---

# 💪 每日任務題目列表

## 7/17：Day 25

經過一番研究以後，小明終於完成了元件的上下通訊，不過就在此時神秘的手又再度出現。

小明：你怎麼還在這邊

神秘的手：我要下班了，不過劇組要我再送個貨給你，並說明是漂亮阿姨要給你的。


小明接過貨：這個是...（打開看起來是一支手機）

神秘的手又再次消失。

故事回到一天前：這支手機是由漂亮阿姨所開發，是基於 Event Bus 傳遞事件的工具，專門作為跨組件通訊使用。漂亮阿姨發現真心鎮裡面似乎有神秘的黑暗勢力，因此想要盡快完成此行動裝置，並尋找小明回來幫忙...。

任務：

- 使用 Event Bus 的觀念，完成跨組件通訊
- 本範例需要調整兩個元件內的 JS 原始碼，補上 $emit, $on 並能夠將 auntie-phone 的元件資料發送至 ming-phone 內。
- 本範例不需要調整 HTML 的結構

任務連結：[https://codepen.io/Wcc723/pen/oNbMZyV?editors=1010](https://codepen.io/Wcc723/pen/oNbMZyV?editors=1010)

## 7/16：Day 24

完成由內向外推送資訊的小明，覺得可以更進一步的將先前的 props 整合進來，將整個 mobile-phone 的元件功能更加完善。

小明：好餓喔...，看我五分鐘內完成這個功能！

任務：

- 請維持單向數據流，避免直接修改外部的資料
- 本範例需要調整 mobile-phone 的 JS 原始碼，其中包含：
- data 的運行
- 如何避免直接調整到外部資料的原始碼（v-model, data）
- 完成 pushData 的函式，並與元件中的 @push="getMessage" 進行對應
- 需要正確將內部資訊向外傳遞（關鍵口訣：前內後外）

任務連結：[https://codepen.io/Wcc723/pen/RwrBpQX?editors=1010](https://codepen.io/Wcc723/pen/RwrBpQX?editors=1010)

## 7/15：Day 23

小明將自己的神作 BBCall 拿給小美看，小美覺得沒有什麼，這只不過是單純向內傳遞的技巧，因此要和小明介紹另一個技巧，由內向外傳遞。

小美：這段就是使用 $emit

小明：嗯嗯，這邊我準備好了，然後呢...

小美：...（糟糕，忘記了）

小美：那個...，晚餐快煮好了，我去收尾一下（迅速溜走）

小明：誒誒，今天晚餐不是已經在桌上了嗎？

任務：
- 請協助小明完成由元件內向外傳遞
- 本範例只需要調整 mobile-phone 的 HTML 屬性
- 需要正確將內部資訊向外傳遞（關鍵口訣：前內後外）

任務連結：[https://codepen.io/Wcc723/pen/rNxryYp?editors=1010](https://codepen.io/Wcc723/pen/rNxryYp?editors=1010)

## 7/14：Day 22

經過拆解以後，發現神秘之手所拿來的傳呼機，就是透過 Vue 所建構的，因此，小明親自改造了傳呼機的構造，預期可以傳遞更多的訊息。

小明預期可以一次發送三筆資訊，甚至可以傳遞資訊，請協助小明完成這項改變（小明覺得這樣的調整簡直是天才）。

任務：

- 本範例只能調整 **super-bbcall HTML 屬性**及**元件內的 props 內容**
- 範例包含兩個字串及一個陣列，皆需要正確呈現

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

## 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)

#### 繳交作業說明：

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


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

<iframe height="265" style="width: 100%;" scrolling="no" title="Vue 將資料呈現於畫面上" src="https://codepen.io/Wcc723/embed/eYJjgag?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/eYJjgag'>Vue 將資料呈現於畫面上</a> by Wcc723
(<a href='https://codepen.io/Wcc723'>@Wcc723</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

---