--- tags: Vue 直播班 - 2022 冬季班 --- # 第四週 ## 學習提醒 學的時候好像會，真的要自己做卻不知道如何著手 - 看範例作品都會寫，蓋起來就不會 - 老師直播時都懂，但要自己運用就卡卡的 - 寫完作業好像失憶一般，再寫一次也不一定有把握 兩個解決方式：https://www.facebook.com/groups/110635703123103/permalink/702325553954112/ - 透過筆記 - 透過拆解： ![](https://i.imgur.com/pggZigI.png) ## 本週作業提醒 * [第四週主線任務：元件化](https://rpg.hexschool.com/training/39/task?type=detail&id=373) * [團隊任務](https://rpg.hexschool.com/training/39/show?embedhm=) ## 下次上課時間 #### 加碼做作業 直播時間：1/15(日) 下午 13:00 時長：可能約 2 ~ 2.5 小時 #### 上週團隊任務 - https://bejewled-air-4cb.notion.site/6a66fd7e960e4027b57e78cb5ab2a971 ## 本週課綱 * 建立元件 * 元件資料傳遞 * 生命週期 ### 什麼是元件？ 故事：漂亮阿姨電腦壞了，想請小明幫忙組一台新的 原價屋：[https://www.coolpc.com.tw/evaluate.php](https://www.coolpc.com.tw/evaluate.php) 商場上有賣個是零件： - CPU、記憶體、主機板、鍵盤、滑鼠 → 都是元件 - 主機板與 CPU 的關係 → 同廠牌的才能相容 - Intel CPU 需對應 Intel 主機板 - AMD CPU 需對應 AMD 主機板 - CPU 與 主機板的傳輸 （主機板與 CPU 的資料傳輸） → 元件資料傳輸，資料傳輸不會跨元件 - 鍵盤插在 USB 孔上（鍵盤與主機板的資料傳輸） - 螢幕透過 HDMI 插在顯示卡上（螢幕與顯卡的傳輸） - 顯卡插在主機板上（顯卡與主機板的傳輸） ### 為什麼要使用元件？常見拆分原因： - 程式碼太長 - 部分元件需要多次運用 - 邏輯拆分，不同的功能使用獨立的元件進行運作 - Vue Router 時，每個元件都是獨立頁面 - 元件內外層說明 - 元件註冊 -> 兩種方式 - 全域註冊 - 區域註冊 -> import 的手法 - 模板運用 - Template Literial - x-template type=“text/x-template” - (Vue Cli/Vite) Vue file （概念與 x-template 相同） - 元件資料建構方式 - function return - HTML 上的運用方式 - 標籤 - .html 一律小寫（Cli 下可以混大寫） - 常見錯誤： - v-for 一定要搭配 key - 大小寫運用 ## 元件資料傳遞 為什麼要做資料傳遞 最終作業範例 ：[https://hexschool.github.io/vue-training-final-demo/#/](https://hexschool.github.io/vue-training-final-demo/#/) - 兩大體系：全域傳遞、元件間傳遞 - HTML 是兩者串接的橋樑 - 元件上下傳遞 - 上到下：props - 口訣：前面是名稱，後面是值 注意：單向數據流、HTML 屬性一律是小寫、該資料如果不存在，則可能會導致內層出錯 - 下到上：$emit（托球） - 口訣：emit 推，外 methods 接收 - 口訣：HTML 前內，後外 ### 元件轉換原則 1. 先不要想著拆元件 2. 先不要急著拆元件 3. 試著拆元件，並確保功能與原本一致 ## 生命週期 元件生命週期 - 生命週期簡報 - 生命週期範例 - 生命週期的問題 - 搭配 v-if 的問題 <keep-alive> - v-if, v-show - jQuery 為什麼抓不到元素 ## 作業說明 - 本週作業： - <a href="https://rpg.hexschool.com/training/39/task?type=detail&id=373" target="_top">第四週主線任務：元件化</a> - 團隊任務： - https://rpg.hexschool.com/training/39/show?embedhm= - 預習： - Pinia：https://courses.hexschool.com/courses/vue-2021211/lectures/49875681 - Vite（第六週前）：https://courses.hexschool.com/courses/vue-202121/lectures/44165343 - Router（第六週前）：https://courses.hexschool.com/courses/vue-202121/lectures/43289768 - 六角團隊提供的 Vite 模板（含 ESLint）： - https://github.com/hexschool/vite-template