iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

1 Like 0 留言 329 瀏覽

鐵人賽 Vue.js DAY 28

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

技術第27天 - 建立一個簡單的部落格頁面

第27天 - 建立一個簡單的部落格頁面在第27天，我完成了Vue 3 Vue 3 Composition API 課程，建立一個簡單的部落格來顯示文章。該網站...

Connie ‧ 2025-09-12

1 Like 0 留言 239 瀏覽

鐵人賽 Vue.js DAY 12

在 Vue 過氣前要學的三十件事系列第 12 篇

技術在 Vue 過氣前要學的第十二件事 - 如果 IF / v-if

前言在 Vue 開發中，我們經常需要根據條件顯示或隱藏特定 DOM 元素。常見的情境有：表單錯誤訊息只在輸入驗證失敗時顯示。 API 請求後才顯示資料、...

Yanya ‧ 2025-09-12

0 Like 0 留言 333 瀏覽

鐵人賽 Vue.js DAY 27

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

技術第26天 - 從 AlertBar 中抽取邏輯和元件

在第26天，我檢視了 AlertBar 元件的程式碼，並發現兩項改進可以讓它更乾淨。該元件包含一個靜態標籤 (static label) 和一個雙向綁定...

Connie ‧ 2025-09-11

2 Like 0 留言 488 瀏覽

鐵人賽 Vue.js DAY 11

在 Vue 過氣前要學的三十件事系列第 11 篇

技術在 Vue 過氣前要學的第十一件事 - 抓住 Vue 的心 / v-bind

前言 v-bind 是非常常見的內置指令，常用於 HTML attribute，例如 style, class, props, etc.。放的位置會在 ele...

Yanya ‧ 2025-09-11

0 Like 0 留言 317 瀏覽

鐵人賽 Vue.js DAY 26

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

技術第 25 天 - Alert 元件第 4 部分 - 更新 Alert Bar 以重新開啟已關閉的 Alert

在第 25 天，我擴充了 Alert Bar 元件來顯示已關閉 Alert 的按鈕。接著，使用者可以選擇重新開啟所有已關閉的 Alert，或是特定類型的 Ale...

Connie ‧ 2025-09-10

1 Like 0 留言 484 瀏覽

鐵人賽 Vue.js DAY 10

在 Vue 過氣前要學的三十件事系列第 10 篇

技術在 Vue 過氣前要學的第十件事 - 從打好基本功開始 / Directives

前言其實一開始很猶豫要不要寫這個篇章，因為如果你用過 Vue 那接下來這些指令你基本上應該是爛熟於心。不過考慮到這些指令是基本上你不可能可以避免的功能，除非...

Yanya ‧ 2025-09-10

1 Like 0 留言 274 瀏覽

鐵人賽 Vue.js DAY 25

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

技術第 24 天 - Alert 元件第 3 部分 - 新增用於更換樣式的 Alert Bar

第 24 天 - Alert 元件第 3 部分 - 新增用於更換樣式的 Alert Bar 在第 24 天，我建立了一個 Alert Bar 元件，用來顯示或...

Connie ‧ 2025-09-09

3 Like 0 留言 647 瀏覽

鐵人賽 Vue.js DAY 9

在 Vue 過氣前要學的三十件事系列第 9 篇

技術在 Vue 過氣前要學的第九件事 - Virtual DOM 要走入歷史了嗎? / Vapor Mode

前言 Vue 3.6.0-alpha.1 推出了，其中最特殊的應該就是這個 Vapor Mode 了，就來看一下這個新的模式會有什麼幫助吧。概述 Vapor...

Yanya ‧ 2025-09-09

0 Like 0 留言 329 瀏覽

鐵人賽 Vue.js DAY 24

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

技術第23天 - Alert 組件第二部分 - 動態渲染 (Dynamic Rendering) SVG 圖示

在第23天，我動態渲染警示（alert）的 SVG 圖示，因為動態渲染更易於維護（maintainable）、擴展（scalable）及高效（efficient...

Connie ‧ 2025-09-08

0 Like 0 留言 408 瀏覽

鐵人賽 Vue.js DAY 23

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

技術第22天 - Alert Component 第一部份 - Alert List 和 Alert Components

第22天，我開始進行 Vue 3、Angular 20 以及 Svelte 5 的 Alert Component 練習。該 Alert component...

Connie ‧ 2025-09-07

0 Like 0 留言 441 瀏覽

鐵人賽 Vue.js DAY 22

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

技術第21天 - 部署 Github 個人檔案專案到 Github Pages

在第21天，我會將所有的示範部署到 Github Pages，因為 Github Pages 是免費的，且可以透過 Github Actions 自動化處理。...

