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

1 Like 0 留言 396 瀏覽

鐵人賽 Modern Web DAY 18

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

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

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

MichaelHo ‧ 2024-10-02

1 Like 0 留言 361 瀏覽

鐵人賽 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 留言 697 瀏覽

鐵人賽 Modern Web DAY 17

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

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

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

MichaelHo ‧ 2024-10-01

1 Like 0 留言 466 瀏覽

鐵人賽 Modern Web DAY 16

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

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

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

MichaelHo ‧ 2024-09-30

0 Like 0 留言 516 瀏覽

鐵人賽 JavaScript DAY 10

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

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

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

Rafael ‧ 2024-09-23

1 Like 0 留言 731 瀏覽

鐵人賽 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 留言 502 瀏覽

鐵人賽 JavaScript DAY 9

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

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

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

Rafael ‧ 2024-09-22

1 Like 0 留言 580 瀏覽

鐵人賽 Modern Web DAY 15

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

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

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

MichaelHo ‧ 2024-09-29

1 Like 0 留言 520 瀏覽

鐵人賽 Modern Web DAY 14

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

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

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

MichaelHo ‧ 2024-09-28

0 Like 0 留言 1135 瀏覽

鐵人賽 JavaScript DAY 8

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

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

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

Rafael ‧ 2024-09-21

1 Like 0 留言 396 瀏覽

鐵人賽 Modern Web DAY 8

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

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

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

Antonio ‧ 2024-09-21

2 Like 0 留言 593 瀏覽

鐵人賽 Modern Web DAY 13

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

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

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

MichaelHo ‧ 2024-09-27

1 Like 1 留言 669 瀏覽

鐵人賽 Modern Web DAY 12

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

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

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

MichaelHo ‧ 2024-09-26

2 Like 0 留言 591 瀏覽

鐵人賽 Modern Web DAY 11

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

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

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

MichaelHo ‧ 2024-09-25

2 Like 0 留言 960 瀏覽

鐵人賽 Modern Web DAY 10

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

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

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

MichaelHo ‧ 2024-09-24

1 Like 0 留言 1280 瀏覽

鐵人賽 Modern Web DAY 9

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

技術 Day 9: 高階組件設計：使用 Zod 和 Vee-Validate 進行動態表單驗證

介紹在 Vue 應用開發中，表單驗證是一項至關重要的功能，尤其是當表單數據變得複雜且需要高度自定義時。Zod 作為一個強大的 JavaScript 驗證庫，...

MichaelHo ‧ 2024-09-23

0 Like 0 留言 736 瀏覽

鐵人賽 JavaScript DAY 7

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

技術 Day 7: Vue的計算屬性-Computed

今天要來針對Vue computed 這個API做個簡單紀錄，實務上用法很簡單，官方文件也是簡潔說明，但還是會看到滿多違反原則(anti-pattern)的用法...

Rafael ‧ 2024-09-20

1 Like 0 留言 1261 瀏覽

鐵人賽 Modern Web DAY 7

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

技術 Vue 3 用實作帶你看過核心概念 - Day 7：響應式基礎 - Options API

目錄 JavaScript Proxy 物件 Options API - 響應式基礎 - this(proxy object) Options API -...

Antonio ‧ 2024-09-20

2 Like 0 留言 1396 瀏覽

鐵人賽 Modern Web DAY 6

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

技術 Vue 3 用實作帶你看過核心概念 - Day 6：數據綁定和模板(Template)

目錄模板語言更新實際網頁 DOM 元素流程文字插值(Text Interpolation) Vue 指令介紹 v-text：更新元素的文本內容，不解析H...

Antonio ‧ 2024-09-19

2 Like 0 留言 623 瀏覽

鐵人賽 Modern Web DAY 5

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

技術 Vue 3 用實作帶你看過核心概念 - Day 5：Options API vs Composition API

