---
title: 第三週小組任務 - 第三組
tags: Vue直播班 - 2022 冬季班
---
###### tags: `2022 Vue直播班` `冬季班` `六角學院`

# 第三週小組任務 - 第三組
:arrow_backward: [回到目錄](https://hackmd.io/zEo77jAnSH-C9q1ADR-i4Q)
:heavy_check_mark:

||組員名單|簽到|
|-|---|---|
|1| albee#9121 |:heavy_check_mark:|
|2| Amberhh#2465 |:heavy_check_mark:|
|3| 艸良#2846 |請假|
|4| bakiii#2652 |請假|
|5| hannahTW#2224 |:heavy_check_mark:|
|6| Asher Xu#9297 |:heavy_check_mark:|
|7| RT#2151 |:heavy_check_mark:|
|8| leoli#3882 |:heavy_check_mark:|
|9| Eason#7884 |:heavy_check_mark:|
|10| Fannie#7800 |:heavy_check_mark:|

### 討論工具: Discode
- 時間:每周二晚間 8:00
- 截圖

## 挑戰一：團隊成員一起搞定 GitHub Pages

課程最終目標是完成獨立的電商作品，而此作品也會上傳到 Github Pages 作為展示空間（同學亦可上傳到自己的網路空間），因此建議同學可以提前掌握 Github Pages 運用技能。

1. 請成員建立自己的 **Github 儲存庫**
2. 簽入一個 html 頁面，並上傳至 Github
3. 使該頁面以 gh-pages 的形式開啟（每個成員都需要自己的 gh-pages 才算成功）

||組員名單|GitHub Repo |GitHub Page |
|-|---|---|---|
|1| albee#9121 |[連結](https://github.com/albee-chang/vue3-week3)|[連結](https://albee-chang.github.io/vue3-week3/)|
|2| Amberhh#2465 |[連結](https://github.com/iamAmberhh/vue_week3_team)|[連結](https://iamamberhh.github.io/vue_week3_team/)|
|3| 艸良#2846 |[連結](https://github.com/22aliang/hexschool_Vue_week3)|[連結](https://22aliang.github.io/hexschool_Vue_week3/)|
|4| bakiii#2652 |[連結]|[連結]|
|5| hannahTW#2224 |[連結](https://github.com/hangineer/ghpages_practice)|[連結](https://hangineer.github.io/ghpages_practice/)|
|6| Asher Xu#9297 |[連結](https://github.com/KiraKira32/-vue_team_week3)|[連結](https://kirakira32.github.io/-vue_team_week3/)|
|7| RT#2151 |[連結](https://github.com/youtingluo/github-pages)|[連結](https://youtingluo.github.io/github-pages/)|
|8| leoli#3882 |[連結](https://github.com/gp355d/Vue3-2023-git-project)|[連結](https://gp355d.github.io/Vue3-2023-git-project/)|
|9| Eason#7884 |[連結](https://github.com/1a3on/perfume)|[連結](https://1a3on.github.io/perfume/)|
|10| Fannie#7800 |[連結](https://github.com/DGLTU/-vue3-week3-smallgroupTask)|[連結](https://dgltu.github.io/-vue3-week3-smallgroupTask/)|

### 參考連結：

- [課程教學 GitHub Pages](https://courses.hexschool.com/courses/vue-202121/lectures/43289915)
- [Github Pages - 免費網頁空間隨你開](https://youtu.be/njlABvVRB68?t=419)（7分處至 23分）
- [GitHub Pages - 建立靜態網站](https://w3c.hexschool.com/git/21756c99)

## 挑戰二：團隊測驗

完成團隊測驗：https://bejewled-air-4cb.notion.site/6a66fd7e960e4027b57e78cb5ab2a971

||回答|原因|正確答案|
|-|---|---|---|
|1| 1.正確 ||
|2| 2. 不對 |最下方的`console.log(1);`會先執行|
|3| 1.正確||
|4| 2. 不正確|備註|
|5| `vm.response=res` ||
|6| `this.response=res`||
|7| `{{message}}`||
|8| 1. style 會被加入 display: none||
|9| 2. 2||
|10| 3. 這樣寫還是可以運作||
|11| 1. [{ value: 1}, { value: 2 }, { value: 3 }]||
|12| 2. watch 可以用來監聽 data 狀態，接下來觸發類似於 methods 的行為||
|13| 3. prevent||
|14| 2. : 是 v-bind 的縮寫||
|15| 2. { const a = 1 }|{{ }} 內要放表達式|

#### 備註
==第四題==

promise(1)
  .then(res => {
    console.log(res);
     return promise(1)
  })
  .then(res => console.log(res))

==第十二題==

==第十四題==

#### key 屬性
* 期望值: number | string | symbol
* key 是 Vue 內建的特殊屬性
* 為了要比對更新前後的 DOM（virtual DOM）時，去辨識節點用的，要用 **不會改變的唯一值**
* 用 index 會有潛在風險，不適合用在陣列會變換順序的情況
* 用基本型別，不要用 object 或 array (比較的變成 reference)

>沒有 key 的情況下，Vue 會在最小化移動元素的情況下來更新，有 key 的情況下， Vue 會根據 key 的順序，重新排列(reorder)元素，如果 key 不存在的話，那個元素就會被銷毀。

參考資源:
- [v-for 與他的坑 feat. key & v-if](https://ithelp.ithome.com.tw/articles/10297907)

==第十五題==
Vue 的雙大括號內，要放 `表達式`

參考資源:
- [JavaScript 表達式觀念及運用 - JS Expression](https://ithelp.ithome.com.tw/articles/10238390)