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

3 Like 0 留言 799 瀏覽

鐵人賽 Modern Web DAY 26

Vue 和 TypeScript 的最佳實踐：成為前端工程師的進階利器系列第 26 篇

技術 Day 26: 在 Vue 應用中實現懶加載與代碼分割以提升性能

簡介在現代 Web 應用開發中，隨著應用規模的增長，初始加載時間可能會變得越來越長，影響用戶體驗。本文將深入探討如何在 Vue 3 應用中實現懶加載和代碼分...

蘋果章魚MichaelHo1203 ‧ 2024-10-10

2 Like 0 留言 978 瀏覽

鐵人賽 Modern Web DAY 25

Vue 和 TypeScript 的最佳實踐：成為前端工程師的進階利器系列第 25 篇

技術 Day 25: 使用 Vitest 測試異步行為與 API 請求邏輯

簡介在現代 Vue.js 應用程序開發中，處理異步操作和 API 請求是常見且關鍵的任務。本文將深入探討如何使用 Vitest 來全面測試這些異步行為和 A...

蘋果章魚MichaelHo1203 ‧ 2024-10-09

0 Like 0 留言 1488 瀏覽

鐵人賽 JavaScript DAY 13

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

技術 Day 13: Vue元件的事件emits和參數props傳遞

今天要開始進入認識Vue元件的部分，元件間的溝通是應用中非常重要的一部分，開始允許各個元件之間資料進行互動，今天來看看基礎的元件資料傳遞有那一些細節和當初沒想過...

Rafael ‧ 2024-09-26

1 Like 0 留言 1030 瀏覽

鐵人賽 Modern Web DAY 12

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

技術 Vue 3 用實作帶你看過核心概念 - Day 12：v-on 指令 - 事件處理

目錄事件監聽類型說明內聯事件處理器傳遞自定義參數跟 javaScript Event 物件傳遞修飾符 - 減少使用者處理 DOM 事件細節事件修飾符...

Antonio ‧ 2024-09-25

0 Like 0 留言 812 瀏覽

鐵人賽 Modern Web DAY 24

Vue 和 TypeScript 的最佳實踐：成為前端工程師的進階利器系列第 24 篇

技術 Day 24: 性能優化：如何利用 UnoCSS 與 Vite 減少打包大小還有優化 vue 的各式操作

簡介我們這次討論關於性能優化的部分，以及一般開發人員在進行開發的時候要注意的事情。本文將深入探討如何利用 Vite 以及 Vue 的各種特性來優化應用性能。...

蘋果章魚MichaelHo1203 ‧ 2024-10-08

1 Like 0 留言 664 瀏覽

鐵人賽 Modern Web DAY 23

Vue 和 TypeScript 的最佳實踐：成為前端工程師的進階利器系列第 23 篇

技術 Day 23: 如何測試 Vue Router 的導航邏輯與 Pinia 的狀態管理

簡介在 Vue 3 應用程序中，Vue Router 和 Pinia 是兩個核心工具，分別用於處理路由導航和狀態管理。對這兩個工具進行有效的測試對於確保應用...

蘋果章魚MichaelHo1203 ‧ 2024-10-07

2 Like 0 留言 703 瀏覽

鐵人賽 Modern Web DAY 22

Vue 和 TypeScript 的最佳實踐：成為前端工程師的進階利器系列第 22 篇

技術 Day 22: 使用 TypeScript 和 Vitest 測試 Vue 組件的邊界情況

簡介在開發 Vue 應用時，測試邊界情況對於確保組件的穩定性和可靠性至關重要。本文將探討如何使用 TypeScript 和 Vitest 來測試 Vue 組...

蘋果章魚MichaelHo1203 ‧ 2024-10-06

0 Like 0 留言 1887 瀏覽

鐵人賽 JavaScript DAY 12

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

技術 Day 12: Vue 監聽器副作用的清除

上次有提到watch或watchEffect可以讓我們監聽饗應式數據，並且執行某些副作用(side effect)，自己實務上常利用是監聽某項數值，例如監測使用...

Rafael ‧ 2024-09-25

1 Like 0 留言 1204 瀏覽

鐵人賽 Modern Web DAY 11

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

技術 Vue 3 用實作帶你看過核心概念 - Day 11：v-for 指令的基本與進階應用

目錄 v-for 基本使用 v-for 就地更新 - 使用 key 的重要性 v-for 指令參數介紹 v-for 指令結合 template 標籤及計算屬...

Antonio ‧ 2024-09-24

1 Like 0 留言 1529 瀏覽

鐵人賽 Modern Web DAY 21

Vue 和 TypeScript 的最佳實踐：成為前端工程師的進階利器系列第 21 篇

