Skip to content

建立 2026-09-15 更新 2026-09-15

影音教學

這一頁把 官方文件有連到的影音、Vue 作者與核心團隊講座、官方認證合作平台（Vue Mastery、Vue School），以及口碑清楚的中英文課程嵌進來。優先看官方與這兩家平台，介面與 API 才不會跟過期教學對不上。

各主題頁也嵌了最相關的一兩支；這裡是總表，方便一次找。

完整播放清單仍以 YouTube 為準：

官方認證課程

Vue.js Certification 由 Vue School 與 Vue.js 組織合作，考題經 Evan You 與核心團隊審過，營收一部分回饋 Vue 開發。適合想拿正式認證的學習者；本頁影音仍以免費資源為主。

建議先看這五部

時間不多就看這五部，對應本站的 20% 核心：Vue 是什麼、官方入門課、作者說明 Vue 3、中文環境建置、英文實作課。

Vue.js Explained in 100 Seconds

來源：Fireship　約 2 分鐘

用最短路徑講宣告式樣板、指令與響應式。完全沒接觸過時先看，對應首頁 Vue 是什麼？。

Intro to Vue 3（Options API）

來源：Vue Mastery　約 57 分鐘

官方文件 Introduction 推薦的免費入門課。從建立 app、屬性綁定、條件與列表、事件、computed、元件與 v-model 走一遍。觀念與 Composition API 通用，對應 核心語法。完整分集也在 Vue Mastery 課程頁。

Vue Fundamentals with the Composition API

來源：Vue School　約 72 分鐘

用現在官方建議的 Composition API 講響應式、樣板、指令、事件與 computed。看完 Options 版入門課、想對齊本站寫法時看。完整課在 Vue School，對應 組合式 API。

Vue 框架簡介、快速開始

來源：彭彭的課程　播放清單第一支

繁中從環境與專案結構講起，後面還有樣板、響應式、元件與串接後端。完整清單：Vue.js 前端工程框架入門。對應 建立專案。

Vue.js Crash Course

來源：Traversy Media　約 3 小時（2024）

用 Vite 做一個完整小專案：元件、指令、生命週期、Composition API。想一次跟著打出東西時看，不必一次看完。對應 核心語法 與 組合式 API。

官方與核心團隊

下列是官方 FAQ／文件有連到，或作者、核心成員親自講的內容。

Vue.js: The Documentary

來源：Honeypot

官方 FAQ 連到的紀錄片，講 Evan You 從個人 side project 做到全球社群的過程。想理解專案背景時看，不是操作逐步教學。

The New Vue by Evan You

來源：VueConf Toronto　約 36 分鐘

Vue 作者說明 Vue 3 的開發體驗：<script setup>、新文件、Vite、DevTools 與 TypeScript。適合看完入門語法、想聽「為什麼現在這樣寫」時看。對應 <script setup>。

Learn Vite with Evan You

來源：Vue Mastery

Vite 作者親自講開發伺服器與正式打包為什麼分開。對應本站 建立專案。完整課程在 Lightning Fast Builds with Vite。

Vue & Vite Updates（VueConf US 2024）

來源：Vue Mastery　約 43 分鐘

Evan You 在 VueConf US 2024 報告 Vue 與 Vite 近況。用來對齊「當時官方在推什麼」，細節仍以當下文件為準。

State of Vite and Vue 2025

來源：JSWORLD Conference

Evan You 在 2025 談 Vite 與 Vue 的現況與方向。比 2024 那場更新，適合已經會寫、想聽作者怎麼看生態系時看。

State, Routing, and the Future of Vue

來源：MonteTalks　訪問 Pinia／Vue Router 作者 Eduardo San Martin Morote

談 Pinia 設計、維護官方 Router 的取捨，以及生態系方向。對應 Vue Router 與 Pinia。

Clean Async State Management（Pinia Colada）

來源：Vue.js Nation 2025　Eduardo San Martin Morote

進階：非同步狀態、快取與和 Router 搭配。核心語法還沒熟之前可以先略過，之後做資料導向頁面再回來。

官方推薦平台的主題課

Vue Mastery 被官方 Introduction 頁點名；Vue School 與 Vue.js 組織合作認證。下面幾支是免費放出來的主題課，對應本站後半段。

Reactivity in Vue 3 — How does it work?

來源：Vue Mastery　約 10 分鐘

Gregg Pollack 用最小例子講 Vue 3 怎麼追蹤依賴、為什麼改資料畫面會動。對應 響應式。完整課在 Vue 3 Reactivity。

Build your own Custom Composables in Vue

來源：Vue Mastery