Connie ‧ 2025-09-06

0 Like 0 留言 367 瀏覽

鐵人賽 Vue.js DAY 21

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

技術第 20 天 - Github Card 專案第三部分 - 樣式設計

樣式設計其實是這個練習中最簡單的部分。步驟在不同框架中通常是相同的。安裝 tailwindcss 和 DaisyUI 在 CSS 檔案中加入 DaisyUI...

Connie ‧ 2025-09-05

0 Like 0 留言 314 瀏覽

鐵人賽 Vue.js DAY 20

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

技術第 19 天 - Github 卡片專案第二部分 - 元件組合

示範中使用卡片佈局 (card layout) 顯示 Github 使用者。GithubProfileList 會迭代一個使用者名稱的清單，並在 GithubP...

Connie ‧ 2025-09-04

3 Like 1 留言 913 瀏覽

鐵人賽 Vue.js DAY 4

在 Vue 過氣前要學的三十件事系列第 4 篇

技術在 Vue 過氣前要學的第四件事 - 2025 了還要用 .value ?

前言在 Vue 的使用中你可能會看到 ref 跟 reactive，這是 Composition API 的核心，讓資料具備響應式。但平平都是用來做變數的引...

Yanya ‧ 2025-09-04

0 Like 0 留言 429 瀏覽

鐵人賽 Vue.js DAY 19

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

技術第18天 - Github Card 專案第一部分 - 資料擷取

第18天，我開始在 Vue 3、Angular 19 和 Svelte 5 中進行 Github 使用者個人資料的練習。我的 CSS 技術不強，因此我會遵循講...

Connie ‧ 2025-09-03

2 Like 0 留言 1050 瀏覽

鐵人賽 Vue.js DAY 3

在 Vue 過氣前要學的三十件事系列第 3 篇

技術在 Vue 過氣前要學的第三件事 - Rolldown 上位後會對 Vite 產生什麼影響

前言在前面的篇章中我們快速的帶過 Vite 和 SFC 檔案，今天我們會介紹 Snippet 快速創建 SFC 模板和 Vite 底層如何打包以及 Rolld...

Yanya ‧ 2025-09-03

0 Like 0 留言 324 瀏覽

鐵人賽 Vue.js DAY 18

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

技術第 17 天 - 在 HTML 模板中渲染動態內容

第 17 天 - 在 HTML 模板中渲染動態內容在第 17 天，我示範如何在元件中渲染動態內容。Vue 3 將內容投影到 slots，並可選擇性地顯示插槽屬...

Connie ‧ 2025-09-02

0 Like 0 留言 205 瀏覽

鐵人賽 Vue.js DAY 17

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

技術第16天 - 使用元件事件選擇咖啡方案

在第16天，當選擇了一個咖啡方案 (coffee plan) 時，我會在該方案周圍加上邊框。其他咖啡方案則變成非活躍狀態，並移除邊框。CoffeePlan 組件...

Connie ‧ 2025-09-01

0 Like 0 留言 315 瀏覽

鐵人賽 Vue.js DAY 16

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

技術第 15 天- Add a Coffee Plan Form

第 15 天- Add a Coffee Plan Form 在第15天，我擴展了 PlanPicker 組件，加入了一個 AddCoffeePlan 組件，用...

Connie ‧ 2025-08-31

2 Like 0 留言 529 瀏覽

鐵人賽 Vue.js DAY 2

在 Vue 過氣前要學的三十件事系列第 2 篇

技術在 Vue 過氣前要學的第二件事 - Vue 到底是什麼

前言在研究 Vue 的時候第一個吸引我的，絕對是版本名稱。 1.0: "Evangelion" (新世紀福音戰士) 2.0 &quot...

Yanya ‧ 2025-09-02

1 Like 1 留言 845 瀏覽

鐵人賽 Vue.js DAY 1

在 Vue 過氣前要學的三十件事系列第 1 篇

技術在 Vue 過氣前要學的第一件事 - 先了解自己

前言今天是 9 月 1 號, 在這個特別的日子裡~為什麼特別呢, 因為今天是友克鑫集合是我鐵人賽開賽的第一天啦! 話不多說直接開始身為一名前端工程師，對框架...

Yanya ‧ 2025-09-01

0 Like 0 留言 312 瀏覽

鐵人賽 Vue.js DAY 15

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

技術第14天 - 建立 PlanPicker 父元件

建立 PlanPicker 元件在第14天，我繼續重構 App 元件，將咖啡計畫清單抽取到新的 PlanPicker 元件中。這樣不僅讓 App 元件更乾淨，...

Connie ‧ 2025-08-30

0 Like 0 留言 417 瀏覽

鐵人賽 Vue.js DAY 14

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

