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

0 Like 0 留言 44 瀏覽

鐵人賽佛心分享-SideProject30 DAY 28

看得到的演算法：用 Vue 3 打造演算法互動視覺化平台系列第 28 篇

技術【Day 28】Vue 實作 — 播放器：怎麼用 setTimeout 控制播放速度？

上一篇完成了播放器的 Play、Pause、Reset，現在已經可以讓演算法快照自己一步一步播放。但真的開始看動畫後，又出現新的需求：有些步驟太快了，我想...

拉拉 ‧ 2026-10-11

0 Like 0 留言 77 瀏覽

鐵人賽佛心分享-SideProject30 DAY 27

看得到的演算法：用 Vue 3 打造演算法互動視覺化平台系列第 27 篇

技術【Day 27】Vue 實作 — 播放器：快照都準備好了，怎麼讓演算法動起來？

前面不管是 Bubble Sort、Quick Sort 還是 Dijkstra，我都已經把演算法執行過程記錄成一張張「快照」。但快照做好之後，現在又遇到新的...

拉拉 ‧ 2026-10-10

0 Like 0 留言 132 瀏覽

鐵人賽 Claude AI DAY 26

奇幻塔防開發實錄：用 Claude 打造一款有靈魂的塔防遊戲系列第 26 篇

技術 Day 26：效能優化總攻：Vue 渲染瓶頸與 Go API 延遲的雙線調校

系列：奇幻塔防開發實錄：用 Claude 打造一款有靈魂的塔防遊戲今日工具：git worktree ×2 ／ Claude Code ×2 ／ /ultr...

蘋果章魚MichaelHo1203 ‧ 2026-10-09 ‧團隊Ad Astra

0 Like 0 留言 170 瀏覽

鐵人賽 Claude AI DAY 22

奇幻塔防開發實錄：用 Claude 打造一款有靈魂的塔防遊戲系列第 22 篇

技術 Day 22：前後端聯軍：API 串接與跨域戰爭，Vue 呼叫 Go 服務的實戰筆記

系列：奇幻塔防開發實錄：用 Claude 打造一款有靈魂的塔防遊戲今日工具：Claude Code ／ curl + jq ／ Terraform（Clou...

蘋果章魚MichaelHo1203 ‧ 2026-10-05 ‧團隊Ad Astra

0 Like 0 留言 180 瀏覽

鐵人賽 Claude AI DAY 18

奇幻塔防開發實錄：用 Claude 打造一款有靈魂的塔防遊戲系列第 18 篇

技術 Day 18：分支劇情前端呈現：對話框系統與選項介面的 RWD 設計實作

系列：奇幻塔防開發實錄：用 Claude 打造一款有靈魂的塔防遊戲今日工具：Claude Design（回頭對稿）／ Claude Code今日進度：首頁...

蘋果章魚MichaelHo1203 ‧ 2026-10-01 ‧團隊Ad Astra

0 Like 0 留言 116 瀏覽

鐵人賽佛心分享-SideProject30 DAY 17

看得到的演算法：用 Vue 3 打造演算法互動視覺化平台系列第 17 篇

技術【Day 17】Vue 實作 — Quick Sort 的快照，比我想像中還要複雜

昨天把 Quick Sort 改成 Lomuto Partition 後，今天終於可以回頭實作 Day 14、15 規劃的快照。原本以為前面已經想好「快照要記...

拉拉 ‧ 2026-09-30

0 Like 0 留言 287 瀏覽

鐵人賽 Claude AI DAY 17

奇幻塔防開發實錄：用 Claude 打造一款有靈魂的塔防遊戲系列第 17 篇

技術 Day 17：塔的升級樹：用 Pinia 管理遊戲狀態與資源經濟系統

系列：奇幻塔防開發實錄：用 Claude 打造一款有靈魂的塔防遊戲今日工具：Claude Code今日進度：四種塔可建、可升三級、可賣；投射物會飛、傷害公式...

蘋果章魚MichaelHo1203 ‧ 2026-09-30 ‧團隊Ad Astra

