iT邦幫忙

鐵人檔案

2025 iThome 鐵人賽
回列表
Vue.js

新手學習Vue.js與實作之旅 系列

這系列的文章將紀錄我30天學習網頁前端框架Vue.js的過程,從基礎語法與核心概念(如:資料綁定、事件處理等),逐步延伸到更進階的主題(如:元件生命週期、Vue Router等),除了學習語法概念外,也會搭配範例程式碼和實作應用來增進對知識的理解。

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

Day1 踏入框架的世界

哈囉大家好~我目前是就讀資訊相關科系的大三生繼去年參加佛心分享的主題,睽違一年又來參加Ithome鐵人賽了 學習動機 由於去年學習過基礎的HTML、CSS、Ja...

2025-09-06 ‧ 由 zhiz 分享
DAY 2

Day2 建置Vue.js開發環境

昨天對於網頁前端框架有初步的認識,今天的內容將介紹建置Vue.js開發環境的兩種方法哦~首先我們要來安裝非常實用的程式編輯器VS Code以及擴充套件 Visu...

2025-09-07 ‧ 由 zhiz 分享
DAY 3

Day3 Vue專案結構 + 基礎概念

昨天透過方法二 (安裝Node.js、npm) 創建一個新的Vue專案後,並在VS Code打開此檔案就會看到Vue的專案結構,今天我們就來一探究竟這些檔案的架...

2025-09-08 ‧ 由 zhiz 分享
DAY 4

Day4 Vue模板語法- 插值表達式

今天在開始介紹Vue模板語法之前,首先要來介紹Vue 元件可以使用兩種不同的 API 樣式進行撰寫:在這個系列文章中,起初學習基礎語法、範例程式碼會使用Opti...

2025-09-09 ‧ 由 zhiz 分享
DAY 5

Day5 Vue指令- 屬性綁定與列表渲染

昨天介紹如何透過使用插值表達式 {{ }} 動態更換文本內容,今天將繼續介紹如何透過Vue指令來更換 HTML 標籤的「屬性」~ 屬性綁定 v-bind 將 H...

2025-09-10 ‧ 由 zhiz 分享
DAY 6

Day6 Vue指令- 事件處理與修飾符

今天要來介紹如何處理基本的事件監聽,並且搭配各種修飾符來控制事件的行為,例如阻止事件冒泡、取消預設行為、限制觸發條件等,讓事件處理變得更加靈活且強大。 事件處理...

2025-09-11 ‧ 由 zhiz 分享
DAY 7

Day7 Vue響應式基礎 + 實作簡易計數器

前幾天的內容都是使用Options API來撰寫範例程式碼,今天將更深入探討Composition API,並且透過實作簡易計數器來比較兩種寫法~ setup函...

2025-09-12 ‧ 由 zhiz 分享
DAY 8

Day8 Vue指令- 雙向綁定與修飾符

在Day5 Vue指令-屬性綁定與列表渲染中有介紹到v-bind屬性綁定,它是一種單向的資料流綁定,而今天的內容將介紹資料的雙向綁定與修飾符。 什麼是雙向綁定?...

2025-09-13 ‧ 由 zhiz 分享
DAY 9

Day9 Vue指令- 條件渲染

今天的內容將介紹條件渲染的兩種常見方式:v-if 和 v-show,雖然兩者功能相似都是「依照條件判斷決定內容是否呈現在畫面上」,但兩者仍然存在一些差異。 v-...

2025-09-14 ‧ 由 zhiz 分享
DAY 10

Day10 實作Colorful Notes

在昨天比較條件渲染的內容中,透過實作Notes的部分程式碼來更加釐清v-if和v-show寫法的差異,今天內容將探討實作Notes的程式碼撰寫,複習先前學習過的...

2025-09-15 ‧ 由 zhiz 分享