自動播放
自動完成
上一堂課程
完成並繼續課程
2292711
Vue 作品實戰 2023 冬季班
課程注意事項
影音授權時間
直播影音
開學典禮 - 12/8 (155:06)
第一週課程：關注點分離 12/29 - 上集 (95:18)
第一週課程：關注點分離 12/29 - 下集 (63:10)
第二週課程：非同步與 this 1/5 - 上集 (117:38)
第二週課程：非同步與 this 1/5 - 下集 (67:28)
額外補充：Watch 與 Computed 的差異 (11:04)
額外補充，Bootstrap JS 部分 (15:52)
第三週課程：Vue 起步走 - 上集 (121:38)
第三週課程：Vue 起步走 - 下集 (41:05)
第四週課程：Vue 元件 - 上集 (104:48)
第四週課程：Vue 元件 - 下集 (67:04)
第五週課程：Vue 進階 - 上集 (70:13)
第五週課程：Vue 進階 - 中集 (46:54)
第五週課程：Vue 進階 - 下集 (55:27)
第二週作業解說 (39:02)
第三週作業解說 (78:18)
第四週作業解說 - 補充第二週驗證說明 (49:37)
第六週課程：Vite 與 Vue Router - 上集 (92:34)
第六週課程：Vite 與 Vue Router - 下集 (80:18)
第五週作業解說 (79:40)
第六週作業解說 (61:51)
第七週：設計怎樣可以不難看 - 上集 (48:50)
第七週：設計怎樣可以不難看 - 下集 (122:18)
第八週：總複習 - 作品實戰 上 (122:48)
第八週：總複習 - 作品實戰 下 (49:49)
直播班 - 作品發表會
第一場次 (51:03)
第二場次 (39:29)
第三場次 (76:10)
第四場次 (64:16)
第五場次 (62:45)
過去直播班 發表會參考影片
發表會主題 - 圍棋 (15:13)
發表會主題 - 運動揪團 (13:12)
發表會主題 - 蔬果宅配 (13:19)
發表會主題 - 午分之食 (8:38)
課前章節 - JS 必備觀念
Vue 直播班的影音內容說明
課程環境 (5:01)
課程相關資源
JS 常見縮寫 (13:35)
This 的運作 (14:39)
箭頭函式 (13:54)
關注點分離概念說明 (5:05)
關注點分離實作概念 (16:58)
傳參考特性 (12:24)
Promise 非同步觀念 (13:47)
使用 Axios 串接 API (4:29)
在瀏覽器上運行 ES 模組 (12:41)
現行的 ES 模組使用技巧 (5:08)
JS 必備觀念 - 課後測驗
this
物件參考特性
Promise
ESModule
縮寫
課前影音 - 關注點分離
課前影音說明 (2:33)
關注點分離的基礎概念 與 資料分離 (21:13)
章節額外資源
從零實作 - 由資料渲染畫面 (24:51)
課前挑戰 - 關注點分離 Kata (3:08)
Kata 示範 (8:23)
快速入門 Vue.js：商品後台管理介面
MVVM 概念介紹 (3:52)
Vue.js 起手式 (5:36)
起手常見結構 (9:54)
雙向綁定的技巧 (8:11)
將資料加入於 Vue Data (6:07)
簡單語法呈現大量資料於畫面上 (7:10)
編輯你的資料狀態 (8:44)
指令語法全介紹｜操作畫面超容易
指令觀念介紹 (5:01)
綁定內容於畫面上 v-text (12:00)
多筆資料渲染 v-for (13:59)
條件判斷 v-if (7:49)
HTML 屬性綁定 v-bind (10:56)
HTML 樣式綁定 (12:31)
資料雙向綁定 v-model (12:18)
v-model 修飾符 (4:01)
事件觸發 v-on (10:26)
v-on 修飾符 (9:29)
v-on DOM 事件處理技巧 (7:22)
課程 API 串接說明
API 相關文件說明
API 概念及申請說明 (9:28)
串接運用及驗證 (29:48)
檔案上傳 (9:35)
GitHub Pages 使用說明
GitHub Pages 基礎上傳技巧 (13:01)
Options API：方法、運算、監聽、生命週期
Options API 概述 (6:39)
Methods 方法 (12:21)
Computed 運算基礎運用 (6:09)
Computed 運算之 Getter, Setter (5:46)
Watch 監聽 (12:35)
生命週期詳解 (12:47)
元件
元件介紹 (5:10)
註冊元件的手法 (9:20)
元件樣板製作 (9:47)
Props 向內層元件傳遞資料狀態 (6:55)
元件型別驗證 (6:08)
Emit 向外層傳遞事件 (12:47)
Emits 驗證 (5:55)
Slot 插巢 (6:19)
Slot Props 插巢傳遞資料狀態 (7:39)
Mitt 跨元件資料傳遞（Event Bus - 建議改使用 Pinia） (6:59)
進階 API
進階章節說明 (1:17)
操作 DOM 元素技巧 refs (10:00)
自訂元件生成位置 teleport (6:26)
跨層級資料傳遞 provide (7:16)
元件直接加入 v-model (6:04)
混合元件方法 mixins (5:12)
擴展元件方法 extend (4:11)
自訂義指令 directive (8:46)
擴充插件 plugins (12:19)
表單驗證套件 vee-validation (11:15)
進階 API 章節延伸資源
從頭開始 - Pinia 製作一個購物車
Pinia 相關資源
01. pinia 簡介 (3:57)
02. 專案簡介 (3:12)
03. 版型製作 (18:02)
04. 轉換vue元件 (7:46)
05. 導入產品資料 (3:22)
06 建立 store (12:47)
07 建立購物車 (8:57)
08 購物車資訊 (14:47)
09 呈現購物車列表並刪除品項 (7:47)
10. 新增品項加總至原品項 (5:18)
11. 設定數量 (8:06)
12. Navbar 數量呈現 (2:57)
Vite
Vite 相關資源
Vite 簡介 (3:05)
安裝 Vite 以及環境介紹 (11:23)
在 Composition API 及 Options API 進行切換 (9:32)
使用 Create Vue 版本進行創建 (6:22)
安裝外部套件 - Vue Axios (6:19)
編譯設定 (4:53)
環境變數設置 (7:18)
部署 Vite 專案至 GitHub Pages (9:55)
Pinia 與 Vite 整合範例 (19:35)
Vue Router
本章節以後 “發問的重要說明”
Vue Router 簡介 (4:18)
Vue Router 相關資源
在一般網頁中引入 Vue Router (7:20)
Vue Cli 中使用 Vue Router 開發 (8:04)
中場：為目前專案加入樣式 (3:37)
巢狀路由 (7:22)
一個元件插入多個視圖 - 具名視圖 (7:33)
透過參數決定路由內容 - 動態路由 (7:47)
動態路由搭配 Props (4:08)
路由方法介紹 (10:13)
預設路徑以及重新導向 (4:05)
路由設定選項 (6:46)
網站動態特效
Swiper (126:26)
Sweetalert2、Loading (101:29)
多國語系 i18n (123:01)
AOS 動畫效果 (106:57)
Composition API
章節提醒
什麼是 Composition API (3:48)
雙向綁定機制 Proxy (11:55)
使用 setup 取代 Options API (5:50)
使用 reactive 定義資料 (4:48)
使用 ref 定義資料 (6:02)
reactive 與 ref 如何選擇 (8:19)
Composition 中的方法定義 (6:05)
在 Composition API 中運用 Options API 的方法 (9:19)
setup 中的 Props (5:53)
在 composition 中運用 emit 技巧 (5:20)
ref 取得 $refs 的 DOM 物件 (4:25)
Provider 與 Inject 的方法導入 (5:15)
在 Composition 中運用 Watch 方法 (9:44)
Watch 與 Computed 的結合體，WatchEffect (8:05)
最終練習，Composition Kata (6:02)
Composition 課程延伸章節資源
網站特效
動態輪播 - Swiper (126:26)
提示效果 - Sweet Alert, Vue Loading (101:30)
後台強化 - 文字編輯器、多國語系 (123:01)
視覺優化 - AOS、視差滾動、Infinite Scroll (106:57)
主線電商專題 - 發想範圍介紹
Vue 專題 API 介紹 (2:30)
前後台 API 功能權限設計介紹 (8:19)
新增商品功能，可以客製化自己要的欄位 (6:51)
新增商品設計大全，實體虛擬通通都可 (4:40)
加入購物車到結帳流程 (2:55)
重要備註：加入購物車時，需代入產品ID與數量 (2:56)
如何發想自己想做的專題
規劃一個作品的階段里程碑 (4:14)
發想作品方法一：向網站致敬 (6:04)
發想作品方法二：蹭時勢流量 (8:28)
發想作品方法三：思考自己想解決的問題 (6:45)
各專題題目參考 (7:22)
兩個專題簡報分享 - 感謝火箭隊專題組學員分享 (10:59)
wireframe 簡略介紹 (3:00)
雜談：平面設計可以不轉前端，往網頁設計師發展嗎？ (3:27)
網站前後台介紹
什麼是前台跟後台？ (14:45)
平台角色端介紹(重要) (8:30)
我的專題該做後台跟更多角色端嗎？ (8:49)
【權限設計】我的專題前後台該怎麼區分功能？ (22:37)
專題作品班 - 關卡 2 - 使用者故事 (user story)、網站地圖(Sitemap)
為什麼要學習規劃網站？ (3:42)
user story 介紹 (2:07)
以 IT 邦幫忙為例 (11:53)
以六角學院為例 (4:03)
以 The F2E 黑客松網站為例 (3:26)
以學員題目：攀岩網站為例 (7:50)
以學員題目：車宿地點為例 (11:09)
設計 sitemap 網站地圖 (1:51)
專題作品班 - 關卡 3 - 線稿圖(wireframe)
什麼是 wireframe 線稿圖？ (13:24)
網站色系(主色、輔助色)如何判斷？ (7:27)
whimsical 繪圖軟體教學 & 常見退件原因
使用 whimsical 繪製網站地圖、線稿圖教學 (11:51)
首頁設計六大功略指南 - 設計面試官也喜歡的網站動線
如何規劃面試官也喜歡的首頁？ (0:24)
指南一：Banner 區 - 用一句話來介紹你的服務 (7:21)
指南二：提出痛點吸引消費者引發共鳴 (8:58)
指南三：介紹產品優勢，讓客戶深入瞭解 (5:30)
隨堂小考 (7:56)
指南四：第三方推薦提升產品信心 (8:50)
指南五、六：引導購買（call to action）：推最後一把刺激顧客買單 (13:59)
六大點總結 ＆ 隨堂測驗二 (10:16)
線稿圖優化技巧一：Banner 與 Call to action 完美結合 (5:46)
線稿圖優化技巧二：該放假字嗎？ (10:10)
常見退件原因
【狀態 3-2】 wireframe 線稿圖常見退稿原因講解 (7:27)
專題作品班 - Git 協作部分
Git 教學資源
Node.js 直播班的 Git 協作流程 - rebase 版本 (130:43)
---下方皆為全客製化專題延伸資源，非正課，可作為補充---
備註：下方都是客製化的延伸學習
做專題需學的額外 JS 知識點
什麼是 localStorage ？ (6:17)
setItem、getItem 基本操作 (11:00)
透過 JSON.parse、JSON.stringify 來編譯資料 (10:06)
【專題資料來源】蒐集種類介紹
種類一：自己做服務平台 (9:06)
種類二：擁有資料授權 (4:09)
種類三：下載第三方 API 資料，並整合到自己的資料表裡 (15:59)
種類四：介接即時 API (3:14)
種類五：虛擬資料設計 (5:49)
【可不看，授權參考討論】學員常見QA (23:59)
與後端工程師合作的兩種流程(Server Side Render、Client Side Render)
7 分鐘版本 - 前後端工程師協作方案： Server Side Render、Client Side Render (6:00)
90 分鐘版本 - 前後端工程師協作方案： Server Side Render、Client Side Render (81:04)
json-server 環境教學 - 打造自己的作品 API 伺服器
為什麼要安裝 postman？ (2:21)
json-server 火力 Demo 他有多厲害 (6:05)
json-server 環境安裝 (3:17)
json-server 與一般常見伺服器架構差異介紹 (7:53)
新增網頁，來讀取自己打造的 json-server API (10:01)
講解 db.sjon 架構設計 (4:44)
網路請求規則 - 新增、刪除、修改 (8:54)
json-server 篩選功能 (10:48)
todolist restful API練習 (5:56)
json-server 資料關聯教學
介紹資料庫設計 (3:19)
為何資料表要拆開，不合併在一起？ (7:49)
透過 _expand 語法來進行資料關聯 (7:51)
如何取得(GET)、新增(POST) 留言資料 (12:31)
如何同時取得貼文與對應留言的資料？ (4:50)
貼文與留言網頁與 API 介接設計 (7:54)
json-server-auth 身份認證設計
json-server-auth 套件介紹 (2:12)
環境安裝 (4:41)
演練大綱講解 (1:52)
註冊功能API (7:59)
登入功能 API (5:16)
更新密碼功能 API(無權限) (5:13)
API 權限設計介紹 (7:28)
登入後新增貼文資訊流程 (9:08)
前後台權限手動設計 (3:05)
更新密碼功能 API(有權限) (8:11)
API 伺服器部署
render 伺服器部署流程
備註：下方都是客製化的延伸學習
課程內容未解鎖
如果您已經購買此課程，
請您重新登入後再查看
.
購買本課程