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

0 Like 0 留言 68 瀏覽

鐵人賽 Vue.js DAY 1

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

技術在 Vue 過氣前要學的第一件事 - 先了解自己

前言今天是 9 月 1 號, 在這個特別的日子裡~為什麼特別呢, 因為今天是友克鑫集合是我鐵人賽開賽的第一天啦! 話不多說直接開始身為一名前端工程師，對框架...

Yanya ‧ 2025-09-01

6 Like 1 留言 1375 瀏覽

技術 🌟新書上市🌟 Vue.js → Nuxt 入門教學書籍推薦！【鐵人賽系列】想要 SSR 嗎？就使用 Nuxt 吧！Nuxt 讓 Vue.js 更好處理 SEO 搜尋引擎最佳化

👋 Hello 大家好，我是 Ryan 借用大家的 iT 邦幫忙版面及時間來稍微宣傳一下新書，本文文末有免費贈書！！！歡迎個人、讀書會、學校社團及社群來洽詢索...

Ryan ‧ 2025-08-06

0 Like 0 留言 824 瀏覽

技術 vue的 Teleport

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

sharongao ‧ 2024-12-09

0 Like 0 留言 975 瀏覽

鐵人賽 JavaScript DAY 30

歡迎參加我的原生JS畢業典禮系列第 30 篇

技術【Day29】.NET Core MVC & Vue—讓Axios幫我拿資料

參賽進入最尾聲了，剩下最後一個實戰任務！將會用我之前透過.net MVC開發的訂房網站為基礎進行；今天來完成房間資訊頁，並比較看看和原先jQuery差別在哪！...

ivytien ‧ 2024-10-14

3 Like 1 留言 699 瀏覽

鐵人賽 Modern Web DAY 30

欸你是要進 Vue 了沒？系列第 30 篇

技術欸你是要進 Vue 了沒？ - Day30：比賽過一半就想開始寫的完賽心得？

蛤肉，搭家好，我乘風破浪的來了。在寫這篇前，想說把自己 Day1~Day29 看過一遍，就可以準備好心情和能量，面對完賽了喔這個不真實的事實，屏氣凝神的來下筆...

++ ‧ 2024-10-14 ‧團隊好想工作室 v8.0

0 Like 0 留言 456 瀏覽

鐵人賽 JavaScript DAY 29

歡迎參加我的原生JS畢業典禮系列第 29 篇

技術【Day28】.NET Core MVC & Vue—Bootstrap套件也能v-for！

參賽進入最尾聲了，剩下最後一個實戰任務！將會用我之前透過.net MVC開發的訂房網站為基礎進行；昨天我們已經連上了本機資料庫，並測試成功把資料丟到View，接...

ivytien ‧ 2024-10-13

1 Like 0 留言 609 瀏覽

鐵人賽 Modern Web DAY 29

欸你是要進 Vue 了沒？系列第 29 篇

技術欸你是要進 Vue 了沒？ - Day29：Vue 組件間的溝通方式之 Emits、defineEmits() 子組件發出信號收到請回答 Over!

對，是系列文！在 Vue 中，組件之間傳遞資料的機制有許多種，本系列主要介紹父、子組件之間的溝通，分別為：「父傳子：Props」&&「子傳父：E...

++ ‧ 2024-10-13 ‧團隊好想工作室 v8.0

2 Like 3 留言 702 瀏覽

鐵人賽 Modern Web DAY 30

要不要 Vue 點酷酷的元件？系列第 30 篇

技術 D30 - 後記

總算安全度過 30 天惹，希望各位讀者們都有收穫。(oﾟvﾟ)ノ因為篇幅關係還有很多元件沒辦法登場，如果大家真的很想看某個元件的開發過程，可以留言給我，我會努...

鱈魚 ‧ 2024-10-13 ‧團隊鐵齒不信寫不完

0 Like 1 留言 729 瀏覽

鐵人賽 JavaScript DAY 30

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

