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

0 Like 0 留言 1103 瀏覽

鐵人賽 Vue.js DAY 7

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

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

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

connieleung ‧ 2025-08-22

0 Like 0 留言 1140 瀏覽

鐵人賽 Vue.js DAY 6

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

技術第 5 天：元件中的用戶輸入處理

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

connieleung ‧ 2025-08-21

1 Like 1 留言 272 瀏覽

鐵人賽 Vue.js DAY 1

Vue 全攻略：30 天技能樹養成系列第 1 篇

技術【Day 1】Vue 3 核心演進：不只是改版，更是思維的躍遷

聯繫我如果有任何問題或建議，歡迎隨時聯繫我： GitHub Email 前言今年，再次挑戰自我！也謝謝我的好朋友，邀請我繼續參加這場「攀登技術...

Chill 77 ‧ 2025-08-20 ‧團隊一蘭拉麵基本配料 5 倍辣

0 Like 0 留言 451 瀏覽

鐵人賽 Vue.js DAY 5

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

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

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

connieleung ‧ 2025-08-20

0 Like 0 留言 443 瀏覽

鐵人賽 Vue.js DAY 4

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

技術第 3 天：在模板中使用表達式

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

connieleung ‧ 2025-08-19

0 Like 0 留言 503 瀏覽

鐵人賽 Vue.js DAY 3

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

技術第 2 天 - 建立 ShoppingCart 元件

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

connieleung ‧ 2025-08-18

0 Like 0 留言 715 瀏覽

鐵人賽 Vue.js DAY 2

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

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

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

connieleung ‧ 2025-08-17

2 Like 1 留言 915 瀏覽

鐵人賽 Vue.js DAY 1

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

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

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

connieleung ‧ 2025-08-16

6 Like 1 留言 2736 瀏覽

技術 🌟新書上市🌟 Vue.js → Nuxt 入門教學書籍推薦！【鐵人賽系列】想要 SSR 嗎？就使用 Nuxt 吧！Nuxt 讓 Vue.js 更好處理 SEO 搜尋引擎最佳化

👋 Hello 大家好，我是 Ryan 借用大家的 iT 邦幫忙版面及時間來稍微宣傳一下新書，本文文末有免費贈書！！！歡迎個人、讀書會、學校社團及社群來洽詢索...

Ryan ‧ 2025-08-06

0 Like 0 留言 898 瀏覽

技術 vue的 Teleport

在 Vue 中，Teleport是一個特殊的內建元件，從Vue 3開始引入。元件的邏輯關聯性。這對於一些需要特定 DOM 結構的功能（如模態框、通知、工具提示...

sharongao ‧ 2024-12-09

3 Like 3 留言 995 瀏覽

鐵人賽 Modern Web DAY 30

Vue 3 初學者：用實作帶你看過核心概念系列第 30 篇

技術 Vue 3 用實作帶你看過核心概念 - Day 30：新手村的鐵人證書 - 完賽心得

參賽心得花了整整半年左右的時間，每天下班都很用心的準備範例或是看書，這一段旅程對我來說真的很重要。擔心、害怕跟不安的心情一直充斥自己心中，擔心寫錯或是寫不好...

Antonio ‧ 2024-10-13

1 Like 0 留言 755 瀏覽

鐵人賽 Modern Web DAY 29

Vue 3 初學者：用實作帶你看過核心概念系列第 29 篇

技術 Vue 3 用實作帶你看過核心概念 - Day 29：Composables(組合式函數)

目錄 Composition API Composables vs Options API mixins 使用差異 Composables 嵌套使用 - u...

Antonio ‧ 2024-10-12

1 Like 0 留言 1538 瀏覽

鐵人賽 JavaScript DAY 29

Vue.js學習中的細節陷阱：30天自我學習指南系列第 29 篇

技術 Day 29: Vue 的不同渲染模式 - CSR、SSR和通用渲染模式