技術第 13 天- 建立帶有 Prop 的 CoffeePlan 元件

建立 CoffeePlan 元件第 13 天，我開始將 HTML 程式碼重構為可重用的 CoffeePlan 元件。該元件將接受一個 name 輸入，並在 H...

Connie ‧ 2025-08-29

1 Like 0 留言 361 瀏覽

鐵人賽 Vue.js DAY 13

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

技術第 12 天 - 開始 Vue 元件入門課程

使用 JavaScript 框架的元件基礎在第 12 天，我開始觀看 Vue School 的 Vue Component Fundamentals with...

Connie ‧ 2025-08-28

1 Like 1 留言 245 瀏覽

鐵人賽 Vue.js DAY 1

每天一點 Vue.js，30 天做出一個雅思學習應用系列第 1 篇

技術專案介紹：Vue.js + 雅思學習目標

大家好！這是我參加鐵人賽的第一天文章 🎉。這次我選擇的主題是「Vue.js + 雅思學習目標」，為什麼會把前端框架和英文考試放在一起呢？原因很簡單：一方面我想...

gagahsu ‧ 2025-08-27

0 Like 0 留言 478 瀏覽

鐵人賽 Vue.js DAY 12

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

技術第11天將 Vue 3、Svelte 5 和 Angular 應用程式部署到 Github Pages

在第11天，我會把所有示範專案部署到 Github Pages，因為 Github Pages 是免費且我手動部署也很簡單。使用 Github Actions...

Connie ‧ 2025-08-27

0 Like 0 留言 1074 瀏覽

鐵人賽 Vue.js DAY 11

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

技術第10天 - Vue 3、Svelte 5 和 Angular 的響應式介紹

在第10天，我們終於學習了一個關鍵的響應式概念：從現有狀態衍生新狀態。在 Vue 3 與 Angular 中，使用 computed 函數來從其他狀態創建只讀的...

Connie ‧ 2025-08-26

0 Like 0 留言 965 瀏覽

鐵人賽 Vue.js DAY 10

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

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

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

Connie ‧ 2025-08-25

0 Like 0 留言 1077 瀏覽

鐵人賽 Vue.js DAY 9

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

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

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

Connie ‧ 2025-08-24

0 Like 0 留言 805 瀏覽

鐵人賽 Vue.js DAY 8

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

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

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

Connie ‧ 2025-08-23

技術 第27天 - 建立一個簡單的部落格頁面

技術 在 Vue 過氣前要學的第十二件事 - 如果 IF / v-if

技術 第26天 - 從 AlertBar 中抽取邏輯和元件

技術 在 Vue 過氣前要學的第十一件事 - 抓住 Vue 的心 / v-bind

技術 第 25 天 - Alert 元件第 4 部分 - 更新 Alert Bar 以重新開啟已關閉的 Alert

技術 在 Vue 過氣前要學的第十件事 - 從打好基本功開始 / Directives

技術 第 24 天 - Alert 元件 第 3 部分 - 新增用於更換樣式的 Alert Bar

技術 在 Vue 過氣前要學的第九件事 - Virtual DOM 要走入歷史了嗎? / Vapor Mode

技術 第23天 - Alert 組件第二部分 - 動態渲染 (Dynamic Rendering) SVG 圖示

技術 第22天 - Alert Component 第一部份 - Alert List 和 Alert Components

技術 第21天 - 部署 Github 個人檔案專案到 Github Pages

技術 第 20 天 - Github Card 專案 第三部分 - 樣式設計

技術 第 19 天 - Github 卡片專案 第二部分 - 元件組合

技術 在 Vue 過氣前要學的第四件事 - 2025 了還要用 .value ?

技術 第18天 - Github Card 專案 第一部分 - 資料擷取

技術 在 Vue 過氣前要學的第三件事 - Rolldown 上位後會對 Vite 產生什麼影響

技術 第 17 天 - 在 HTML 模板中渲染動態內容

技術 第16天 - 使用元件事件選擇咖啡方案

技術 第 15 天- Add a Coffee Plan Form

技術 在 Vue 過氣前要學的第二件事 - Vue 到底是什麼

技術 在 Vue 過氣前要學的第一件事 - 先了解自己

技術 第14天 - 建立 PlanPicker 父元件

技術 第 13 天- 建立帶有 Prop 的 CoffeePlan 元件

技術 第 12 天 - 開始 Vue 元件入門課程

技術 專案介紹：Vue.js + 雅思學習目標

技術 第11天 將 Vue 3、Svelte 5 和 Angular 應用程式部署到 Github Pages

技術 第10天 - Vue 3、Svelte 5 和 Angular 的響應式介紹

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

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

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

標記使用者