技術 Day 30: 完賽 - Vue 的 30天自我學習旅程回顧

終於來到了終點線第30天了~有陪伴到這裡看完任何一篇的你們都很棒，感謝妳(你)們的耐心閱讀，今天可以不用聊嚴肅的話題(誤?)，不過還是回顧一下過程中，那些比較特...

Rafael ‧ 2024-10-13

0 Like 0 留言 573 瀏覽

鐵人賽 Modern Web DAY 28

創意前端設計：用 Vue.js 打造 30 個互動實用功能系列第 28 篇

技術 Day 28 Vue.js 動效分類實戰 (19) 星球特輯 - 把宇宙裝進你的網頁

從行星選擇到動畫過渡，揭開星球切換背後的技術秘密在今天的實作中，我們將用 Vue.js 和動畫效果來實現一個超酷的行星選擇器！透過點擊文字，我們可以淡入淡...

Sunny.Cat ‧ 2024-10-12

0 Like 0 留言 1061 瀏覽

鐵人賽 JavaScript DAY 28

歡迎參加我的原生JS畢業典禮系列第 28 篇

技術【Day27】.NET Core MVC & Vue—DI注入連線本機資料庫

參賽進入最尾聲了，剩下最後一個實戰任務！將會用我之前透過.net MVC開發的訂房網站為基礎進行！這系列兩大重點：實際操作本機資料庫當Vue.js加入....

ivytien ‧ 2024-10-12

0 Like 0 留言 872 瀏覽

鐵人賽 Modern Web DAY 28

欸你是要進 Vue 了沒？系列第 28 篇

技術欸你是要進 Vue 了沒？ - Day28：Vue 組件間的溝通方式之 Props、defineProps() 來自父組件の快遞請收下

對，是系列文！在 Vue 中，組件之間傳遞資料的機制有許多種，本系列主要介紹父、子組件之間的溝通，分別為：「父傳子：Props」&&「子傳父：E...

++ ‧ 2024-10-12 ‧團隊好想工作室 v8.0

0 Like 0 留言 286 瀏覽

鐵人賽 Modern Web DAY 29

要不要 Vue 點酷酷的元件？系列第 29 篇

技術 D29 - Web Component 也來點測試

讓我們也把 Web Component 頁面加上一點自動化測試吧！(/≧▽≦)/ 第一步老樣子就是來新增測試檔案。◝( •ω• )◟ e2e\web-compo...

鱈魚 ‧ 2024-10-12 ‧團隊鐵齒不信寫不完

0 Like 0 留言 626 瀏覽

鐵人賽 Modern Web DAY 27

創意前端設計：用 Vue.js 打造 30 個互動實用功能系列第 27 篇

技術 Day 27 Vue.js 動效分類實戰 (18) 整合特輯 - 技術全解析，打造精緻的卡片翻牌遊戲

翻牌效果深入解析，帶你揭開背後的技術秘密！今天，我們將用 Vue.js 和 TypeScript 實現一個充滿趣味的翻牌遊戲，讓你不僅能挑戰自己的記憶力，...

Sunny.Cat ‧ 2024-10-11

0 Like 0 留言 587 瀏覽

鐵人賽 Modern Web DAY 27

欸你是要進 Vue 了沒？系列第 27 篇

技術欸你是要進 Vue 了沒？ - Day27：Vue 組件基礎之 Component 的定義 && 使用 && 註冊

Hello 大家蠔，今天我們來學習 Vue 的核心概念：組件。分別會帶到這些內容：定義一個組件構建步驟定義的組件 - 單文件組件使用物件導出定義的組件...

++ ‧ 2024-10-11 ‧團隊好想工作室 v8.0

0 Like 0 留言 555 瀏覽

鐵人賽 Modern Web DAY 28

要不要 Vue 點酷酷的元件？系列第 28 篇

技術 D28 - 來點 Web Component

在社群分享酷酷的元件時，有人問到「元件有沒有不需要依賴 Vue 的版本？」當時沒有，現在有了！(≧∇≦)ﾉ甚麼是 Web Component Web Com...

