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

1 Like 0 留言 523 瀏覽

鐵人賽 Modern Web DAY 20

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

技術 Vue 3 用實作帶你看過核心概念 - Day 20：組件使用 v-model 雙向綁定

目錄組件 v-model 前原理說明父組件透過 v-model 與子組件雙向綁定數據子組件透過計算屬性實現 v-model 雙向綁定組件 v-mod...

Antonio ‧ 2024-10-03

0 Like 0 留言 1513 瀏覽

鐵人賽 JavaScript DAY 20

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

技術 Day 20: Vue - 依賴注入模式(provide/inject) 和 pinia 使用介紹

在前面的章節當中我們應該對元件props/emits有一定掌握，不過在Vue中元件間的關係可能不只有上下層父子關係，在元件粒度切分比較細時，會有事件或參數(pr...

Rafael ‧ 2024-10-03

1 Like 0 留言 601 瀏覽

鐵人賽 Modern Web DAY 19

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

技術 Vue 3 用實作帶你看過核心概念 - Day 19：子組件向父組件發射事件 - emits

目錄子組件將值透過事件發送回傳父組件 - 基本用法 emits 聲明驗證方式 emits 多參數驗證方式結論子組件將值透過事件發送回傳父組件 -...

Antonio ‧ 2024-10-02

0 Like 0 留言 619 瀏覽

鐵人賽 JavaScript DAY 19

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

技術 Day 19: Vue - 組合式邏輯概念 (Vue composable concept)

昨天複習了工廠函式，今天來連結到Vue滿常見的設計模式-組合式邏輯(Composable)。 Composable 是一個相對通俗的概念，通常指的是可以在多個元...

Rafael ‧ 2024-10-02

2 Like 0 留言 432 瀏覽

鐵人賽 Modern Web DAY 18

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

技術 Vue 3 用實作帶你看過核心概念 - Day 18：父組件向子組件傳值 - props

目錄 props 基本用法 props 單向資料流 - 組件之間的溝通方式 props 子組件應用情境說明 props 傳值類型 - 靜態傳值 vs 動態傳...

Antonio ‧ 2024-10-01

1 Like 0 留言 637 瀏覽

鐵人賽 Modern Web DAY 17

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

技術 Vue 3 用實作帶你看過核心概念 - Day 17：組件基礎 - 全局註冊與區域註冊

目錄定義組件的兩種方式 - SFC 單文件組件與 CDN 版本組件註冊的兩種方式 - 全域註冊與區域註冊結論在 Day 5 我們提到可以將應用...

Antonio ‧ 2024-09-30

0 Like 0 留言 614 瀏覽

鐵人賽 JavaScript DAY 17

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

技術 Day 17: Vue-非受控元件認識、列表渲染(v-for)的陷阱

上次介紹插槽時有看到v-for渲染的案例，v-for是Vue官方提供的列表渲染(List rendering)指令之一，可以用來遍歷陣列或對象，在模板中生成一组...

Rafael ‧ 2024-09-30

2 Like 0 留言 726 瀏覽

鐵人賽 Modern Web DAY 16

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

技術 Vue 3 用實作帶你看過核心概念 - Day 16：使用 ref 屬性引用模板元素

目錄 ref 屬性搭配第三方 Boostrap Modal 使用 ref 屬性搭配 Video Web API 使用 v-for 搭配陣列儲存 ref 屬性...

Antonio ‧ 2024-09-29

0 Like 0 留言 734 瀏覽

鐵人賽 JavaScript DAY 16

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

技術 Day 16: Vue的無渲染元件 - slot props 的另一種常見用法

在昨天寫完文章時，更加認識了Vue的slot插槽和當初不太理解的slot props用法，後來翻了一下Vue的設計模式(Vue Pattern)文章，有提到無渲...

Rafael ‧ 2024-09-29

1 Like 0 留言 847 瀏覽

鐵人賽 Modern Web DAY 15

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

技術 Vue 3 用實作帶你看過核心概念 - Day 15：監聽器(Watchers)

目錄 watch 基本使用方式 watch 深層監聽器 - deep option watch 立即執行的監聽器 - immediate option wa...

Antonio ‧ 2024-09-28

0 Like 0 留言 995 瀏覽

鐵人賽 JavaScript DAY 15

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

技術 Day 15: Vue-插槽(slot)的認識、slot props的實際案例

前兩篇對我們大概知道元件可以接受 props，而 props 通常是 JavaScript 資料型別(物件或一般型別)。但在某些情況下，我們可能會希望將一段模...

Rafael ‧ 2024-09-28

2 Like 1 留言 3079 瀏覽

技術使用 Laravel 10 與 Vue 3 + Vuetify 建立現代化 Web 應用

在當今的 Web 開發中，Laravel 和 Vue.js 是兩個非常受歡迎的框架。Laravel 提供了強大的後端功能，而 Vue.js 則使得前端開發變得...

answer212224 ‧ 2024-09-28

1 Like 0 留言 470 瀏覽

鐵人賽 Modern Web DAY 14

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

技術 Vue 3 用實作帶你看過核心概念 - Day 14：生命週期鉤子(Lifecycle Hooks)

目錄核心生命週期鉤子 Options API 中的響應式狀態延遲更新 - 使用 $nextTick 確保 DOM 同步 errorCaptured - 錯...

Antonio ‧ 2024-09-27

0 Like 4 留言 1043 瀏覽

鐵人賽 Modern Web DAY 30

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

技術 Day 30: 最終結語：前端工程師素養與思維，台灣前端軟體工程師的困境和未來

引言在這個為期30天的前端開發之旅中，我們探索了許多先進的技術和最佳實踐。今天，我們將把目光投向更廣闊的視野，討論前端工程師應具備的素養和思維，並特別關注台...

MichaelHo ‧ 2024-10-14

1 Like 0 留言 504 瀏覽

鐵人賽 Modern Web DAY 28

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

技術 Day 28: 使用 Pinia 與 Nuxt3 管理全局狀態

簡介在現代的 Web 應用開發中，有效管理全局狀態是一個關鍵挑戰。Nuxt3 作為一個強大的 Vue.js 框架，結合 Pinia 這個靈活的狀態管理庫，為...

MichaelHo ‧ 2024-10-12

1 Like 0 留言 806 瀏覽

鐵人賽 JavaScript DAY 14

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

技術 Day 14: Vue 元件Props和響應式物件資料的驗證(customRef)

昨天認識了Vue元件彼此溝通傳遞時，一定會用到的props參數，主要功能是將父組件的資料由上至下傳入子組件渲染。不過，開發實務上比較頭疼的是，有可能在專案規模...

Rafael ‧ 2024-09-27

1 Like 0 留言 575 瀏覽

鐵人賽 Modern Web DAY 13

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

技術 Vue 3 用實作帶你看過核心概念 - Day 13：v-model 雙向綁定控制 - 常用於表單輸入

目錄表單輸入語法糖 - v-model v-model 純文字輸入 - input type="text" & textare...

Antonio ‧ 2024-09-26

3 Like 0 留言 474 瀏覽

鐵人賽 Modern Web DAY 26

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

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

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

MichaelHo ‧ 2024-10-10

2 Like 0 留言 646 瀏覽

鐵人賽 Modern Web DAY 25

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

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

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

MichaelHo ‧ 2024-10-09

0 Like 0 留言 1103 瀏覽

鐵人賽 JavaScript DAY 13

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

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

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

Rafael ‧ 2024-09-26

1 Like 0 留言 575 瀏覽

鐵人賽 Modern Web DAY 12

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

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

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

Antonio ‧ 2024-09-25

0 Like 0 留言 508 瀏覽

鐵人賽 Modern Web DAY 24

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

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

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

MichaelHo ‧ 2024-10-08

1 Like 0 留言 357 瀏覽

鐵人賽 Modern Web DAY 23

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

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

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

MichaelHo ‧ 2024-10-07

2 Like 0 留言 415 瀏覽

鐵人賽 Modern Web DAY 22

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

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

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

MichaelHo ‧ 2024-10-06

0 Like 0 留言 1379 瀏覽

鐵人賽 JavaScript DAY 12

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

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

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

Rafael ‧ 2024-09-25

1 Like 0 留言 797 瀏覽

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

鐵人賽 Modern Web DAY 21

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

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

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

MichaelHo ‧ 2024-10-05

1 Like 0 留言 747 瀏覽

鐵人賽 Modern Web DAY 20

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

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

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

MichaelHo ‧ 2024-10-04

0 Like 0 留言 427 瀏覽