技術 Day 21: Vitest 和 @vue/test-utils 的基礎介紹：如何編寫單元測試

簡介在現代前端開發中，單元測試是確保代碼質量和可靠性的關鍵部分。本文將介紹如何使用 Vitest 和 @vue/test-utils 為 Vue 3 應用程...

蘋果章魚MichaelHo1203 ‧ 2024-10-05

1 Like 0 留言 1162 瀏覽

鐵人賽 Modern Web DAY 20

Vue 和 TypeScript 的最佳實踐：成為前端工程師的進階利器系列第 20 篇

技術 Day 20: 使用 TypeScript 與 UnoCSS 打造可重用的 UI 元件庫

在現代前端開發中，擁有一個可靠、可重用且類型安全的UI元件庫是提高開發效率和維護性的關鍵。本文將介紹如何使用 TypeScript 和 UnoCSS 來創建一...

蘋果章魚MichaelHo1203 ‧ 2024-10-04

0 Like 0 留言 742 瀏覽

鐵人賽 Modern Web DAY 19

Vue 和 TypeScript 的最佳實踐：成為前端工程師的進階利器系列第 19 篇

技術 Day 19: 在 Pinia 中管理 Vue 3 應用的全局狀態與本地存儲

簡介在現代 Vue 3 應用中，有效管理全局狀態和本地存儲是構建可靠且高性能應用的關鍵。本文將深入探討如何使用 Pinia 結合多種先進技術來實現全面的狀態...

蘋果章魚MichaelHo1203 ‧ 2024-10-03

0 Like 0 留言 1353 瀏覽

鐵人賽 JavaScript DAY 11

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

技術 Day 11: Vue的nextTick-DOM更新後的回調

在 Vue 的資料更新上次有稍微提過，DOM 更新是非同步且以批次處理的方式進行的。這個機制的目的是為了提高效能，當你修改資料時，Vue 不會立刻更新 DOM...

Rafael ‧ 2024-09-24

1 Like 0 留言 603 瀏覽

鐵人賽 Modern Web DAY 18

Vue 和 TypeScript 的最佳實踐：成為前端工程師的進階利器系列第 18 篇

技術 Day 18: 使用 Vue Router 實現多級嵌套路由與導航守衛

簡介在現代的單頁應用程序（SPA）中，路由管理是一個核心功能。Vue Router 不僅提供了基本的路由功能，還支持多級嵌套路由和強大的導航守衛系統。今天，...

蘋果章魚MichaelHo1203 ‧ 2024-10-02

1 Like 0 留言 625 瀏覽

鐵人賽 Modern Web DAY 10

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

技術 Vue 3 用實作帶你看過核心概念 - Day 10：條件渲染 - v-if 與 v-show 的區別與應用

目錄 v-if 條件渲染指令 - 單個元素 v-if 條件渲染指令 - 多個元素 v-show 條件渲染指令 - 單個元素 v-if vs v-show 總...

Antonio ‧ 2024-09-23

1 Like 0 留言 1039 瀏覽

鐵人賽 Modern Web DAY 17

Vue 和 TypeScript 的最佳實踐：成為前端工程師的進階利器系列第 17 篇

技術 Day 17: Vee-Validate 和 Zod 結合處理複雜的表單場景 - 進階特性深度探索

簡介在現代 Web 應用程序中，處理複雜的表單場景需要強大的驗證工具和類型系統。本文將深入探討如何結合 Vee-Validate 和 Zod 的進階特性，以...

蘋果章魚MichaelHo1203 ‧ 2024-10-01

1 Like 0 留言 732 瀏覽

鐵人賽 Modern Web DAY 16

Vue 和 TypeScript 的最佳實踐：成為前端工程師的進階利器系列第 16 篇

技術 Day 16: 如何使用 Pinia 儲存並管理 API 請求的異步數據

簡介在現代前端開發中，有效管理 API 請求和異步數據是至關重要的。本文將介紹如何結合 Pinia、@vueuse/core 的 createFetch、Z...

蘋果章魚MichaelHo1203 ‧ 2024-09-30

0 Like 0 留言 1118 瀏覽

鐵人賽 JavaScript DAY 10

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

技術 Day 10: JavaScript事件循環、宏任務和微任務

昨天已經有接觸到Vue的響應式資料或監聽器批次更新(batch update)過程，用到了事件循環(Event Loop)和非同步特性，是一個對於前端工程師來說...

Rafael ‧ 2024-09-23

1 Like 0 留言 1228 瀏覽

鐵人賽 Modern Web DAY 9

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

技術 Vue 3 用實作帶你看過核心概念 - Day 9：Class 與 Style 的樣式綁定