0 Like 0 留言 100 瀏覽

鐵人賽佛心分享-SideProject30 DAY 15

看得到的演算法：用 Vue 3 打造演算法互動視覺化平台系列第 15 篇

技術【Day 15】Vue 實作 — Quick Sort 動起來之前，哪時候要進行快照記錄？

昨天已經先整理好 Quick Sort 一張快照需要記錄哪些狀態，今天就要回到 Day 13 寫好的 Quick Sort ，開始思考另一個問題：到底要在哪些...

拉拉 ‧ 2026-09-28

0 Like 0 留言 187 瀏覽

鐵人賽 Claude AI DAY 15

奇幻塔防開發實錄：用 Claude 打造一款有靈魂的塔防遊戲系列第 15 篇

技術 Day 15：Vue 3 + Canvas：塔防戰場渲染引擎從零到一

系列：奇幻塔防開發實錄：用 Claude 打造一款有靈魂的塔防遊戲今日工具：Claude Code（Plan mode）今日進度：灰燼步兵沿著「灰原邊境」的...

蘋果章魚MichaelHo1203 ‧ 2026-09-28 ‧團隊Ad Astra

0 Like 0 留言 79 瀏覽

鐵人賽佛心分享-SideProject30 DAY 14

看得到的演算法：用 Vue 3 打造演算法互動視覺化平台系列第 14 篇

技術【Day 14】Vue 實作 — Quick Sort 快照只記錄「位置」就夠了嗎？

昨天終於用 TypeScript 寫出了 Quick Sort，今天準備把它放進 Vue，讓排序過程像之前的 Bubble Sort 一樣動起來。前面實作 B...

拉拉 ‧ 2026-09-27

0 Like 0 留言 92 瀏覽

鐵人賽佛心分享-SideProject30 DAY 9

看得到的演算法：用 Vue 3 打造演算法互動視覺化平台系列第 9 篇

技術【Day 9】Vue 實作 — 讓 Bubble Sort 動起來

昨天已經成功把隨機產生的 Array 畫成長條圖，今天終於要開始挑戰這個專案最重要的部分：讓 Bubble Sort 動起來。目前我把畫面分成三個區塊：左側顯...

拉拉 ‧ 2026-09-22

0 Like 0 留言 77 瀏覽

鐵人賽佛心分享-SideProject30 DAY 8

看得到的演算法：用 Vue 3 打造演算法互動視覺化平台系列第 8 篇

技術【Day 8】Vue 實作 — Array 如果看得見會長怎樣？畫出排序資料

昨天建立好 Vue 專案的基本架構，今天終於要開始製作第一個跟演算法視覺化有關的功能：把 Array 畫成長條圖。假設有一組資料： const arr = r...

拉拉 ‧ 2026-09-21

0 Like 0 留言 88 瀏覽

鐵人賽佛心分享-SideProject30 DAY 7

看得到的演算法：用 Vue 3 打造演算法互動視覺化平台系列第 7 篇

技術【Day 7】Vue 實作 — 學了一週演算法，今天終於開始建立環境

前幾天都在學演算法、Big O、Bubble Sort 等基礎概念，今天終於要正式開始建立我的演算法視覺化平台了！這次預計使用 Vue 3 + Vite +...

拉拉 ‧ 2026-09-20

2 Like 0 留言 1617 瀏覽

技術 Vue 3 生命週期(Lifecycle) 四大階段建立(Create)、掛載(Mount)、更新(Update)、銷毀(Unmount)

生命週期有選項式跟組件式兩種寫法，語法都不同，這邊介紹選項式的語法。當在定義元件時，會將它們作為一個屬性或選項加入到匯出物件中，其值是一個函數。使用時寫出名字，...

kartg0052598 ‧ 2025-12-08

0 Like 0 留言 1378 瀏覽

技術 Vue 模板語法/文本插值 {{}}、v-html、布林屬性、條件渲染、列表渲染、雙向綁定

