iT邦幫忙

鐵人檔案

2025 iThome 鐵人賽
回列表
Vue.js

在 Vue 過氣前要學的三十件事 系列

本系列從 Vue 3 的基礎概念出發,逐步深入探索其進階應用與現代開發實踐。
講解 Vue3.6 的 Vapor Mode 和 alien-signals,拆解的 Vue 最新生態。

涵蓋 Composition API 和響應式系統核心、生命週期與 SSR
從設計系統概念整合 Tailwind、PrimeVue、CSS Variables,
搭建跨頁表單驗證 Pinia、vee-validate、yup
搭配 Vite SSR 建構出你自己的 SEO 專案, 不再受限於 Nuxt

不論你是 Vue 新手,還是想在有基礎的情況更了解 Vue 的內部運作,都很適合你。

參賽天數 23 天 | 共 23 篇文章 | 10 人訂閱 訂閱系列文 RSS系列文
DAY 11

在 Vue 過氣前要學的第十一件事 - 抓住 Vue 的心 / v-bind

前言 v-bind 是非常常見的內置指令,常用於 HTML attribute,例如 style, class, props, etc.。 放的位置會在 ele...

2025-09-11 ‧ 由 Yanya 分享
DAY 12

在 Vue 過氣前要學的第十二件事 - 如果 IF / v-if

前言 在 Vue 開發中,我們經常需要根據條件顯示或隱藏特定 DOM 元素。 常見的情境有: 表單錯誤訊息只在輸入驗證失敗時顯示。 API 請求後才顯示資料、...

2025-09-12 ‧ 由 Yanya 分享
DAY 13

在 Vue 過氣前要學的第十三件事 - Here we go again / v-for

前言 在前端開發中,難免動態決定該渲染什麼資料的情況,舉例來說,今天有一個畫面是 : 要根據 API 回傳的資料來渲染該公司的員工列表 那公司員工這個資料可...

2025-09-13 ‧ 由 Yanya 分享
DAY 14

在 Vue 過氣前要學的第十四件事 - 事件處理 / v-on

前言 在 Vue 中,當你希望做某些動作並觸發事件時,可能就會需要用到事件綁定,譬如說呢,今天要點擊一個按鈕數字會 +1: const count = ref(...

2025-09-14 ‧ 由 Yanya 分享
DAY 15

在 Vue 過氣前要學的第十五件事 - 單向資料流

前言 Vue 是一個資料驅動的框架,畫面是由資料的狀態所決定的,當資料改變,畫面會自動更新。 因此,掌握資料的流向、變動方式與渲染時機,是深入理解 Vue 的核...

2025-09-15 ‧ 由 Yanya 分享
DAY 16

在 Vue 過氣前要學的第十六件事 - 愛是雙向的 / emit & v-model

前言 你可能會聽說 vue 是雙向綁定,但我又說 Vue 是單向資料流。先別生氣。 這就要提到 `emit 了,在 Vue 過氣前要學的第十五件事 - 單向資料...

2025-09-16 ‧ 由 Yanya 分享
DAY 17

在 Vue 過氣前要學的第十七件事 - 依賴注入 Provide/Inject

前言 在 Vue 過氣前要學的第十六件事 - 愛是雙向的 中,我們提到了 vue 的雙向綁定,這僅止於父子關係的組件。 但如果今天這個元件跨了兩層,跨了三層嗎,...

2025-09-17 ‧ 由 Yanya 分享
DAY 18

在 Vue 過氣前要學的第十八件事 - 我們必須更深入一點 / slot

前言 在設計元件時使用 slot,可以為元件設計帶來很高的彈性。 並減少過度拆元件造成的傳遞參數問題,也就是 props drilling ,常見使用方法有 &...

2025-09-18 ‧ 由 Yanya 分享
DAY 19

在 Vue 過氣前要學的第十九件事 - 從單頁升級成多頁 ( 上 ) / Vue Router

前言 為什麼我們會需要 Vue Router,或放大來說: 為甚麼我們需要路由管理呢? 現代大多的前端框架都是採 SPA 架構,這也代表了頁面切換是不再依靠...

2025-09-19 ‧ 由 Yanya 分享
DAY 20

在 Vue 過氣前要學的第二十件事 - 從單頁升級成多頁( 下 ) / Vue Router

前情提要 昨天我們帶入了最簡單的 Vue Router 安裝並使用。那今天我們將要進入稍稍進階的使用方法,運用得當可以讓你省去很多程式碼,同時還有保有原本的效果...

2025-09-20 ‧ 由 Yanya 分享