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

2 Like 0 留言 644 瀏覽

鐵人賽 Modern Web DAY 6

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

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

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

Antonio ‧ 2024-09-19

3 Like 0 留言 367 瀏覽

鐵人賽 Modern Web DAY 2

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

技術 Vue 3 用實作帶你看過核心概念 - Day 2：命令式編程 vs 聲明式編程

目錄命令式編程聲明式編程總結命令式編程還記得我們在使用純 HTML 和 JavaScript 時，如何實現按下按鈕來變更文字顏色嗎？讓我們一起...

Antonio ‧ 2024-09-15

1 Like 0 留言 300 瀏覽

鐵人賽 Modern Web DAY 24

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

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

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

Antonio ‧ 2024-10-07

1 Like 0 留言 297 瀏覽

鐵人賽 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

2 Like 0 留言 272 瀏覽

鐵人賽 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

1 Like 0 留言 261 瀏覽

鐵人賽 Modern Web DAY 15

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

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

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

Antonio ‧ 2024-09-28

1 Like 0 留言 254 瀏覽

鐵人賽 Modern Web DAY 28

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

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

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

Antonio ‧ 2024-10-11

3 Like 0 留言 253 瀏覽

鐵人賽 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

3 Like 0 留言 245 瀏覽

鐵人賽 Modern Web DAY 3

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

技術 Vue 3 用實作帶你看過核心概念 - Day 3：使用 Vite 建構工具搭建 Vue 專案

目錄 Vite 環境搭建 Vue 專案（適用於正式開發環境） Step 1：安裝 Vue 套件並執行 create-vue Step 2：執行對應指令並啟...

Antonio ‧ 2024-09-16

1 Like 0 留言 245 瀏覽

鐵人賽 Modern Web DAY 17

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

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

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

Antonio ‧ 2024-09-30

1 Like 0 留言 244 瀏覽

鐵人賽 Modern Web DAY 19

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

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

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

Antonio ‧ 2024-10-02

2 Like 0 留言 243 瀏覽

鐵人賽 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

1 Like 0 留言 230 瀏覽

鐵人賽 Modern Web DAY 9

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

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

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

Antonio ‧ 2024-09-22

1 Like 0 留言 220 瀏覽

鐵人賽 Modern Web DAY 23

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

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

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

Antonio ‧ 2024-10-06

1 Like 0 留言 194 瀏覽

鐵人賽 Modern Web DAY 22

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

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

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

Antonio ‧ 2024-10-05

1 Like 0 留言 188 瀏覽

鐵人賽 Modern Web DAY 14

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

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

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

Antonio ‧ 2024-09-27

1 Like 0 留言 178 瀏覽

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

鐵人賽 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

1 Like 0 留言 171 瀏覽

鐵人賽 Modern Web DAY 12

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

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

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

Antonio ‧ 2024-09-25

1 Like 0 留言 165 瀏覽

鐵人賽 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

1 Like 0 留言 162 瀏覽

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

鐵人賽 Modern Web DAY 27

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

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

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

Antonio ‧ 2024-10-10

1 Like 0 留言 151 瀏覽

鐵人賽 Modern Web DAY 8

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

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

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

Antonio ‧ 2024-09-21

1 Like 0 留言 147 瀏覽

鐵人賽 Modern Web DAY 21

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

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

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

Antonio ‧ 2024-10-04

2 Like 0 留言 145 瀏覽

鐵人賽 Modern Web DAY 26

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

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

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

Antonio ‧ 2024-10-09

2 Like 0 留言 141 瀏覽

鐵人賽 Modern Web DAY 18

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

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

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

Antonio ‧ 2024-10-01

1 Like 0 留言 94 瀏覽

鐵人賽 Modern Web DAY 25

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

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

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

Antonio ‧ 2024-10-08