iT邦幫忙

鐵人檔案

2025 iThome 鐵人賽
回列表
Vue.js

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

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

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

Day11 Vue 計算屬性

隨著專案功能與操作愈來愈複雜,在模板內寫入過多的邏輯運算式,會讓程式看起來很雜亂並且也不利於維護,因此可以透過使用計算屬性computed來改善此問題。 計算屬...

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

Day 12 Vue 監聽器

昨天提到計算屬性 Computed 是根據相依的資料發生改變,才會重新執行運算,否則就會直接返回暫存的結果,而今天要介紹的監聽器 watch 是根據響應式資料發...

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

Day13 Vue 元件的生命週期

今天的內容將探討 Vue 元件的一生 Vue 的實體物件從開始創建、初始化資料、DOM 元素掛載、資料渲染與更新、卸載等過程,稱作生命週期。 Hooks fu...

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

Day14 Vue 元件基礎

Vue 的元件 ( component ) 是建立可重複使用、模組化 UI 的基礎,今天就來一探究竟吧! 元件是什麼? Vue 的實體 ( instance )...

2025-09-19 ‧ 由 zhiz 分享
DAY 15

Day15 Vue 元件間的傳遞 Props (上)

昨天有提到 Vue 的實體是由元件所組成,而且元件可以被重複使用,當父元件需要向子元件傳遞資料時,需要透過 props 屬性 來實現資料傳遞。 Props 是什...

2025-09-20 ‧ 由 zhiz 分享
DAY 16

Day16 Vue 元件間的傳遞 Props (下)

今天將延續昨天的內容,繼續介紹父元件向子元件傳遞資料的方式 Props Props 資料類型的驗證 當從外部傳入的 props 不符合資料類型的要求, Vu...

2025-09-21 ‧ 由 zhiz 分享
DAY 17

Day17 Vue 元件間的事件傳遞 Emit

前兩天介紹的 props 是父元件向子元件傳遞資料的方式,若子元件要將更新的狀態傳回父元件,則需要透過 event 觸發父元件的更新。 子元件向父元件傳遞事件...

2025-09-22 ‧ 由 zhiz 分享
DAY 18

Day18 Vue元件跨層級的傳遞

前面幾天的內容是在探討父元件和子元件間的資料傳遞,不過當根元件要傳遞到最底部的元件時,如果使用 props 一層一層傳遞,可能會影響到中間層元件造成額外的麻煩,...

2025-09-23 ‧ 由 zhiz 分享
DAY 19

Day19 Vue 插槽 Slots (上)

在前面幾天探討了元件資料傳遞的方式,不過若想要傳遞的是 DOM 內容,使得元件在不同的地方,可以渲染不同的內容,並且仍保有相同的樣式,則需要透過使用插槽 Slo...

2025-09-24 ‧ 由 zhiz 分享
DAY 20

Day20 Vue 插槽 Slots (下)

今天將延續昨天的內容,繼續介紹插槽 Slots 將父元件的內容渲染在子元件中指定的位置 條件插槽 若要根據插槽是否存在來渲染內容,可以使用 $slots 屬性和...

2025-09-25 ‧ 由 zhiz 分享