文本插值{{}} 最基本的數據綁定形式。將 Vue 數據值（例如 msg）當作純文本，直接插入到畫面的指定位置，使用的是“Mustache”語法(雙大括號{{}...

kartg0052598 ‧ 2025-12-04

0 Like 0 留言 1022 瀏覽

技術 Vue 核心結構模板語法 Mustache語法、data資料、掛載 (mount)、元件/組件(Component)、根應用實例、根元件、子元件

根應用實例整個 Vue 應用程式的管理者，負責配置和運行環境的內容。元件/組件(Component) (待更新) 根元件傳入 createApp()的{}...

kartg0052598 ‧ 2025-12-01

0 Like 0 留言 758 瀏覽

技術 Vue文件：slots的使用時機, 運用

一、使用時機：slots通常使用在以下情境：子元件寫好固定不變的html架構，父元件決定要動態改變的html。子元件封裝共通程式碼邏輯(composabl...

relife12345 ‧ 2025-11-18

0 Like 0 留言 727 瀏覽

技術 vue router：後台系統路由表的設計架構

若nav選單是由後端api提供，且是多層級的選單（以2層級為例）：可以將路由表分成4層第1層：Login，登入前頁面Dashboard，登入後頁面，nav的選單...

relife12345 ‧ 2025-11-12

0 Like 0 留言 600 瀏覽

技術 vue vouter文件筆記：匹配当前路由、不同的歷史記錄模式

一、匹配当前路由使用<RouterLink>，且路徑相符時，渲染出來的<a>會自帶有2種className：router-link-a...

relife12345 ‧ 2025-11-11

1 Like 0 留言 697 瀏覽

技術 vue vouter文件筆記：嵌套路由、命名路由、命名視圖、重定向和别名

PS: 僅記錄自己不熟的概念。一、嵌套路由：根目錄path要加 / ，子路由path則不用 const routes = [ { path: '/...

relife12345 ‧ 2025-11-10

0 Like 0 留言 641 瀏覽

技術 vue vouter文件筆記：導航守衛2-完整的導航解析（全api種類）

https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%AE%8C%E6%9...

relife12345 ‧ 2025-11-06

0 Like 0 留言 540 瀏覽

技術 vue vouter文件筆記：導航守衛1

一、全局前置beforeEach router.beforeEach，如果在函式裡面觸發再次導向，return { name: 'Login' }，那麼會再次...

relife12345 ‧ 2025-11-05

0 Like 0 留言 517 瀏覽

技術 vue vouter文件筆記：路由的匹配语法（正則表達式）

test 為動態路由參數名稱。組件中可透過以下方式取得該參數值： const route = useRoute(); route.params.test...

relife12345 ‧ 2025-11-03

0 Like 0 留言 621 瀏覽

技術 vue vouter文件筆記：動態路由匹配

允許一網址中寫多個動態路由，如下列的:name, :id const routes = [ { path: 'test1/:name...

relife12345 ‧ 2025-10-31

2 Like 0 留言 1208 瀏覽

鐵人賽 Vue.js DAY 30

在 Vue 過氣前要學的三十件事系列第 30 篇

技術在 Vue 過氣前要學的第三十件事 - 我唯一知道的就是我一無所知

總結直到今天就算是正式結束今年的鐵人賽了! 總集回顧第一章基礎概念在 Vue 過氣前要學的第一件事 - 先了解自己在 Vue 過氣前要學的第二件事 - V...

Yanya ‧ 2025-09-30

1 Like 0 留言 540 瀏覽

鐵人賽 Vue.js DAY 27

在 Vue 過氣前要學的三十件事系列第 27 篇

技術在 Vue 過氣前要學的第二十七件事 - 是一輩子喔? 一輩子

前言終於! 我們進到最後一個篇章，進階使用之生命週期篇; 之所以會把生命週期擺在這麼後面是因為 :只有實際寫過的人，才能更好的理解，所謂不同生命週期具體是指什...

Yanya ‧ 2025-09-27

0 Like 0 留言 579 瀏覽

鐵人賽 Vue.js DAY 26

在 Vue 過氣前要學的三十件事系列第 26 篇

技術在 Vue 過氣前要學的第二十六件事 - Avengers Assemble!

前言廢話少說開始寫扣吧! 請確保你以下所有套件都有安裝在專案中，如果還沒安裝建議到各篇文章中看如何安裝。在 Vue 過氣前要學的第十九件事 - Vue Ro...

Yanya ‧ 2025-09-26

0 Like 0 留言 769 瀏覽

鐵人賽 Vue.js DAY 25

在 Vue 過氣前要學的三十件事系列第 25 篇

技術在 Vue 過氣前要學的第二十五件事 - 我真的不是機器人 / 跨頁表單驗證 ( 中 ) / Vee-validate & Yup

前言在網頁開發中，常見的功能包括登入、註冊與各式表單等等這些功能，那前端有個很重要的職責就是提前做好格式驗證。這麼做的原因主要有三點：減少不必要的 AP...

Yanya ‧ 2025-09-25

1 Like 0 留言 477 瀏覽

鐵人賽 Vue.js DAY 24

在 Vue 過氣前要學的三十件事系列第 24 篇

技術在 Vue 過氣前要學的第二十四件事 - 蟹老闆你有感覺了嗎 / 跨頁表單驗證 ( 上 ) / Pinia

前言在此篇章中我們將會帶到如何使用狀態管理工具 + 驗證工具來實現跨頁表單驗證的功能讓各位在實作中了解何為狀態管理，驗證的時機，以及還有什麼工具可以做延伸閱...

Yanya ‧ 2025-09-24

1 Like 0 留言 726 瀏覽

鐵人賽 Vue.js DAY 23

在 Vue 過氣前要學的三十件事系列第 23 篇

技術在 Vue 過氣前要學的第二十三件事 - 小孩才做選擇 ( 下 ) / CSS Variable & Design Token

前言假設今天當你打開 figma，準備開始刻前端，發現很多按鈕都是 #9f86ff 這個顏色，他甚至已經是你的主色了，你卻只能一次一次的複製這個色號，哪天一...

Yanya ‧ 2025-09-23

技術 【Day 28】Vue 實作 — 播放器：怎麼用 setTimeout 控制播放速度？

技術 【Day 27】Vue 實作 — 播放器：快照都準備好了，怎麼讓演算法動起來？

技術 Day 26：效能優化總攻：Vue 渲染瓶頸與 Go API 延遲的雙線調校

技術 Day 22：前後端聯軍：API 串接與跨域戰爭，Vue 呼叫 Go 服務的實戰筆記

技術 Day 18：分支劇情前端呈現：對話框系統與選項介面的 RWD 設計實作

技術 【Day 17】Vue 實作 — Quick Sort 的快照，比我想像中還要複雜

技術 Day 17：塔的升級樹：用 Pinia 管理遊戲狀態與資源經濟系統

技術 【Day 15】Vue 實作 — Quick Sort 動起來之前，哪時候要進行快照記錄？

技術 Day 15：Vue 3 + Canvas：塔防戰場渲染引擎從零到一

技術 【Day 14】Vue 實作 — Quick Sort 快照只記錄「位置」就夠了嗎？

技術 【Day 9】Vue 實作 — 讓 Bubble Sort 動起來

技術 【Day 8】Vue 實作 — Array 如果看得見會長怎樣？畫出排序資料

技術 【Day 7】Vue 實作 — 學了一週演算法，今天終於開始建立環境

技術 Vue 3 生命週期(Lifecycle) 四大階段 建立(Create)、掛載(Mount)、更新(Update)、 銷毀(Unmount)

技術 Vue 模板語法/文本插值 {{}}、v-html、布林屬性、條件渲染、列表渲染 、雙向綁定

技術 Vue 核心結構 模板語法 Mustache語法、data資料、掛載 (mount)、元件/組件(Component)、根應用實例、根元件、子元件