---
# System prepended metadata

title: 第一週作業
tags: [2024 Vue 前端新手營 - Composition API]

---

本文件連結：https://hackmd.io/O77_fHkGRnm8rPpMcOhh4g

# 第一週作業繳交

## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 
解答位置請參考下圖（需打開程式碼的部分觀看）

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

【題目】：
餐點管理工具

- Level 1：將菜單轉為資料格式
- Level 2：可以重新設定菜單的庫存數量
- Level 3（挑戰）：可以重新設定品項名稱

```html
<table>
  <thead>
    <tr>
      <th scope="col">品項</th>
      <th scope="col">描述</th>
      <th scope="col">價格</th>
      <th scope="col">庫存</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>珍珠奶茶</td>
      <td><small>香濃奶茶搭配QQ珍珠</small></td>
      <td>50</td>
      <td><button>-</button>20<button>+</button></td>
    </tr>
    <tr>
      <td>冬瓜檸檬</td>
      <td><small>清新冬瓜配上新鮮檸檬</small></td>
      <td>45</td>
      <td><button>-</button>18<button>+</button></td>
    </tr>
    <tr>
      <td>翡翠檸檬</td>
      <td><small>綠茶與檸檬的完美結合</small></td>
      <td>55</td>
      <td><button>-</button>34<button>+</button></td>
    </tr>
    <tr>
      <td>四季春茶</td>
      <td><small>香醇四季春茶，回甘無比</small></td>
      <td>45</td>
      <td><button>-</button>10<button>+</button></td>
    </tr>
    <tr>
      <td>阿薩姆奶茶</td>
      <td><small>阿薩姆紅茶搭配香醇鮮奶</small></td>
      <td>50</td>
      <td><button>-</button>25<button>+</button></td>
    </tr>
    <tr>
      <td>檸檬冰茶</td>
      <td><small>檸檬與冰茶的清新組合</small></td>
      <td>45</td>
      <td><button>-</button>20<button>+</button></td>
    </tr>
    <tr>
      <td>芒果綠茶</td>
      <td><small>芒果與綠茶的獨特風味</small></td>
      <td>55</td>
      <td><button>-</button>18<button>+</button></td>
    </tr>
    <tr>
      <td>抹茶拿鐵</td>
      <td><small>抹茶與鮮奶的絕配</small></td>
      <td>60</td>
      <td><button>-</button>20<button>+</button></td>
    </tr>
  </tbody>
</table>
```

範例：https://www.casper.tw/2024-vue-homework/#/week1


:::info


|        Level        | 說明                           |
|:-------------------:|:------------------------------ |
|   **（原版）LV1**   | **將菜單轉為資料格式**         |
|   **（原版）LV2**   | **可以重新設定菜單的庫存數量** |
| **（原版挑戰）LV3** | **還能再去設定品項名稱**         |
:::

---