目錄模板 Class 綁定樣式 Vue 響應式物件綁定模板寫法 - 通用屬性綁定物件 Vue Class 響應式物件綁定模板寫法 - Class 物件寫法...

Antonio ‧ 2024-09-22

0 Like 0 留言 902 瀏覽

鐵人賽 JavaScript DAY 9

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

技術 Day 9: Vue監聽器的執行時機點

昨天我們接觸到watch、watchEffect，今天繼續來挖掘對Vue還不熟之前我的一些疑問，深入探討研究Vue監聽器，即便實務上已經使用的很熟悉，跟chat...

Rafael ‧ 2024-09-22

1 Like 0 留言 942 瀏覽

鐵人賽 Modern Web DAY 15

Vue 和 TypeScript 的最佳實踐：成為前端工程師的進階利器系列第 15 篇

技術 Day 15: 使用 TypeScript 和 Zod 進行後端 API 數據驗證

本文簡介在現代 Web 應用開發中，確保數據的完整性和類型安全是至關重要的。今天，我們將探討如何使用 TypeScript 和 Zod 來進行後端 API...

蘋果章魚MichaelHo1203 ‧ 2024-09-29

1 Like 0 留言 909 瀏覽

鐵人賽 Modern Web DAY 14

Vue 和 TypeScript 的最佳實踐：成為前端工程師的進階利器系列第 14 篇

技術 Day 14: Pinia 與 Vue Router 的結合：實現高級應用狀態的導航守衛

介紹在現代 Vue.js 應用程序中，Pinia 和 Vue Router 的結合使用為我們提供了強大的狀態管理和路由控制能力。今天，我們將深入探討如何將這...

蘋果章魚MichaelHo1203 ‧ 2024-09-28

0 Like 0 留言 2021 瀏覽

鐵人賽 JavaScript DAY 8

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

技術 Day 8: Vue的數據監聽器-watch和watchEffect

昨天認識了Vue computed 計算屬性，可以幫助我們對於響應式數據做一些衍伸計算，同時有緩存功能，不過最大主要限制是不能處理一些程式副作用。今天來談談V...

Rafael ‧ 2024-09-21

1 Like 0 留言 712 瀏覽

鐵人賽 Modern Web DAY 8

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

技術 Vue 3 用實作帶你看過核心概念 - Day 8：計算屬性應用與實踐

目錄 Vue Mustache 複雜邏輯情境描述 Vue Mustache 優化 - 使用 methods 存放邏輯定時器範例展示方法重複執行問題 Vue...

Antonio ‧ 2024-09-21

2 Like 0 留言 938 瀏覽

鐵人賽 Modern Web DAY 13

Vue 和 TypeScript 的最佳實踐：成為前端工程師的進階利器系列第 13 篇

技術 Day 13: 使用 @vueuse/core 和自定義 Composables 提升 Vue 3 開發效率

介紹在 Vue 3 的世界裡，Composition API 為我們帶來了更靈活、更強大的組件編寫方式。而 @vueuse/core 和自定義 Compos...

蘋果章魚MichaelHo1203 ‧ 2024-09-27

1 Like 1 留言 956 瀏覽

鐵人賽 Modern Web DAY 12

Vue 和 TypeScript 的最佳實踐：成為前端工程師的進階利器系列第 12 篇

技術 Day 12: 在 UnoCSS 中設計響應式布局：從手機到桌面應用

介紹響應式設計是現代 Web 開發中的關鍵能力，從手機到桌面應用，我們需要靈活地適應各種屏幕尺寸。UnoCSS 提供的 attributify 模式讓我們可...

蘋果章魚MichaelHo1203 ‧ 2024-09-26

2 Like 0 留言 909 瀏覽

鐵人賽 Modern Web DAY 11

Vue 和 TypeScript 的最佳實踐：成為前端工程師的進階利器系列第 11 篇

技術 Day 11: TypeScript 與 Pinia：如何定義強型別的 Store

介紹在 Vue 3 中，Pinia 作為狀態管理庫，提供了靈活而強大的工具來管理應用的狀態。為了進一步提高 Pinia 的使用體驗，了解其底層機制和相關概念...

蘋果章魚MichaelHo1203 ‧ 2024-09-25

2 Like 0 留言 1518 瀏覽

鐵人賽 Modern Web DAY 10

Vue 和 TypeScript 的最佳實踐：成為前端工程師的進階利器系列第 10 篇

技術 Day 10: 使用 Vue Router 實現基於角色的路由權限控制

介紹在開發大型應用時，確保用戶只能訪問他們有權限的頁面是非常重要的。Vue Router 提供了靈活的路由控制能力，可以結合角色權限實現應用的安全性。本文將...

蘋果章魚MichaelHo1203 ‧ 2024-09-24

1 Like 0 留言 1875 瀏覽