目錄 Vue 應用說明 Options API 與 Composition API 邏輯區塊寫法差異 Options API 特色說明 Compositio...

Antonio ‧ 2024-09-18

0 Like 0 留言 579 瀏覽

鐵人賽 JavaScript DAY 6

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

技術 Day 6: Vue 的響應式系統- Ref

接續上一篇著重在Vue響應式系統的reactive() 使用，也理解它主要是針對物件型態資料做響應式資料綁定，今天一口氣來理解另一個Vue提供的響應式資料API...

Rafael ‧ 2024-09-19

0 Like 1 留言 459 瀏覽

鐵人賽 JavaScript DAY 5

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

技術 Day 5: JavaScript Proxy 和 Vue Reactive響應式系統

上次有提到JS defineProperty(ES5)可以針對物件設定屬性時，同時追加一層攔截器(getter/setter)。在 Vue 2 中，響應式系統...

Rafael ‧ 2024-09-18

2 Like 0 留言 922 瀏覽

鐵人賽 Modern Web DAY 8

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

技術 Day 8: 使用 Pinia 實現 Vue 中的複雜狀態管理

介紹在 Vue 3 中，Composition API 是一種更靈活的狀態管理方式，特別是當應用變得更加複雜時。Pinia 完全支持 Composition...

MichaelHo ‧ 2024-09-22

1 Like 0 留言 713 瀏覽

鐵人賽 Modern Web DAY 7

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

技術 Day 7: 深入 Vue 組件間的通訊：使用 Props 和 Emit 傳遞數據與事件

介紹在 Vue 應用中，父子組件之間的數據傳遞和事件通訊是開發中最常見的操作。Vue 提供了 props 和 emit 機制，用於解決父組件向子組件傳遞數據...

MichaelHo ‧ 2024-09-21

3 Like 0 留言 662 瀏覽

鐵人賽 Modern Web DAY 4

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

技術 Vue 3 用實作帶你看過核心概念 - Day 4：基於 Vite 建構工具的 Vue 專案結構解析

目錄 Vue 鷹架工具產生基於 Vite 環境的專案樹狀結構 index.html：專案的入口文件 vite.config.js：Vite 應用的配置文件...

Antonio ‧ 2024-09-17

1 Like 0 留言 874 瀏覽

鐵人賽 Modern Web DAY 6

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

技術 Day 6: 在 UnoCSS 中應用原子 CSS 規則進行靈活的樣式設計

介紹在現代前端開發中，CSS 工具和框架正在迅速演變。隨著應用的增長和設計的複雜化，如何靈活且高效地設計樣式變得至關重要。UnoCSS 是一個功能強大且靈活...

MichaelHo ‧ 2024-09-20

1 Like 0 留言 592 瀏覽

鐵人賽 Modern Web DAY 5

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

技術 Day 5: Vue Router 與 TypeScript：型別安全的路由管理

介紹在構建單頁應用（SPA）時，路由管理是一個至關重要的部分。Vue Router 是 Vue.js 官方提供的路由解決方案，與 Vue 3 的 Compo...

MichaelHo ‧ 2024-09-19

0 Like 0 留言 616 瀏覽

鐵人賽 JavaScript DAY 4

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

技術 Day 4: JavaScript物件常見的操作方法

前幾天我們都在摸索Vue的一些額外使用上的知識，之後章節會慢慢進入Vue如何做到資料更新。在實務開發中，我們經常依賴各種框架包裝好的API來管理物件或原始型別資...

Rafael ‧ 2024-09-17

1 Like 0 留言 722 瀏覽

鐵人賽 JavaScript DAY 3

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

技術 Day 3: <script setup> 語法糖的本質

今天要聊聊Vue3才有的<script setup>語法糖，看官網和許多教學影片都說是很好用的語法糖，又是新的Vue3 組合式API(composi...

Rafael ‧ 2024-09-16

1 Like 1 留言 1295 瀏覽