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

0 Like 0 留言 298 瀏覽

技術 vue的 Teleport

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

sharongao ‧ 2024-12-09

3 Like 3 留言 363 瀏覽

鐵人賽 Modern Web DAY 30

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

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

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

Antonio ‧ 2024-10-13

1 Like 0 留言 298 瀏覽

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

鐵人賽 JavaScript DAY 29

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

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

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

Rafael ‧ 2024-10-12

1 Like 0 留言 266 瀏覽

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

鐵人賽 JavaScript DAY 28

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

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

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

Rafael ‧ 2024-10-11

1 Like 0 留言 162 瀏覽

鐵人賽 Modern Web DAY 27

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

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

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

Antonio ‧ 2024-10-10

1 Like 0 留言 133 瀏覽

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

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

鐵人賽 JavaScript DAY 26

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

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

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

Rafael ‧ 2024-10-09

1 Like 0 留言 96 瀏覽

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

鐵人賽 JavaScript DAY 25

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

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

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

Rafael ‧ 2024-10-08

0 Like 0 留言 83 瀏覽

鐵人賽 Software Development DAY 24

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

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

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

rewrite ‧ 2024-10-07

1 Like 0 留言 306 瀏覽

鐵人賽 Modern Web DAY 24

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

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

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

Antonio ‧ 2024-10-07

0 Like 0 留言 227 瀏覽

鐵人賽 JavaScript DAY 24

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

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

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

Rafael ‧ 2024-10-07

1 Like 0 留言 223 瀏覽

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

鐵人賽 JavaScript DAY 23

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

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

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

Rafael ‧ 2024-10-06

1 Like 0 留言 195 瀏覽

鐵人賽 Modern Web DAY 22

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

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

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

Antonio ‧ 2024-10-05

0 Like 0 留言 148 瀏覽

鐵人賽 JavaScript DAY 22

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

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

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

Rafael ‧ 2024-10-05

1 Like 0 留言 148 瀏覽

鐵人賽 Modern Web DAY 21

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

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

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

Antonio ‧ 2024-10-04

0 Like 0 留言 329 瀏覽

鐵人賽 JavaScript DAY 21

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

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

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

Rafael ‧ 2024-10-04

1 Like 0 留言 169 瀏覽

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

鐵人賽 JavaScript DAY 20

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

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

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

Rafael ‧ 2024-10-03

1 Like 0 留言 250 瀏覽

鐵人賽 Modern Web DAY 19

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

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

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

Antonio ‧ 2024-10-02

0 Like 0 留言 142 瀏覽

鐵人賽 JavaScript DAY 19

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

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

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

Rafael ‧ 2024-10-02

2 Like 0 留言 142 瀏覽

鐵人賽 Modern Web DAY 18

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

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

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

Antonio ‧ 2024-10-01

1 Like 0 留言 247 瀏覽

鐵人賽 Modern Web DAY 17

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

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

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

Antonio ‧ 2024-09-30

0 Like 0 留言 164 瀏覽

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

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

鐵人賽 JavaScript DAY 16

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

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

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

Rafael ‧ 2024-09-29