如果你在任何地方看到六角學院新的一年又開啟了新的 Vue 直播班，且你跟我一樣還是一個非資工背景學生、一樣很害羞常常不敢公開問（程式）問題、但不確定是否跳坑一同學習的話，這篇文章很適合你。

學習

職場產業

親子與教育

六角學院「 Vue 直播班」心得分享

六角學院官網：
https://www.hexschool.com/

直播文件：https://hex.school/an5d2
相關課程：https://www.hexschool.com/courses/vue3.html
---
講者：卡斯伯
六角學院共同創辦人
從設計轉行前端的工程師

- 粉絲頁：https://www.facebook.com/WccCasper
- 部落格：https://wcc723.github.io/

---
00:00 介紹
7:50 環境設定
14:30 關注點分離(jQuery 示範)
20:10 準備好 Vue3 的環境(注意 Vue 的 data-函式, methods-物件, mounted-函式)
23:40 邏輯講解
28:05 data function
33:50 將 html 上的值拉回 data (使用 v-model 作雙向綁定)
38:00 data 中物件在 html 上的呈現方式
42:00 圖片的呈現方式(使用 v-bind: 作屬性綁定)
46:40 判斷小明是不是男生(使用 v-if 和 v-else 作判斷)
54:40 多筆資料的呈現(使用 v-for 帶出陣列中的資料)
1:07:10 事件觸發@ (雙向綁定)
1:13:25 Vue 開發工具
1:15:00 methods function
1:22:00 本週作業說明
1:31:00 另一種取值的方式(mounted + this，適合初始化資料)
1:39:50 ESModule: Vue 模組化開發管理的方式

Vue直播班