鱈魚 ‧ 2024-10-11 ‧團隊鐵齒不信寫不完

0 Like 0 留言 230 瀏覽

鐵人賽 Modern Web DAY 27

要不要 Vue 點酷酷的元件？系列第 27 篇

技術 D27 - 固執的滑動條：e2e 測試

第一步老樣子就是來新增測試檔案。◝( •ω• )◟ e2e\components\slider-stubborn.spec.ts import { test,...

鱈魚 ‧ 2024-10-10 ‧團隊鐵齒不信寫不完

1 Like 0 留言 710 瀏覽

鐵人賽 Modern Web DAY 26

欸你是要進 Vue 了沒？系列第 26 篇

技術欸你是要進 Vue 了沒？ - Day26：Vue 模板引用之使用 ref 直接操作 DOM 的小小法術

Hi 大家好，今天我們要來看的是「模板引用」的章節。還記得之前我們提到的 ref 嗎？ ref 除了可以用來綁定響應式的狀態，它還能被使用在 <templ...

++ ‧ 2024-10-10 ‧團隊好想工作室 v8.0

2 Like 0 留言 855 瀏覽

鐵人賽 Modern Web DAY 25

欸你是要進 Vue 了沒？系列第 25 篇

技術欸你是要進 Vue 了沒？ - Day25：Vue 組件偵聽器之 watch && watchEffect 是在襪取什麼東東

不可能放這種迷因圖八安安搭家，還記得我們在 computed 的章節講到的嗎：不應該在 computed 物件其中像上述談到的：變更值、狀態，非同...

++ ‧ 2024-10-09 ‧團隊好想工作室 v8.0

0 Like 0 留言 267 瀏覽

鐵人賽 Modern Web DAY 26

要不要 Vue 點酷酷的元件？系列第 26 篇

技術 D26 - 固執的滑動條：更多範例

提供更多範例，讓使用者了解此元件用法吧。( •̀ ω •́ )✧ 參數客製展示客製化參數的效果。 src\components\slider-stubborn...

鱈魚 ‧ 2024-10-09 ‧團隊鐵齒不信寫不完

0 Like 0 留言 2464 瀏覽

鐵人賽 JavaScript DAY 26

歡迎參加我的原生JS畢業典禮系列第 26 篇

技術【Day25】在.NET Core MVC加入Vue—邁向前後端分離大師

在開賽的前言有說過其實我不會.NET Core（之前都是用.NET而已），結果現在要用.NET Core MVC ft.Vue.js進行開發（？）要學就要一次學...

ivytien ‧ 2024-10-10

1 Like 0 留言 906 瀏覽

鐵人賽 Modern Web DAY 24

欸你是要進 Vue 了沒？系列第 24 篇

技術欸你是要進 Vue 了沒？ - Day24：Vue 生命週期之從組件來到了這世界到它完成任務後離開的過程

蛤肉，大家好。如標題所述，今天我們要來看 Vue 中一個重要的觀念：「生命週期」。我們將會分為以下幾部分來學習：生命週期定義為什麼需要了解？初步概念...

++ ‧ 2024-10-08 ‧團隊好想工作室 v8.0

0 Like 0 留言 590 瀏覽

鐵人賽 JavaScript DAY 25

歡迎參加我的原生JS畢業典禮系列第 25 篇

技術【Day24】Vue的成果發表會—GitHub Action實現CI/CD

我們的靜態網站已經順利Git上去了，但這樣就結束了嗎？NoNoNo…身為it人總是不能放棄每個能偷懶的環節（蛤），今天就要來善用現有技術來幫我們實現自動化的流程...

ivytien ‧ 2024-10-09

0 Like 0 留言 206 瀏覽

鐵人賽 Modern Web DAY 25

要不要 Vue 點酷酷的元件？系列第 25 篇

技術 D25 - 固執的滑動條：單元測試

第一步來新增測試檔案。 src\components\slider-stubborn\slider-stubborn.spec.ts import { moun...

鱈魚 ‧ 2024-10-08 ‧團隊鐵齒不信寫不完

1 Like 0 留言 387 瀏覽

鐵人賽 Modern Web DAY 23

欸你是要進 Vue 了沒？系列第 23 篇

技術欸你是要進 Vue 了沒？ - Day23：Vue 表單輸入綁定之 v-model 有你在的宇宙一切都不麻煩了

在 Vue 的宇宙裡，表單輸入綁定不再是令人頭痛的問題！有了 v-model，你只需要一句簡單的指令，就可以讓使用者的輸入與你的應用程式完美同步。無論是輸入框...

++ ‧ 2024-10-07 ‧團隊好想工作室 v8.0

3 Like 0 留言 1130 瀏覽

鐵人賽 Modern Web DAY 29

為你自己寫 Vue Component 系列第 29 篇

技術 [為你自己寫 Vue Component] 設計 Server Side Rendering（Universal Rendering）友善的元件

在這個系列中，我們一共實作了約 27 種不同的 Atomic Components。但在實際開發上，我們不總是只需要顧好 Client Side Render...

Alex Liu ‧ 2024-10-07

0 Like 0 留言 630 瀏覽

鐵人賽 JavaScript DAY 24

歡迎參加我的原生JS畢業典禮系列第 24 篇

技術【Day23】Vue的成果發表會—Git部署你的靜態網站

今天要來把我們先前辛苦寫的作品部署到GitHub！（Git應該都不用再多介紹大家都很熟了），但我們還是紀錄一下第一次部署Vue專案的過程，就怕太久沒碰之後就忘了...

ivytien ‧ 2024-10-08

2 Like 0 留言 1511 瀏覽

鐵人賽 Modern Web DAY 24

要不要 Vue 點酷酷的元件？系列第 24 篇

技術 D24 - 固執的滑動條：開發元件

基本結構滑動條主體很單純，使用 div 就可以完成，不過握把的部分需要使用 SVG 實現。結構概念如下圖：「容器」負責包裝所有內容，並提供水平移動的基...

鱈魚 ‧ 2024-10-07 ‧團隊鐵齒不信寫不完

0 Like 0 留言 282 瀏覽

鐵人賽 JavaScript DAY 23

歡迎參加我的原生JS畢業典禮系列第 23 篇

技術【Day22】Vue-SSR：這專案我還要嗎？ft.淺淺談Nuxt.js

接觸過SPA（單頁應用）的世界後，現在來看SSR的資料我感到萬分痛苦…。我們先假想在不久後的將來，也許某天Boss說：「這個系統從SPA改成SSR」我們會想起這...

ivytien ‧ 2024-10-07

2 Like 0 留言 715 瀏覽

鐵人賽 Modern Web DAY 28

為你自己寫 Vue Component 系列第 28 篇

技術 [為你自己寫 Vue Component] AtomicRating

Rating 元件讓使用者可以對某項目進行評分，通常以星星或其他符號來表示評分等級。Rating 元件的核心功能是提供一種直觀的方式，讓使用者針對產品、服務或...

Alex Liu ‧ 2024-10-06

技術 在 Vue 過氣前要學的第一件事 - 先了解自己

技術 🌟新書上市🌟 Vue.js → Nuxt 入門教學書籍推薦！【鐵人賽系列】想要 SSR 嗎？就使用 Nuxt 吧！Nuxt 讓 Vue.js 更好處理 SEO 搜尋引擎最佳化

技術 vue的 Teleport

技術 【Day29】.NET Core MVC & Vue—讓Axios幫我拿資料

技術 欸你是要進 Vue 了沒？ - Day30：比賽過一半就想開始寫的完賽心得？

技術 【Day28】.NET Core MVC & Vue—Bootstrap套件也能v-for！

技術 欸你是要進 Vue 了沒？ - Day29：Vue 組件間的溝通方式之 Emits、defineEmits() 子組件發出信號收到請回答 Over!

技術 D30 - 後記

技術 Day 30: 完賽 - Vue 的 30天自我學習旅程回顧

技術 Day 28 Vue.js 動效分類實戰 (19) 星球特輯 - 把宇宙裝進你的網頁

技術 【Day27】.NET Core MVC & Vue—DI注入連線本機資料庫

技術 欸你是要進 Vue 了沒？ - Day28：Vue 組件間的溝通方式之 Props、defineProps() 來自父組件の快遞請收下

技術 D29 - Web Component 也來點測試

技術 Day 27 Vue.js 動效分類實戰 (18) 整合特輯 - 技術全解析，打造精緻的卡片翻牌遊戲

技術 欸你是要進 Vue 了沒？ - Day27：Vue 組件基礎之 Component 的定義 && 使用 && 註冊

技術 D28 - 來點 Web Component

技術 D27 - 固執的滑動條：e2e 測試

技術 欸你是要進 Vue 了沒？ - Day26：Vue 模板引用之使用 ref 直接操作 DOM 的小小法術

技術 欸你是要進 Vue 了沒？ - Day25：Vue 組件偵聽器之 watch && watchEffect 是在襪取什麼東東

技術 D26 - 固執的滑動條：更多範例

技術 【Day25】在.NET Core MVC加入Vue—邁向前後端分離大師

技術 欸你是要進 Vue 了沒？ - Day24：Vue 生命週期之從組件來到了這世界到它完成任務後離開的過程

技術 【Day24】Vue的成果發表會—GitHub Action實現CI/CD

技術 D25 - 固執的滑動條：單元測試

技術 欸你是要進 Vue 了沒？ - Day23：Vue 表單輸入綁定之 v-model 有你在的宇宙一切都不麻煩了

技術 [為你自己寫 Vue Component] 設計 Server Side Rendering（Universal Rendering）友善的元件

技術 【Day23】Vue的成果發表會—Git部署你的靜態網站

技術 D24 - 固執的滑動條：開發元件

技術 【Day22】Vue-SSR：這專案我還要嗎？ft.淺淺談Nuxt.js

技術 [為你自己寫 Vue Component] AtomicRating

標記使用者

技術在 Vue 過氣前要學的第一件事 - 先了解自己

技術【Day29】.NET Core MVC & Vue—讓Axios幫我拿資料

技術欸你是要進 Vue 了沒？ - Day30：比賽過一半就想開始寫的完賽心得？

技術【Day28】.NET Core MVC & Vue—Bootstrap套件也能v-for！

技術欸你是要進 Vue 了沒？ - Day29：Vue 組件間的溝通方式之 Emits、defineEmits() 子組件發出信號收到請回答 Over!

技術【Day27】.NET Core MVC & Vue—DI注入連線本機資料庫

技術欸你是要進 Vue 了沒？ - Day28：Vue 組件間的溝通方式之 Props、defineProps() 來自父組件の快遞請收下

技術欸你是要進 Vue 了沒？ - Day27：Vue 組件基礎之 Component 的定義 && 使用 && 註冊

技術欸你是要進 Vue 了沒？ - Day26：Vue 模板引用之使用 ref 直接操作 DOM 的小小法術

技術欸你是要進 Vue 了沒？ - Day25：Vue 組件偵聽器之 watch && watchEffect 是在襪取什麼東東

技術【Day25】在.NET Core MVC加入Vue—邁向前後端分離大師

技術欸你是要進 Vue 了沒？ - Day24：Vue 生命週期之從組件來到了這世界到它完成任務後離開的過程

技術【Day24】Vue的成果發表會—GitHub Action實現CI/CD

技術欸你是要進 Vue 了沒？ - Day23：Vue 表單輸入綁定之 v-model 有你在的宇宙一切都不麻煩了

技術【Day23】Vue的成果發表會—Git部署你的靜態網站

技術【Day22】Vue-SSR：這專案我還要嗎？ft.淺淺談Nuxt.js