iT邦幫忙

鐵人檔案

2025 iThome 鐵人賽
回列表
Vue.js

作為 Angular 專家探索 Vue 3 和 Svelte 5 系列

作為一名 Angular Google Developer Expert,我一直專注於使用 Angular 強大的生態系統來構建企業級應用程式。然而,我也意識到自己錯過了其他流行的前端框架,特別是 Vue 3 和 Svelte 5。

在接下來的三十天裡,我將挑戰自己:
- 完成 Vue School 上專注於 Vue 3 的課程。
- 使用 Angular 19 和 Svelte 5 重建每個課程的專案或範例,以便直接比較學習成果。

這趟旅程將我帶出 Angular 的舒適圈,提供一個記錄與分享學習過程的平台。我的目標是打造一份對於開發者特別是企業應用程式開發者有幫

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

第 0 天 — 為什麼我參加這個挑戰

我是 Angular 的 Google Developer Expert(GDE),自 2021 年起開始撰寫各種 Angular 主題的部落格文章。我的前端旅...

2025-08-16 ‧ 由 connieleung 分享
DAY 2

第 1 天 - 建立新專案、安裝相依套件及設定全域 CSS 樣式

這篇文章內容主要來自 Vue School 的 "Vue.js 3 Fundamental with the Composition API&quot...

2025-08-17 ‧ 由 connieleung 分享
DAY 3

第 2 天 - 建立 ShoppingCart 元件

建立購物車元件 Vue 3 應用程式 刪除了 components/ 資料夾中所有檔案。在 components/ 目錄底下建立 ShoppingCart.vu...

2025-08-18 ‧ 由 connieleung 分享
DAY 4

第 3 天:在模板中使用表達式

在模板中插值 header 表達式 Vue 3 應用程式 在 ShoppingCart 組件的 script 標籤內,我會建立一個初始值的 header ref...

2025-08-19 ‧ 由 connieleung 分享
DAY 5

第 4 天 - Vue 3、Svelte 5 與 Angular 19 的清單渲染

清單渲染與刪除按鈕 今天我要示範如何渲染一個項目清單。每列還會有一個刪除按鈕,可以從清單中刪除項目。當清單更新後,模板會反應性地重新渲染清單。 新增了一個 It...

2025-08-20 ‧ 由 connieleung 分享
DAY 6

第 5 天:元件中的用戶輸入處理

在第五天,我要示範如何將輸入欄位和核取方塊(checkbox)雙向綁定到響應式(reactive)狀態。當你在輸入欄位編輯數值時,對應的狀態會即時更新並顯示在畫...

2025-08-21 ‧ 由 connieleung 分享
DAY 7

第 6 天 - 元件中的用戶事件處理

在第 6 天,我將說明 Vue 3、SvelteKit 與 Angular 如何在購物車元件中回應 HTML 事件。 在購物車元件中,我們會在表單送出事件時,將...

2025-08-22 ‧ 由 connieleung 分享
DAY 8

第七天 - 使用內建控管流程語法或指令進行條件渲染

本篇文章示範了 Vue 3、SvelteKit 與 Angular 如何使用內建的控管流程語法或指令來進行條件渲染。Vue 3 使用 v-if、v-else-i...

2025-08-23 ‧ 由 connieleung 分享
DAY 9

第 8 天 - 在 Vue 3、Svelte 5 和 Angular 中動態綁定 CSS 類別與樣式

在第8天,我將示範 Vue 3、SvelteKit 與 Angular 如何執行動態的 CSS 類別與樣式綁定。展示中包含 CSS 類別綁定與樣式綁定的範例。當...

2025-08-24 ‧ 由 connieleung 分享
DAY 10

第 9 天 - 在 Vue 3、Svelte 5 和 Angular 中屬性綁定

在第 9 天,我將示範在 Vue 3、SvelteKit 和 Angular 中屬性綁定(attribute binding)的範例。範例中 Save Item...

2025-08-25 ‧ 由 connieleung 分享