--- tags: Vue 直播班 - 2022 春季班 --- # Vue 延伸套件 報到碼：eUM9X6zNYMoK ## 課程提醒 - 本週日加碼 - 第五週作業說明 - 下午 14:00 開始，伴你寫程式！ - 新服務：每日在線助教 > 正確的提問方式：https://www.notion.so/Vue-39de0ba0ad9842418a019790eab8c8fa > - 一定要附上完整程式碼（局部截圖、局部 JS 都不予以回覆） > - 清楚描述你遇到的問題點，還有預期呈現的方式，以及發生錯誤的可能的原始碼檔案及行數 > - 更好：附上錯誤訊息截圖、短影片說明等等補充說明 ### 課程獎勵說明： - 3/4 **前 50%：超過 120 人挑戰成功，全班錄影直播加碼授權一年** ，外加加碼直播一場（第九週主題：你許願我就做） - ex: 前完成課程報到 -> 第四週主線 - 3/11 前 60%：菁英班直播一場 - ex: 完成課程報到 -> 第五週主線 或 第四週主線 + 心得牆 - 3/11 前 80%：菁英班錄影(包含前一梯的菁英直播 6 個主題) - ex: 完成課程報到 -> 第七週主線 或 第六週主線 + 心得牆 - 100%：數位完賽獎狀 + 抽（JS、Vue 等等抱枕：三名） - 加碼獎勵：參加線上發表會並發表者，送：008 天絕對看不完的 Vue.js 3.0 指南 一本 或 網址一年約(500 元以下) ### 課前小測驗 題目：https://bejewled-air-4cb.notion.site/e7cd1c78fadf4d239f9a33b439407302 填寫位置：https://docs.google.com/spreadsheets/d/15QBrZ5_jGaC-roIMGP-RjUGyYAtkFwPoffesiRVOqhA/edit#gid=8448846 ## 第五週目標： - [第五週主線任務：表單驗證](https://rpg.hexschool.com/training/26/task?type=detail&id=238) - [團隊任務](https://hackmd.io/7eIq55irSFmTaus29OzIAw) 下週前必要完成項目：安裝 Vue CLI - [教學影片](https://courses.hexschool.com/courses/vue-20212/lectures/35988914) - Vue Cli 常見問題：[共筆討論](https://hackmd.io/@hexschool/BJy2AkaTY/%2Fz_ZewCjMTb2WthJcXN_Rdg) ## 本週課綱 - 元件關聯進階方法 - $refs - watch - 擴充套件 - mitt - loading - VeeValidation ## 元件關聯進階方法 watch - 監聽數值 - 監聽 Props $refs - Vue JS DOM 操作取得技巧 - 元件方法操作 - 什麼是方法、什麼是屬性 mitt - 跨組件通訊 ## Vue 外部插件 載入方式： - Web -> CDN - Vue Cli -> NPM 啟用方式： - app.use() -> 啟用插件，給予 this 運用 - app.component() -> 透過元件的方式註冊 插件介紹： - vue loading - VeeValidation ### VeeValidation 知識點 表單驗證的問題： - 規則複雜，一一導入很麻煩 - 許多套件僅支援英文 - 除了現有規則之外，還有自訂規則的需求 - 除了符合目前的規則之外，還要應對未知的需求 因為上述問題，所以表單工具... - 簡單上手的不符合需求 - 符合需求的都很困難 表單工具攻略 [https://hackmd.io/FFv0a5cBToOATP7uI5COMQ](https://hackmd.io/FFv0a5cBToOATP7uI5COMQ) ## 第五週目標： - [第五週主線任務：表單驗證](https://rpg.hexschool.com/training/26/task?type=detail&id=238) - [團隊任務](https://hackmd.io/7eIq55irSFmTaus29OzIAw) 下週前必要完成項目：安裝 Vue CLI - [教學影片](https://courses.hexschool.com/courses/vue-20212/lectures/35988914) - Vue Cli 常見問題：[共筆討論](https://hackmd.io/@hexschool/BJy2AkaTY/%2Fz_ZewCjMTb2WthJcXN_Rdg) #### 其它資源 - 尚未安裝 Node.js 的同學可參考 NVM：https://www.casper.tw/development/2022/01/10/install-nvm/ - node.js 官網(Node.js 可直接下載官網版本): https://nodejs.org/en/ - Vue Cli(請參考課程影音安裝): https://cli.vuejs.org/