|  #   | Level |   Discord    | CodePen / 答案                                                                                                                                            |
|:----:|:----- |:------------:|:--------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 範例 | LV1   |    卡斯伯    | [GitHub](https://github.com/Wcc723) / [GitHub Pages](https://github.com/Wcc723)                                                                           |
|  1   | LV3   |   Letitia    | [GitHub](https://github.com/letitia-chiu/hexschool-vue-2024-w1-homework) / [GitHub Pages](https://letitia-chiu.github.io/hexschool-vue-2024-w1-homework/) |
|  2   | LV3   |   Eric0823   | [GitHub](https://github.com/eyeshot0823/vue-2024-week01) / [GitHub Pages](https://eyeshot0823.github.io/vue-2024-week01/)                                 |
|  3   | LV3   | Aaron 謝宗佑 | [GitHub](https://github.com/happyloa/Hex2024-Vue-Week1-Homework) / [GitHub Pages](https://happyloa.github.io/Hex2024-Vue-Week1-Homework/)                               |
|  4   | LV3   |    Hilda     | [GitHub](https://github.com/HildaTseng) / [GitHub Pages](https://hildatseng.github.io/Vue-Composition-API-Week1/)                                         |
|  5   | LV3   |    YiShan    | [GitHub](https://github.com/nju6g0/vue-practice/blob/main/src/views/OrderView.vue) / [GitHub Pages](https://nju6g0.github.io/vue-practice/#/order)                                     |
|  6   | LV3   |    mu mu     | [GitHub](https://github.com/ishuki916/for-first-vite) / [GitHub Pages](https://ishuki916.github.io/for-first-vite/)                                       |
|  7   | LV3   |  客家鬍渣貓  | [GitHub](https://github.com/DioDeng/vite-homework-2024) / [GitHub Pages](https://diodeng.github.io/vite-homework-2024/#/week1)                                   |
|  8   | LV2   |     Vian     | [GitHub](https://github.com/vianwu33116/vue-practice) / [GitHub Pages](https://vianwu33116.github.io/vue-practice/)                                       |
|  9   | LV3   |     rjjq     | [GitHub](https://github.com/rjjq/2024-vue-week1-hw) / [GitHub Pages](https://rjjq.github.io/2024-vue-week1-hw/)                                           |
|  10  | LV3   |  Doris_CYW   | [GitHub](https://github.com/ChungYaWen/for-vite-2024/tree/main/vite-sample) / [GitHub Pages](https://chungyawen.github.io/for-vite-2024/)                 |
|  11  | LV3   |     Shin     | [GitHub](https://github.com/penspulse326/vue-camp-week-1) / [GitHub Pages](https://penspulse326.github.io/vue-camp-week-1/)                                                                              |
|  12  | LV3   |     小葉     | [GitHub](https://github.com/maggie19921001/vite-01.2) / [GitHub Pages](https://maggie19921001.github.io/vite-01.2/)                                       |
|  13  | LV3   |  Terry.D    |  [GitHub](https://github.com/softwaltz/hexschoolVueWeek1) / [GitHub Pages](https://softwaltz.github.io/hexschoolVueWeek1/) |
| 14 | LV3   |    suandme   | [GitHub](https://github.com/suandme/vue-w1-homework) / [GitHub Pages](https://suandme.github.io/vue-w1-homework/)                                                                         |
| 15   | LV3   |  Aden    |  [GitHub](https://github.com/spikesandmaen484/vue-week-1) / [GitHub Pages](https://spikesandmaen484.github.io/vue-week-1/) |
| 16   | LV3   |  Tatsu    |  [GitHub](https://github.com/chindesu0207/hexschool-vue-week01) / [GitHub Pages](https://chindesu0207.github.io/hexschool-vue-week01/) |
| 17   | LV3   |  皮克    |  [GitHub](https://github.com/bad527/firstweek-home) / [GitHub Pages](https://bad527.github.io/firstweek-home/) |
| 18   | LV3   |  youting    |  [GitHub](https://github.com/youtingluo/vue-composition-week1) / [GitHub Pages](https://youtingluo.github.io/vue-composition-week1/) |
| 19   | LV3   | 雷蒙レイ    |  [GitHub](https://github.com/Raymond870307/hex2024-vue-week1) / [GitHub Pages](https://raymond870307.github.io/hex2024-vue-week1/) |
| 20   | LV3   | Johnson    |  [GitHub](https://github.com/tttom3669/2024_hex_vue_homework) / [GitHub Pages](https://tttom3669.github.io/2024_hex_vue_homework/#/homework_1) |
| 21   | LV3   | Anthy7154    |  [GitHub](https://github.com/anthy7154/sso-vue2024-week01) / [GitHub Pages](https://anthy7154.github.io/sso-vue2024-week01/) |
| 22   | LV3   | smart    |  [GitHub](https://github.com/KUO-CHIH-YU/vite-week-2024) / [GitHub Pages](https://kuo-chih-yu.github.io/vite-week-2024/) |
| 23   | LV3   | anderson666    |  [GitHub](https://github.com/goodmanbuild/vue-camp-week1) / [GitHub Pages](https://goodmanbuild.github.io/vue-camp-week1/) |
| 24   | LV3   | Ariel  |  [GitHub](https://github.com/Ariel0508/Meal-management-tool) / [GitHub Pages](https://ariel0508.github.io/Meal-management-tool/) |
| 25   | LV3   | 貢波波夫  |  [GitHub](https://github.com/Henry-Liu0719/HW1_2024VueComposition) / [GitHub Pages](https://henry-liu0719.github.io/HW1_2024VueComposition/) |
| 26   | LV3   | 末次  |  [GitHub](https://github.com/syunjulee/2024-vue-week1) / [GitHub Pages](https://syunjulee.github.io/2024-vue-week1/) |
| 27   | LV3   | SKey  |  [GitHub](https://github.com/syunjulee/2024-vue-week1) / [GitHub Pages](https://github.com/cyberseris/vue-2024-week01) |
| 28   | LV3   | 好了啦  |  [GitHub](https://github.com/ZhangZJ0906/Vue-HomeWork) / [GitHub Pages](https://zhangzj0906.github.io/Vue-HomeWork/) |
| 29   | LV3   | 阿B | [GitHub](https://jfu90.github.io/vue-homework-week1/) / [GitHub Pages](https://jfu90.github.io/vue-homework-week1/)|
| 30   | LV3   | Rumi | [GitHub](https://github.com/TzuruC/vue-w1-storage-list) / [GitHub Pages](https://tzuruc.github.io/vue-w1-storage-list/)|
| 31   | LV2   | willy0719 | [GitHub](https://github.com/TWBY/first-vue-pratice) / [GitHub Pages](https://twby.github.io/first-vue-pratice/)|
| 32   | LV3   | ling | [GitHub](https://github.com/huahhuah/Vue-Workspace-2024) / [GitHub Pages](https://huahhuah.github.io/Vue-Workspace-2024)|
| 33   | LV3   | Zhu | [GitHub](https://github.com/GitHubPlayerZero/hex-vue3-practise/blob/main/src/views/homework/WorkWeek1.vue) / [GitHub Pages](https://githubplayerzero.github.io/hex-vue3-practise/#/homework/week1)|
| 34   | LV3   | Mina | [GitHub](https://github.com/yanling-99/2024-hex-hw) / [GitHub Pages](https://yanling-99.github.io/2024-hex-hw/)|
| 35   | LV2   | Jy | [GitHub](https://github.com/judychang789/2024vueweek01) / [GitHub Pages](https://judychang789.github.io/2024vueweek01/)|
| 36   | LV3   | Mika | [GitHub](https://github.com/mikachou90/vue-week01-practice) / [GitHub Pages](https://mikachou90.github.io/vue-week01-practice/)|
| 37   | LV3   | Allen | [GitHub](https://github.com/klin0024/vue-2024-week01) / [GitHub Pages](https://klin0024.github.io/vue-2024-week01/)|
| 38   | LV3   | imsmallnew | [GitHub](https://github.com/imsmallnew/vue-2024-week01-hw) / [GitHub Pages](https://imsmallnew.github.io/vue-2024-week01-hw/)|
| 39   | LV3   | Shinek | [GitHub](https://github.com/shinek031/vue-week01) / [GitHub Pages](https://shinek031.github.io/vue-week01/)|
| 40   | LV3   | Will | [GitHub](https://github.com/Chouwill/hexschool-Vue-2024.git) / [GitHub Pages](https://chouwill.github.io/Vite_2024/)|
| 41   | LV3   | 77 | [GitHub](https://github.com/kana7777/musical-journey/tree/main/allmax) / [GitHub Pages](https://kana7777.github.io/musical-journey/)|
| 42   | LV3   | 阿鵝 | [GitHub](https://github.com/noracami/vue-beginner-2024-summer) / [GitHub Pages](https://noracami.github.io/vue-beginner-2024-summer)|
| 43  | LV3   | An | [GitHub](https://github.com/andrewchou921/vue-2024) / [GitHub Pages](https://andrewchou921.github.io/vue-2024/)|
| 44  | LV3   | Victor Lin | [GitHub](https://github.com/victorHLin/VuePractice/tree/main/VueHW) / [GitHub Pages](https://victorhlin.github.io/VuePractice/)|
| 45  | LV1   | Ray Chen | [GitHub](https://github.com/RayChen1996/vue-camp-week1/tree/gh-pages) / [GitHub Pages](https://codingspace.raychen1996.us.kg/vue-camp-week1/)|
| 46  | LV3   | Yuwen | [GitHub](https://github.com/santosnina/vue-week1) / [GitHub Pages](https://santosnina.github.io/vue-week1/)|
|47|LV3|HsienLu|[Github](https://github.com/HsienLu/hex-vite-camp) / [GitHub Pages](https://hsienlu.github.io/hex-vite-camp/)|
|48|LV3|kuolun|[Github](https://github.com/kuolun/hex-vue3-wk1) / [GitHub Pages](https://kuolun.github.io/hex-vue3-wk1/)|
|49|LV3|cherylxie|[Github](https://github.com/cherylxie912/hex-vue2024-week1) / [GitHub Pages](https://cherylxie912.github.io/hex-vue2024-week1/)|
|50|LV3|ErinFeng|[Github](https://github.com/murfeefeng/vue-week1) / [GitHub Pages](https://murfeefeng.github.io/vue-week1/)|
|51|LV3|IanChen|[Github](https://github.com/cheni0915/2024-vue-homework-week1) / [GitHub Pages](https://cheni0915.github.io/2024-vue-homework-week1/)|
| 52  | LV3   | dodo | [GitHub](https://github.com/MissDouble/2024-vue-works) / [GitHub Pages](https://missdouble.github.io/2024-vue-works/)|
| 53  | LV3   | yen-chun-hao | [GitHub](https://github.com/yen-chun-hao/vue-work-01) /  [GitHub Pages](https://yen-chun-hao.github.io/vue-work-01/)|
| 54 | LV3 | 蛋黃 |[Github](https://github.com/yiyun12o9/2024-vue-homework-week1) /  [GitHub Pages](https://yiyun12o9.github.io/2024-vue-homework-week1/)
| 55 | LV2 | zhen |[Github](https://github.com/zzzzheno/vue-week1) /  [GitHub Pages](https://zzzzheno.github.io/vue-week1/)
| 56 | LV3 | Timo |[Github](https://github.com/timothy833/-HexagonClass.git) /  [GitHub Pages](https://timothy833.github.io/-HexagonClass/)
| 56 | LV3 | Barry1104 |[Github](https://github.com/barrychen1104/vue-2024-week01-hw) /  [GitHub Pages](https://barrychen1104.github.io/vue-2024-week01-hw/)
| 57 | LV3 | Leo |[Github](https://github.com/LeoZheng888/for-vite-202040801) /  [GitHub Pages](https://leozheng888.github.io/for-vite-202040801/)
| 58 | LV3 | chichi |[Github](https://github.com/chichihuang93076/2024vue-week1) /  [GitHub Pages](https://chichihuang93076.github.io/2024vue-week1/)
| 59 | LV3 | EmptyWu |[Github](https://github.com/EmptyWu/ViteVue2024_Week1) /  [GitHub Pages](https://emptywu.github.io/ViteVue2024_Week1/)
| 60 | LV3 | regal |[Github](https://github.com/regal1218/for-vite-2024) /  [GitHub Pages](https://regal1218.github.io/for-vite-2024/)
| 61 | LV3 | sandra191919 |[Github](https://github.com/sandralu11/vue-2024) /  [GitHub Pages](https://sandralu11.github.io/vue-2024/)
| 62 | LV2 | 陳小廷 |[Github](https://github.com/SmallTing1124/HS2024-vue-camp-week1) /  [GitHub Pages](https://smallting1124.github.io/HS2024-vue-camp-week1//)
| 63 | LV3 | Anna |[Github](https://anna971053.github.io/vue-week1-homework/) /  [GitHub Pages](https://anna971053.github.io/vue-week1-homework/)
| 64 | LV3 | Jay | [Github](https://wowohello.github.io/Vite-2024-week1/) /  [GitHub Pages](https://github.com/wowoHello/Vite-2024-week1.git)
| 65 | LV3 | Chiru | [Github](https://github.com/ChiruSun/2024Vue_camping_week_1) /  [GitHub Pages](https://chirusun.github.io/2024Vue_camping_week_1/)
| 66 | LV3 | Raon😎 | [Github](https://github.com/ryanchen1994/vue-2024-week01) /  [GitHub Pages](https://ryanchen1994.github.io/vue-2024-week01/)
| 67 | LV3  | ya_meow |[Github](https://github.com/Mingx1994x/HS_lesson_vite-practice) / [Github pages](https://mingx1994x.github.io/HS_lesson_vite-practice/)|
| 68 | LV2  | ChunWei |[Github](https://github.com/Chen-Chun-Wei/vite-deploy-20240804) / [Github pages](https://chen-chun-wei.github.io/vite-deploy-20240804/)|
| 69 | LV3  | Y1111111 |[Github](https://github.com/y1111111/2024-vue-week01) / [Github pages](https://y1111111.github.io/2024-vue-week01/)|
| 70 | lv3 | zaoannihao | [Github](https://github.com/chenyu-0721/vuehomework1) / [Github Pages](https://chenyu-0721.github.io/vuehomework1/)|
| 71 | lv3 | ralphsun73221 | [Github](https://github.com/ralphsun73221/Vue2024-Week1) / [Github Pages](https://ralphsun73221.github.io/Vue2024-Week1/)|
| 72 | lv3 | Tough life | [Github](https://github.com/hakuei0115/Vue_project) / [Github Pages](https://hakuei0115.github.io/Vue_project/)|
| 73 | lv2 | oyll | [Github](https://github.com/dizzydog-rgb/Vue-week1-homework.git) / [Github Pages](https://dizzydog-rgb.github.io/Vue-week1-homework/)|
| 74 | LV3 |  floya9733   | [GitHub](https://github.com/tzu68/Vue_W1) / [GitHub Pages](https://tzu68.github.io/Vue_W1/) |
| 75 | Lv3 | KK(kai.5075) | [GitHub](https://reurl.cc/adaAEl) / [GitHub Pages](https://reurl.cc/NlZz5p)|
| 76 | Lv3 | YO | [GitHub](https://github.com/Y-1717/2024-vue-practices/blob/main/src/components/Week1Item.vue) / [GitHub Pages](https://y-1717.github.io/2024-vue-practices/)|
| 77 | Lv3 | Kevin Cheng | [GitHub](https://github.com/isolatedp/week1-vue) / [GitHub Pages](https://github.com/isolatedp/week1-vue)|
| 78 | Lv3 | Kevin Wei | [GitHub](https://github.com/kevin21305991/hexschool-2024-vue3/blob/main/src/views/Week1.vue) / [GitHub Pages](https://hexschool-2024-vue3.vercel.app/)|
| 79 | Lv3 | Iris | [GitHub](https://github.com/iris831206/vue-homework) / [GitHub Pages](https://iris831206.github.io/vue-homework/#/week-1)|
| 80 | Lv3 | 咖咖 | [GitHub](https://github.com/kakachiu/vite-week1) / [GitHub Pages](https://kakachiu.github.io/vite-week1/)|
| 81 | Lv3 | Charis_Lai | [GitHub](https://github.com/CharisLai/VueAtHexschool2024) / [GitHub Pages](https://charislai.github.io/VueAtHexschool2024/#/homework1)|
|82 | Lv3 | Fabio20 | [GitHub](https://github.com/fabio7621/vueClass01) / [GitHub Pages](https://fabio7621.github.io/vueClass01/)|
| 83 | Lv3 | duchi | [GitHub](https://github.com/duchi321/Vue_Week_1_Lesson) / [GitHub Pages](https://duchi321.github.io/Vue_Week_1_Lesson/)
| 84 | Lv3 | 納豆 | [GitHub](https://github.com/LittleDreamerStar/vue_week_one) / [GitHub Pages](https://littledreamerstar.github.io/vue_week_one/)
| 85 | Lv3 | Ching | [GitHub](https://github.com/huangching07/vue-2024-week1) / [GitHub Pages](https://huangching07.github.io/vue-2024-week1/)|
| 86 | Lv3 | 歐荻 | [GitHub](https://github.com/OdiliaWang/for-vue-2024-deploy/blob/7283a8347585048cd5b68a5d16ad0fcbac3b32f1/src/HW/OrderList-Week01HW.vue) / [GitHub Pages](https://odiliawang.github.io/for-vue-2024-deploy/)|
| 87 | LV2   |    KarenW.    | [GitHub](https://github.com/karenFRW/2024ViteDeploy.git) / [GitHub Pages](https://karenfrw.github.io/2024ViteDeploy/#/week1) 
| 88 | LV3   |   m.m    | [GitHub](https://github.com/meggie-liu/vue-2024-week01) / [GitHub Pages](https://meggie-liu.github.io/vue-2024-week01/) 
| 89 | LV3   |   World    | [GitHub](https://github.com/HexschoolVuePujols/WeekOne) / [GitHub Pages](https://hexschoolvuepujols.github.io/WeekOne/) 
| 90 | LV3   |  lhy | [GitHub](https://github.com/Rin1330/30-days-vue) / [GitHub Pages](https://rin1330.github.io/30-days-vue/) 
| 91 | LV3   |  Zoe | [GitHub](https://github.com/xuan-rou/vue-homework-01) / [GitHub Pages](https://xuan-rou.github.io/vue-homework-01/) 
| 92 | LV3   |  勾小勻 | [GitHub](https://github.com/gogoyun/vite-project/blob/master/src/components/WeekOne.vue) / [GitHub Pages](https://gogoyun.github.io/vite-project/)
| 93 | LV3   | Cami |[GitHub](https://github.com/iris0952/vue-week1-work) / [GitHub Pages](https://iris0952.github.io/vue-week1-work/)
| 94 | LV3  | 小趴  | [Github](https://github.com/papa2415/2024-vue-week1) / [GitHub Pages](https://papa2415.github.io/2024-vue-week1)|
| 95 | LV3  | Michael  | [Github](https://github.com/RenHuang-Huang/2024-vue-week1) / [GitHub Pages](https://renhuang-huang.github.io/2024-vue-week1/)|
| 96 | LV3  | aboos  | [Github](https://github.com/guhungyin/2024vue) / [GitHub Pages](https://guhungyin.github.io/2024vue)|
| 97 | LV3  | Peter  | [Github](https://github.com/peterhsj/vue-week01) / [GitHub Pages](https://peterhsj.github.io/vue-week01/)|
| 98 | LV1  | Chieh  | [Github](https://github.com/chieh0225/2024-hexschool-vue-homework-week1) / [GitHub Pages](https://chieh0225.github.io/2024-hexschool-vue-homework-week1/)|
| 99 | LV3  | Mars  | [Github](https://github.com/MarsKuo/vue-week1) / [GitHub Pages](https://marskuo.github.io/vue-week1/)|
| 100 | LV3 | Eden | [Github](https://github.com/1denx/hex-vue3-practise/tree/main) / [Github Pages](https://1denx.github.io/hex-vue3-practise/#/wk1)

<!--| x | Lv | Name | [GitHub](https://github.com/) / [GitHub Pages](https://)|-->