iT邦幫忙

鐵人檔案

2025 iThome 鐵人賽
回列表
Vue.js

邊學邊做:Vue.js 實戰養成計畫 系列

這次鐵人賽的主題,我將以 Vue.js 為核心進行探索與紀錄。由於我本身對 Vue.js 還不算熟悉,因此會以「新手學習」的角度出發,透過實作與紀錄的方式逐步了解這個前端框架。預計會從最基礎的環境建置、語法特性開始,延伸到元件化思維、資料綁定、路由設計與狀態管理等核心概念,並搭配簡單的小專案實踐。希望能透過這 30 天的挑戰,讓自己快速熟悉 Vue.js 的開發流程與應用場景,同時也提供給其他剛入門的開發者參考。雖然一開始可能會遇到不少挫折,但也正是透過紀錄學習過程與心得,才能累積成長,並讓「學習 Vue.js」成為一段有意義的挑戰旅程。

參賽天數 28 天 | 共 30 篇文章 | 2 人訂閱 訂閱系列文 RSS系列文 團隊Orbit Coders
DAY 21

Day 21:共享能量池 — 跨元件資料共享(store 實作)

今天要學什麼?1.多個元件取用同一個 store→ 例如星艦的「燃料」狀態,在駕駛艙顯示剩餘量,在維修艙也能操作加油。 2.修改資料的影響是同步的→ 任何一個元...

2025-10-03 ‧ 由 jaina1912 分享
DAY 22

Day 22:與外星文明溝通 — Axios

Axios 是什麼? 一個 JavaScript 函式庫,專門用來發送 HTTP 請求(像 GET、POST)到伺服器,並接收回應。可以用在 Vue、React...

2025-10-04 ‧ 由 jaina1912 分享
DAY 23

Day 23:星際任務日誌 — Vue 與本地儲存(localStorage)

我們今天localStorage主要就是學會 「如何讓使用者的資料,不會因為重整或關掉瀏覽器就消失」! 學習概念 1.認識 localStorage 瀏覽器內...

2025-10-05 ‧ 由 jaina1912 分享
DAY 24

Day 24:星雲動畫 — Vue 的過場效果與 Transition

我們今天要學習的是 Vue 內建的 <transition> 元件,它能讓你的元素或元件在進入(enter)與離開(leave)時,加上漂亮的動畫效...

2025-10-06 ‧ 由 jaina1912 分享
DAY 25

Day 25:UI 元件宇宙 — 探索 Vuetify / Element Plus

什麼是 UI 元件庫? UI 元件庫(UI Library)就是一整套「已經幫你設計好又可客製的前端元件集合」,讓你不用每次都自己寫按鈕、輸入框、彈窗。想像成:...

2025-10-07 ‧ 由 jaina1912 分享
DAY 26

Day 26:星際架構啟動 — 專案規劃與版面設計

最後的五天我們要執行Final Mission — 5 日實作計畫,設計一個Galactic Explorer!把前面 25 天學的所有技能都串起來了~! 而今...

2025-10-08 ‧ 由 jaina1912 分享
DAY 27

Day 27:星球資料艙 — 星球知識頁 (v-for + 動態路由)

我們今天要延續昨天的Final Mission — 5 日實作計畫,設計一個Galactic Explorer!今日目標:展示宇宙星球資訊,能點選切換細節頁面。...

2025-10-09 ‧ 由 jaina1912 分享
DAY 28

Day 28:宇宙觀察日誌 — localStorage 資料保存

我們今天要延續昨天的Final Mission — 5 日實作計畫,設計一個Galactic Explorer!今日目標:製作「觀察日誌」功能,記錄每日探索心得...

2025-10-10 ‧ 由 jaina1912 分享
DAY 28

Day 29:生物探測器 — 小遊戲(v-if / v-for / methods / emit)

我們今天要延續昨天的Final Mission — 5 日實作計畫,設計一個Galactic Explorer!今日目標:做一個「探索宇宙生物」的互動頁。 我們...

2025-10-12 ‧ 由 jaina1912 分享
DAY 28

Day 30:星際總結篇 — 美術與體驗優化

太好了~我們最後一天要把Galactic Explorer簡單美編!學習重點 美術整合(CSS + Vue 結構) 專案打包與部署(Vercel) 0)...

2025-10-12 ‧ 由 jaina1912 分享