自動播放
自動完成
1326387
上一堂課程
完成並繼續課程
Vue 3 實戰影音課程
介紹
六角學院 線上社團
課程介紹影片 (1:59)
Apple M1 觀看公告
課程最終任務說明
課前章節 - JS 必備觀念
JS 額外補充資源
課程環境 (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
縮寫
快速入門 Vue.js：商品後台管理介面
MVVM 概念介紹 (3:52)
Vue.js 起手式 (5:36)
起手常見結構 (9:54)
雙向綁定的技巧 (8:11)
將資料加入於 Vue Data (6:07)
簡單語法呈現大量資料於畫面上 (7:10)
編輯你的資料狀態 (8:44)
基礎章節作業：完成新增、編輯商品項目 (7:00)
Codepen 樣板及服務連結
指令語法全介紹｜操作畫面超容易
指令觀念介紹 (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)
指令章節作業 - 簡單版 (6:03)
指令章節作業 - 簡單版實作示範 (32:53)
指令章節作業 (6:06)
Options API：方法、運算、監聽、生命週期
Options API 概述 (6:39)
Methods 方法 (12:21)
Computed 運算基礎運用 (6:09)
Computed 運算之 Getter, Setter (5:46)
Watch 監聽 (12:35)
生命週期詳解 (12:47)
Options API 章節作業 (3:09)
元件
元件介紹 (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） (6:59)
元件章節作業 (1:40)
進階 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 章節延伸資源
Vue Cli，整合性工具開發好容易
Vue Cli 介紹 (7:42)
Vue Cli 章節資源
安裝 Vue Cli 環境 (10:50)
Vue Cli 環境中的檔案說明 (11:26)
指令太麻煩，來試試看 GUI 吧 (8:20)
如何在 Cli 環境中加入 Vue 元件 (7:54)
Cli 中引入外部套件 (8:36)
Vue Cli 中 VeeValidate 範例程式碼
Vue Cli 中環境變數基礎觀念 (6:41)
Vue Cli 編譯設定檔 (7:22)
Github Pages 教學連結
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)
最終挑戰
最終作業課程介紹 (3:20)
課程 API 文件及相關資源
申請課程 API (5:56)
常見 API 問題解決方式
匯入 Bootstrap 並調整版型 (8:21)
製作登入頁面 (11:10)
登入與 Cookie (4:50)
Cookie 存取的語法
確認是否維持登入狀態 (8:02)
調整巢狀路由並且加入 Navbar (9:09)
加入產品列表 (9:30)
增加 Bootstrap Modal (10:38)
透過彈出視窗新增品項 (11:47)
產品資料更新 (8:58)
透過 API 上傳圖片 (5:57)
使用 mixin 整合相同程式碼 (2:54)
加入讀取的視覺效果 (4:36)
加入錯誤的訊息回饋 (11:46)
加入分頁切換 (12:52)
套用全域的千分號 (6:11)
中場加速 (5:08)
用戶端產品列表 (7:06)
用戶端加入購物車 (8:07)
用戶端加入 Bootstrap Icon (4:59)
用戶端更新購物車數量品項 (6:02)
用戶端套用優惠券 (6:58)
用戶端建立訂單 (4:45)
用戶端結帳流程 (10:21)
最終作業說明 (5:26)
最終作業提交規則文件
最終作業提交 - 程式勇者村
Composition API
Composition 章節提醒
什麼是 Composition API (3:48)
雙向綁定機制 Proxy (11:55)
使用 setup 取代 Options API (5:50)
使用 reactive 定義資料 (4:48)
使用 ref 定義資料 (6:02)
reactive 與 ref 如何選擇 (8:23)
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:48)
Watch 與 Computed 的結合體，WatchEffect (8:09)
最終練習，Composition Kata (6:02)
Composition 課程延伸章節資源
Pinia 狀態管理工具
Pinia 簡介 (4:56)
Pinia 課程資源
Pinia 與 Options API (15:21)
在 Composition API 中使用 Pinia (11:05)
Pinia 實戰範例：範例專案介紹 (3:11)
Pinia 實戰範例：快速導入 Pinia Store (9:03)
Pinia 實戰範例：跨元件狀態 (5:57)
Pinia 實戰範例：加入購物車等功能 (7:28)
Pinia 實戰範例：統一的狀態管理 (6:55)
Pinia 小結 (0:25)
從頭開始 - Pinia 製作一個購物車 2023 新增章節
Pinia 相關資源
01. pinia 簡介 (3:57)
02. 專案簡介 (3:12)
03. 版型製作 (18:02)
04. 轉換vue元件 (7:46)
05. 導入產品資料 (3:22)
06 建立 store (12:47)
07 建立購物車 Store (8:57)
08 購物車資訊 Store (14:47)
09 呈現購物車列表並刪除品項 (7:47)
10. 新增品項加總至原品項 (5:18)
11. 設定數量 (8:06)
12. Navbar 數量呈現 (2:57)
Vite - 2023 新增章節
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)
Pinia 課程資源
Pinia 官方網站：
https://pinia.vuejs.org/
課程實戰範例：
初始範例
各階段流程參考
完成並繼續課程