iT邦幫忙

鐵人檔案

2025 iThome 鐵人賽
回列表
Vue.js

Vue 新手學習紀錄 系列

在 30 天內學會 Vue,並實作出成品

鐵人鍊成 | 共 30 篇文章 | 0 人訂閱 訂閱系列文 RSS系列文
DAY 21

Day 21 | Vue 生命週期

生命週期是什麼 每一個元件都有自己的生命週期(Lifecycle),當元件被建立、掛載到畫面、資料變化、最後被移除時,Vue 都會在這些階段呼叫特定的 hook...

2025-10-05 ‧ 由 Zoey 分享
DAY 22

Day 22 | 自定義指令

Vue 提供的指令像是 v-if、v-for 等等,除了這些指令外,我們也可以自定義一個指令 v-xxx 出來 範例 app.directive('focus'...

2025-10-06 ‧ 由 Zoey 分享
DAY 23

Day 25|Vue Transition

Vue 提供的 <transition> 元件,能讓元素進出畫面時自動套用動畫效果,不用額外的 JS,只須加上 class 名稱就能做到 相對應 c...

2025-10-07 ‧ 由 Zoey 分享
DAY 24

Day 24 | v-model 雙向綁定

之前有寫道 props 和 emits 父元件和子元件相互傳資料的方式,那 v-model 是把這兩個東西包起來的語法,可以用 v-model 同時完成資料的傳...

2025-10-08 ‧ 由 Zoey 分享
DAY 25

Day 25 | 自動保存表單內容

有時候可能打到一半不小心關掉,文章就這樣啪..沒了,所以今天想嘗試看看加入自動保存功能來解決這個問題會使用到 watch 深度監聽和 localstorage...

2025-10-09 ‧ 由 Zoey 分享
DAY 26

Day 26|Vue 效能優化: Lazy Loading 與動態載入元件

專案越來越大的時候,可能導致載入速度變慢,這時候可以用動態載入元件和 router 的 lazy loading,讓開啟時更快速。 為什麼需要 Lazy Loa...

2025-10-10 ‧ 由 Zoey 分享
DAY 27

Day 27 | 實作 Toast 提示元件

Toast 元件是一種短暫的提示訊息,目的是讓使用者知道當前做的事情是成功還是失敗,以下來看看如何建立這個元件 基本範例 Step 1: 建立 Toast 元件...

2025-10-11 ‧ 由 Zoey 分享
DAY 28

Day 28 | Vue Suspense 實現 loading 狀態

傳統的 loading 的寫法長得像底下這個樣子: <div v-if="loading">載入中...</div>...

2025-10-12 ‧ 由 Zoey 分享
DAY 29

Day 29|Vue 串接資料庫

拖到最後要來還債了qq 來寫連接資料庫的部分Step1: 建立 server 資料夾這裡是用 postgres mkdir server cd server n...

2025-10-13 ‧ 由 Zoey 分享
DAY 30

Day 30 | 來寫寫第一次參加鐵人賽的心得

到最後一天啦,想來寫寫第一次參加的心得 原本報名下去很有決心,想要在八月底完賽,沒想到就被我這樣一拖再拖...中間有很多次超想放棄,但想想寫了一些了,放棄好像有...

2025-10-14 ‧ 由 Zoey 分享