用 useMouse() 示範怎麼把響應式狀態與生命週期抽成可重用函式，對應官方文件的 composable 例子。對應 Composables。

Getting Started with Pinia

來源：Vue Mastery　約 10 分鐘

說明 Pinia 要解決什麼問題、store 怎麼切，並帶第一個 store。對應 Pinia。完整課在 Pinia Fundamentals。

中文教學（彭彭）

彭彭的課程 這套繁中清單依序講環境、樣板、響應式、元件、生命週期與 Fetch。建議從頭看到完；下面嵌幾支對應本站章節的，其餘用表格連到 YouTube。

Vue 樣板語法：標籤內文與屬性

講 {{ }} 與 v-bind，對應 樣板語法。

Vue 響應式狀態

講為什麼資料一改畫面會動，對應 響應式。

Vue 組件結構：基本觀念和語法

講為什麼要拆元件、檔案怎麼組起來，對應 元件。

Vue 組件結構：生命週期

講掛載與卸載時機，對應 生命週期。

播放清單其餘各集：

主題 對應本站 影片
框架簡介、快速開始 建立專案 YouTube
專案結構、基礎管理 建立專案 YouTube
我的第一個 Vue App 建立專案 YouTube
樣板：標籤內文與屬性 樣板語法 YouTube
樣板：流程控制 指令 YouTube
樣板：事件處理 樣板語法 YouTube
響應式狀態 響應式 YouTube
表單與響應式綁定 樣板語法 YouTube
組件：基本觀念 元件 YouTube
組件：自訂屬性（props） 元件 YouTube
組件：自訂事件（emits） 元件 YouTube
生命週期 生命週期 YouTube
Fetch 串接後端 實務延伸 YouTube
標籤選單整合串接 實務延伸 YouTube

其他中文課程

六角學院 Vue 3 實戰影音課程 是完整付費課（Options API、元件、Router、電商作品），不是 YouTube 免費片，故以連結標出。選擇課程時請確認教的是 Vue 3，不要買到已停止維護的 Vue 2 舊課。

英文入門與完整課

Vue JS 3 Tutorial for Beginners #1

來源：Net Ninja　約 14 分鐘

播放清單第一支：Vue 3 新在哪、這套免費課會做哪些小專案。後面還有 Options API、CLI／Vite、Router、Composition API。完整清單：Vue.js 3 Tutorial。

Net Ninja 清單與本站對照：

集數 內容 對應本站
#2 Basics part 1 樣板、點擊、v-if 樣板語法、指令
#3 Basics part 2 事件、v-for、v-bind 指令
#7 Forms & Inputs v-model、表單送出 樣板語法
#8 Vue Router 多頁、參數、404 Vue Router
#10 Composition API 1 ref／reactive、computed、watch 響應式、計算與偵聽
#11 Composition API 2 生命週期、composable 生命週期、Composables

Vue 3 with TypeScript Tutorial #1

來源：Net Ninja　約 9 分鐘

專案改用 TypeScript 時看：為什麼要 TS、create-vue 勾選後檔案長怎樣。可與本站 <script setup> 範例對照。

Vue.js Course for Beginners（2025）

來源：freeCodeCamp.org　講師 Bhrugen Patel　約 7 小時

從基礎、響應式、指令、表單、元件通訊、slots、生命週期，講到 Routing、API 與 Pinia。想要「一支長片當線上課」時用；章節時間軸在影片說明。對應本站從 核心語法 到 生態系。

Vue.js Course for Beginners（Gwen Faraday）

來源：freeCodeCamp.org　約 3 小時 40 分鐘（2021）

較早的 Vue 3 長片，觀看數高、節奏慢，適合完全初學者。部分工具畫面仍是 Vue CLI，專案請改用現在的 npm create vue@latest。

英文進階

Vue JS 3 Tutorial for Beginners #8 — The Vue Router

來源：Net Ninja　約 48 分鐘

從為什麼需要 Router 講到 RouterLink、動態參數、轉址與 404。對應 Vue Router。

Pinia Crash Course #1 — What is Pinia?

來源：Net Ninja　約 4 分鐘

官方狀態庫入門：Pinia 取代 Vuex、store 要放什麼。完整清單：Pinia Crash Course。對應 Pinia。

Vue JS with Composition API & Pinia

來源：Daweb Schools　約 93 分鐘

假設你已會 Vue，把 Options／Vuex 思路換成 Composition API 與 Pinia，並做一個任務管理小專案。對應 組合式 API 與 Pinia。

文字文件

頻道與片長會變，若嵌入失效請改看官方文件。挑片時請確認講的是 Vue 3，不要跟著已停止維護的 Vue 2 舊課走。