iT邦幫忙

鐵人檔案

2025 iThome 鐵人賽
回列表
Vue.js

Vue 新手學習紀錄 系列

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

參賽天數 24 天 | 共 24 篇文章 | 0 人訂閱 訂閱系列文 RSS系列文
DAY 1

Day 1 | 訂定最終目標 & 建立 Vue.js 開發環境

這次 30 天的挑戰將從一個產品下手去學習,至於為什麼用產品而不是單純學語法勒,因為單純語法太無聊了 ouo產品目標是「推甄經驗分享網站」,其實從暑假就想做了,...

2025-09-15 ‧ 由 Zoey 分享
DAY 2

Day 2|首頁 Layout:建立網站 Header

新增 Header 元件 在 src/components 內新增一個 Header.vue 用來放 header 的程式碼 <template>...

2025-09-16 ‧ 由 Zoey 分享
DAY 3

Day 3|文章列表雛型:用 v-for 做出表格

目前資料暫時使用 json 的方式引入,考量到資料欄位很多,最後決定用最樸實的表格呈現,先來看看成果好了 建立表格元件 在 src/components 中新增...

2025-09-17 ‧ 由 Zoey 分享
DAY 4

Day 4|Props 與 Emit: 資料如何在元件之間傳遞

Day3 的文章有使用到資料傳遞,感覺開發上會蠻常用到的,今天就稍微深入了解一下兩個的區別 Props:由外向內傳資料 靜態傳入最簡單的情境是父元件直接把一個靜...

2025-09-18 ‧ 由 Zoey 分享
DAY 5

Day 5|Computed + filter 製作簡易搜尋功能

今天打算製作簡易的搜尋功能,會使用到 v-model 和 computed 的概念 v-model 用來雙向綁定資料 computed 用來根據輸入自動計算結...

2025-09-19 ‧ 由 Zoey 分享
DAY 6

Day 6|呈現詳細資訊

今天主要要做一個詳細資訊的呈現,整個資料呈現做完之後覺得把所有資訊放在一個表格裡面有點亂,所以想說試試看寫一個詳細資料呈現的方式,剛好會用到 Day4 所寫到的...

2025-09-20 ‧ 由 Zoey 分享
DAY 7

Day 7|分頁 Pagination

今日目標: 表格下方加入頁數,每頁 10 筆資料 若頁數 <= 1,則不顯示頁數切換 設計 Pagination.vue 在 src/componen...

2025-09-21 ‧ 由 Zoey 分享
DAY 8

Day 8|實作新增資料

今日目標按下分享經驗後跳出表單,填寫完後按分享經驗按鈕就可以囉 實作分享表單 在 src/components 中新增 NewPostModal.vue &lt...

2025-09-22 ‧ 由 Zoey 分享
DAY 9

Day 9|用 vee-validate 做表單驗證

昨天做了「分享經驗」的表單,可以輸入學校、系所、經歷與結果。但仔細想想,如果使用者亂填,資料格式就會變很亂,所以今天要來處理表單驗證,確保輸入格式正確。 為什麼...

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

Day 10|Options API 入門

在 Vue 3 推出之前,Vue 2 只有一種寫法 —— Options API。它的特色是:用一個物件把所有功能分區塊寫清楚。 資料 → data() 方法...

2025-09-24 ‧ 由 Zoey 分享