Vue可以用來構建單頁應用程式 (SPA)，打包後的程式碼會完全在瀏覽器上執行，透過 JavaScript 生成 DOM 元素並交由瀏覽器進行呈現(Client...

Rafael ‧ 2024-10-12

1 Like 0 留言 889 瀏覽

鐵人賽 Modern Web DAY 28

Vue 3 初學者：用實作帶你看過核心概念系列第 28 篇

技術 Vue 3 用實作帶你看過核心概念 - Day 28：官方 Vue Router 的應用與技巧

目錄 Vue Router 基本使用 Vue Router 路由連結與路由守衛介紹 - RouterLink & Navigation Guards...

Antonio ‧ 2024-10-11

0 Like 0 留言 1426 瀏覽

鐵人賽 JavaScript DAY 28

Vue.js學習中的細節陷阱：30天自我學習指南系列第 28 篇

技術 Day 28: Vue 的元件更新優化-重新渲染問題 (Re-render)

今天要來談談 Vue官網效能優化的部分，昨天我們複習了使用 JavaScript 動態載入的特性來進行程式碼分割，這種方法將程式碼拆分成不同檔案，減少了初次...

Rafael ‧ 2024-10-11

2 Like 0 留言 761 瀏覽

鐵人賽 Modern Web DAY 27

Vue 3 初學者：用實作帶你看過核心概念系列第 27 篇

技術 Vue 3 用實作帶你看過核心概念 - Day 27：VeeValidate 表單驗證工具

目錄 VeeValidate 基本使用 - 內建規則使用 VeeValidate 基本使用 - i18n 多國語系設定 VeeValidate 手動設置驗證...

Antonio ‧ 2024-10-10

1 Like 0 留言 898 瀏覽

鐵人賽 JavaScript DAY 27

Vue.js學習中的細節陷阱：30天自我學習指南系列第 27 篇

技術 Day 27: JavaScript 模組(module) 和 Vue的程式碼分割 (code spliting)

終於來到鐵人賽的倒數第4天，今天要介紹 JavaScript 滿常見的動態載入(Dynamic import)，是基於JavaScript 模組(module...

Rafael ‧ 2024-10-10

2 Like 0 留言 605 瀏覽

鐵人賽 Modern Web DAY 26

Vue 3 初學者：用實作帶你看過核心概念系列第 26 篇

技術 Vue 3 用實作帶你看過核心概念 - Day 26：KeepAlive 與 Teleport 內置組件

目錄 KeepAlive 內置組件 - 動態切換組件 KeepAlive 組件 prop - include、exclude、max KeepAlive 緩...

Antonio ‧ 2024-10-09

0 Like 0 留言 1094 瀏覽

鐵人賽 JavaScript DAY 26

Vue.js學習中的細節陷阱：30天自我學習指南系列第 26 篇

技術 Day 26: JavaScript 的錯誤處理和 Vue元件錯誤捕捉 - onErrorCaptured

昨天結束了5天的SOLID設計之旅，今天來回歸到 JavaScript 一些沒注意的觀念吧~~。今天要聊的是錯誤處理，讓開發者能夠在程式發生錯誤時作出即時反應...

Rafael ‧ 2024-10-09

1 Like 0 留言 439 瀏覽

鐵人賽 Modern Web DAY 25

Vue 3 初學者：用實作帶你看過核心概念系列第 25 篇

技術 Vue 3 用實作帶你看過核心概念 - Day 25：自定義指令(Custom Directives)

目錄 v-focus 自定義指令特色自定義指令實作方式：全域註冊與區域註冊 v-localStorage - 自定義指令表單緩存結論小試身手 Vu...

Antonio ‧ 2024-10-08

0 Like 0 留言 645 瀏覽

鐵人賽 JavaScript DAY 25

Vue.js學習中的細節陷阱：30天自我學習指南系列第 25 篇

技術 Day 25: SOLID - 依賴反轉原則(DIP) 和 Vue 的依賴注入模式

今天要介紹 SOLID 設計準則的最後一個依賴反轉原則(Dependency Inversion Principle, DIP)，我覺得是一個光看定義不太好懂...

Rafael ‧ 2024-10-08

0 Like 0 留言 366 瀏覽

鐵人賽 Software Development DAY 24

我獨自開發 - 30天進化之路，掌握 Laravel + Nuxt 系列第 24 篇

技術 D24 - 從 Options API 轉換到 Composition API：關鍵知識點解析

大家好！在前面的文章中，我們討論了開發過程中的一些反思。今天，我們將探討 Vue 3 中的一個重要主題：如何將 Options API 的程式碼轉換為 Comp...

rewrite ‧ 2024-10-07

2 Like 0 留言 729 瀏覽

鐵人賽 Modern Web DAY 24

Vue 3 初學者：用實作帶你看過核心概念系列第 24 篇

技術 Vue 3 用實作帶你看過核心概念 - Day 24：異步加載(Lazy loading)

目錄組件懶加載遠程模塊加載 - vite-federation 路由懶加載總結在大型項目中，我們通常需要將應用拆分為更小的代碼模塊，並僅在需要時...

Antonio ‧ 2024-10-07

0 Like 0 留言 548 瀏覽

鐵人賽 JavaScript DAY 24

Vue.js學習中的細節陷阱：30天自我學習指南系列第 24 篇

技術 Day 24: SOLID - 介面分離原則(ISP) 和 Vue 的動態元件切換

今天要介紹SOLID的第四篇- 介面分離原則(Interface Segregation Principle, ISP)，一開始第一次學習接觸會覺得SOLID這...

Rafael ‧ 2024-10-07

1 Like 1 留言 626 瀏覽

鐵人賽 Modern Web DAY 23

Vue 3 初學者：用實作帶你看過核心概念系列第 23 篇

技術 Vue 3 用實作帶你看過核心概念 - Day 23：依賴注入( Provide-Inject )

目錄 Prop 逐級透傳問題(Prop Drilling) Provide-Inject 基礎使用 Inject 選項屬性介紹 Provide 函數定義 -...

Antonio ‧ 2024-10-06

0 Like 0 留言 530 瀏覽

鐵人賽 JavaScript DAY 23

Vue.js學習中的細節陷阱：30天自我學習指南系列第 23 篇

技術 Day 23: SOLID - 里式替換原則(LSP) 和 Vue的組合式函式擴充

本篇要介紹 SOLID 的第三個原則- Liskov Substitution Principle，里氏替換原則(LSP)，老實說相關參考討論的資源，主要是針對...

Rafael ‧ 2024-10-06

1 Like 0 留言 738 瀏覽

鐵人賽 Modern Web DAY 22

Vue 3 初學者：用實作帶你看過核心概念系列第 22 篇

技術 Vue 3 用實作帶你看過核心概念 - Day 22：v-slot 插槽使用

目錄 slot 默認內容插槽 slot 具名插槽子組件插槽傳遞參數 - 作用域插槽 slot 與 props 設計方式比較 - 以切換卡片展示型態為例條...

Antonio ‧ 2024-10-05

0 Like 0 留言 957 瀏覽

鐵人賽 JavaScript DAY 22

Vue.js學習中的細節陷阱：30天自我學習指南系列第 22 篇

技術 Day 22: SOLID - 開放封閉原則(OCP) 和 Vue的元件開發

今天來到認識另一個SOLID設計準則-開放封閉原則(OCP)，老實說寫起來比較沒把握，因為大部分的探討資源大多是針對class物件去作延展探討，或是國外以Rea...

Rafael ‧ 2024-10-05

1 Like 0 留言 791 瀏覽

鐵人賽 Modern Web DAY 21

Vue 3 初學者：用實作帶你看過核心概念系列第 21 篇

技術 Vue 3 用實作帶你看過核心概念 - Day 21：組件透傳屬性(Attributes)的應用

目錄單根節點透傳屬性基礎應用多根節點屬性繼承方式深層子組件透傳方式總結單根節點透傳屬性基礎應用當父組件向子組件傳遞屬性或監聽器，而這些屬性未...

Antonio ‧ 2024-10-04

0 Like 0 留言 1655 瀏覽

鐵人賽 JavaScript DAY 21

Vue.js學習中的細節陷阱：30天自我學習指南系列第 21 篇

技術 Day 21: SOLID - 單一職責原則(SRP) 和 Vue的元件開發

感謝大家陪伴來到最後的10天，不管有沒有參賽，能走到這裡真的非常不容易！希望最後這段時間，我能帶給大家一點不同的程式設計上面的思維，雖然看起來可能跟要原本要介紹...

Rafael ‧ 2024-10-04

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

技術 第 5 天：元件中的用戶輸入處理

技術 【Day 1】Vue 3 核心演進：不只是改版，更是思維的躍遷

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

技術 第 3 天：在模板中使用表達式

技術 第 2 天 - 建立 ShoppingCart 元件

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

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