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

2 Like 0 留言 825 瀏覽

鐵人賽 Modern Web DAY 12

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

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

Badge 元件是一種簡單但功能強大的資料展示元件，通常以小圓形的形式出現，依附於其他 UI 元件上。Badge 元件主要用於通知提醒，顯示未讀訊息、通知數量...

Alex Liu ‧ 2024-09-20

2 Like 1 留言 1110 瀏覽

鐵人賽 Modern Web DAY 11

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

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

Avatar 元件是一個很常見且簡單的元件，像是在電商平台、論壇、個人部落格或是 ERP 系統中經常會看到。它很簡單，所以初期在規劃網站時經常漏掉將它編入元件...

Alex Liu ‧ 2024-09-19

3 Like 0 留言 654 瀏覽

鐵人賽 Modern Web DAY 10

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

技術 [為你自己寫 Vue Component] AtomicAccordion / AtomicCollapse

看這個元件的名稱不難發現，它的靈感來自手風琴（Accordion）這個樂器。在網頁裡面，Accordion 算是一個常見的設計。它是一個垂直堆疊的標題列表，當...

Alex Liu ‧ 2024-09-18

2 Like 0 留言 653 瀏覽

鐵人賽 Modern Web DAY 9

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

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

在專案中，你會如何設定 Scrollbar 的樣式呢？當我們想要自定義網頁的 Scrollbar 時，最常見的方式之一就是用 CSS 改寫原生的 Scrol...

Alex Liu ‧ 2024-09-17

2 Like 0 留言 624 瀏覽

鐵人賽 Modern Web DAY 8

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

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

Dropdown 是一個用於顯示和選擇選項的 UI 元件，通常由一個觸發按鈕或文字組成，當使用者點擊該按鈕或文字時，會展開一個選單列表，列出多個選項供使用者選...

Alex Liu ‧ 2024-09-16

3 Like 0 留言 765 瀏覽

鐵人賽 Modern Web DAY 7

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

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

彈出視窗（Popover，浮動視窗）通常隨著使用者的互動而顯示，它浮動於互動元素的周圍，主要用來提供附加資訊或操作，而不會改變頁面佈局。 <Atomic...

Alex Liu ‧ 2024-09-15

2 Like 0 留言 1186 瀏覽

鐵人賽 Modern Web DAY 6

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

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

頁籤（Tabs）是一個很常見的 UI 元件，它可以讓使用者在內容上有關聯但屬於不同類別的資料或畫面之間切換。例如，我們可以用它來切換「娛樂」、「科技」、「股市...

Alex Liu ‧ 2024-09-14

3 Like 0 留言 1024 瀏覽

鐵人賽 Modern Web DAY 5

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

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

在 ERP 系統的列表頁面或部落格文章的總覽頁面，如果我們想要一次顯示大量資料，不僅會耗費大量的網路傳輸流量，也會使瀏覽器渲染畫面變得緩慢費時。為了解決這個問...

Alex Liu ‧ 2024-09-13

2 Like 2 留言 1027 瀏覽

鐵人賽 Modern Web DAY 4

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

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

麵包屑導覽列（Breadcrumb）是一種常見的導航元件，其名稱源自格林童話《糖果屋》，故事中兩兄妹用麵包屑標記回家的路徑。在網站中，麵包屑導覽列起到了類似的...

Alex Liu ‧ 2024-09-12

3 Like 0 留言 1447 瀏覽

鐵人賽 Modern Web DAY 3

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

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

按鈕在網頁中是最常見的元件之一，這個元件通常在使用者點擊後會觸發程式上的操作，可能是關閉或打開 Modal，也可能是送出表單，又或是刪除某些重要資料等等。在...

Alex Liu ‧ 2024-09-11

5 Like 1 留言 2015 瀏覽

鐵人賽 Modern Web DAY 2

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

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

連結（Link）在網站開發中是不可或缺的存在。為了讓我們更好的實現 SPA（Single Page Application）網站，我們通常會使用 Vue Ro...

Alex Liu ‧ 2024-09-10

7 Like 2 留言 3259 瀏覽

鐵人賽 Modern Web DAY 1

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

技術 [為你自己寫 Vue Component] 簡介

身為前端工程師，元件管理是不論選用哪一個前端框架的開發人員都需要面臨的挑戰。能不能妥善規劃與管理元件，很大程度上決定了專案未來的走向。好的元件規劃可以讓開發更...

Alex Liu ‧ 2024-09-09

4 Like 3 留言 1044 瀏覽

鐵人賽 Modern Web DAY 1

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

技術 D01 - 行前須知

緣起源自公司內部練習專案，靈感來自於以前看到一個名為「最糟糕音量控制設計大賽」的有趣比賽。簡單來說就是設計奇奇怪怪的元件。別看這些元件好像很沒用，實作起來...

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

0 Like 0 留言 816 瀏覽

技術 [NPM] klinechart多語系

#node_modules\klinecharts/dist/klinecharts.js 2450行定義多語結構 tooltip: { show...

nlstudio ‧ 2024-03-19

1 Like 0 留言 561 瀏覽

技術 Vue 好用語法 (v-for、v-show、v-bind、v-model、v-on、scoped)

v-for 寫在 html tag 裡面跑回圈，可設定 key <div v-for="item in items" :key=&qu...

kaochihyu ‧ 2024-03-12

0 Like 0 留言 743 瀏覽

技術甚麼是 Vue、Options API 、Composition API

甚麼是 Vue Vue 是一個前端框架，有兩大核心: 聲明式渲染、響應式宣告式渲染: 相較於指令式能用較間單方式控制 HTML 和 JavaScript 之間...

kaochihyu ‧ 2024-03-11

2 Like 0 留言 1888 瀏覽

技術實作login試誤篇

前言這星期二突然發現我們應該做的登入系統還沒做，聽隊友們討論聽得頭皮發麻，太多我聽都沒聽過的專有名詞，但也只能故作鎮定繼續聽下去，討論結束前，試圖用很具體很直...

yenchenjulia ‧ 2024-01-26

0 Like 1 留言 2060 瀏覽

鐵人賽影片教學 DAY 30

Nuxt 3 快速入門系列第 30 篇

技術 [影片教學] Nuxt 3 部署網站服務

🔥【Vue.js → Nuxt 入門推薦！🌟 新書即將上市 🌟】📘《想要 SSR 嗎？就使用 Nuxt 吧！Nuxt 讓 Vue.js 更好處理 SEO 搜...

Ryan ‧ 2023-10-15

0 Like 1 留言 2206 瀏覽

鐵人賽 Vue.js DAY 30

Nuxt 3 實戰筆記系列第 30 篇

技術 [Day 30] Nuxt 3 版本的升級與套件升級的管理工具

🔥【Vue.js → Nuxt 入門推薦！🌟 新書即將上市 🌟】📘《想要 SSR 嗎？就使用 Nuxt 吧！Nuxt 讓 Vue.js 更好處理 SEO 搜...

Ryan ‧ 2023-10-15 ‧團隊啾嚕咕嚕跳起來

1 Like 1 留言 1834 瀏覽

鐵人賽 Vue.js DAY 30

這是我的 Vue.js 筆記，不知道有沒有機會幫到你系列第 30 篇

技術我的 Vue.js 筆記(30) - Vue 的版本代號與參賽後記

前言這篇文章來回收為什麼選 Vue？所埋的伏筆。我就先說了，這篇應該不會是什麼太正經的文章，純粹是最後一天放飛自我的內容 XD Vue 的版本代號會想...

imall ‧ 2023-10-15

0 Like 0 留言 1175 瀏覽

鐵人賽影片教學 DAY 29

Nuxt 3 快速入門系列第 29 篇

技術 [影片教學] Nuxt 3 部署前的建構打包

🔥【Vue.js → Nuxt 入門推薦！🌟 新書即將上市 🌟】📘《想要 SSR 嗎？就使用 Nuxt 吧！Nuxt 讓 Vue.js 更好處理 SEO 搜...

Ryan ‧ 2023-10-14

0 Like 0 留言 3295 瀏覽

鐵人賽 Vue.js DAY 29

Nuxt 3 實戰筆記系列第 29 篇

技術 [Day 29] Nuxt 3 混合渲染 (Hybrid Rendering) 中的 SWR 與 ISR

🔥【Vue.js → Nuxt 入門推薦！🌟 新書即將上市 🌟】📘《想要 SSR 嗎？就使用 Nuxt 吧！Nuxt 讓 Vue.js 更好處理 SEO 搜...

Ryan ‧ 2023-10-14 ‧團隊啾嚕咕嚕跳起來

0 Like 0 留言 3625 瀏覽

鐵人賽 Vue.js DAY 29

這是我的 Vue.js 筆記，不知道有沒有機會幫到你系列第 29 篇

技術我的 Vue.js 筆記(29) - 將專案打包上版到 GitHub Pages

前言多年前筆者初次接觸框架時，不對...應該是開始寫網頁程式時，最大的疑惑莫過於那個在 localhost 執行的東西，該怎麼實際讓人家有辦法透過網只看到內容...

imall ‧ 2023-10-14

0 Like 0 留言 1356 瀏覽

鐵人賽影片教學 DAY 28

Nuxt 3 快速入門系列第 28 篇

技術 [影片教學] Nuxt 3 視覺化開發工具 Nuxt DevTools

🔥【Vue.js → Nuxt 入門推薦！🌟 新書即將上市 🌟】📘《想要 SSR 嗎？就使用 Nuxt 吧！Nuxt 讓 Vue.js 更好處理 SEO 搜...

Ryan ‧ 2023-10-13

0 Like 1 留言 2218 瀏覽

鐵人賽 Vue.js DAY 28

Nuxt 3 實戰筆記系列第 28 篇

技術 [Day28] Nuxt 3 建構打包與部署至 Cloudflare Workers

🔥【Vue.js → Nuxt 入門推薦！🌟 新書即將上市 🌟】📘《想要 SSR 嗎？就使用 Nuxt 吧！Nuxt 讓 Vue.js 更好處理 SEO 搜...

Ryan ‧ 2023-10-13 ‧團隊啾嚕咕嚕跳起來

0 Like 0 留言 1020 瀏覽

鐵人賽 Vue.js DAY 28

這是我的 Vue.js 筆記，不知道有沒有機會幫到你系列第 28 篇

技術我的 Vue.js 筆記(28) - 認識大鳳梨

前言我們已經知道元件與元件之間的溝通可以使用 props 與 emits，不過這東西就只能設定兩個元件溝通的狀態。如果我們的元件樹的結構長得比較複雜一點，尾...

imall ‧ 2023-10-13

0 Like 0 留言 987 瀏覽

鐵人賽影片教學 DAY 27

Nuxt 3 快速入門系列第 27 篇

技術 [影片教學] Nuxt 3 SEO 搜尋引擎最佳化 - 實戰部落格系列 Part 5

🔥【Vue.js → Nuxt 入門推薦！🌟 新書即將上市 🌟】📘《想要 SSR 嗎？就使用 Nuxt 吧！Nuxt 讓 Vue.js 更好處理 SEO 搜...

Ryan ‧ 2023-10-12

2 Like 1 留言 1972 瀏覽

鐵人賽 Vue.js DAY 27

Nuxt 3 實戰筆記系列第 27 篇

技術 [Day 27] Nuxt 3 產生靜態網頁部署至 Cloudflare Pages 與持續自動部署

🔥【Vue.js → Nuxt 入門推薦！🌟 新書即將上市 🌟】📘《想要 SSR 嗎？就使用 Nuxt 吧！Nuxt 讓 Vue.js 更好處理 SEO 搜...

Ryan ‧ 2023-10-12 ‧團隊啾嚕咕嚕跳起來

0 Like 0 留言 2072 瀏覽

鐵人賽 Vue.js DAY 27

Vue3歡樂套件箱耶系列第 27 篇

技術開箱27:Vue 3 + Firebase Cloud Messaging 建立測試通知

本次要跟姊姊一起學習Vue 3 + Firebase Cloud Messaging 測試一筆訊息通知吧！ ▶ 如果您尚未建立專案／安裝 Firebase J...

切版姐姐 ‧ 2023-10-12

0 Like 0 留言 1652 瀏覽

鐵人賽 Vue.js DAY 27

這是我的 Vue.js 筆記，不知道有沒有機會幫到你系列第 27 篇

技術我的 Vue.js 筆記(27) - 使用 Vue Router

前言傳統網頁的網址，以往會是後端根據不同的頁面去配置不同的網址規則。不過如果要使用 Vue 框架開發網頁，會是「單一頁面網站」 (Sigle Page Ap...

imall ‧ 2023-10-12

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

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

技術 [為你自己寫 Vue Component] AtomicAccordion / AtomicCollapse

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

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

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

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

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

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

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

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

技術 [為你自己寫 Vue Component] 簡介

技術 D01 - 行前須知

技術 [NPM] klinechart多語系

技術 Vue 好用語法 (v-for、v-show、v-bind、v-model、v-on、scoped)

技術 甚麼是 Vue、Options API 、Composition API

技術 實作login試誤篇

技術 [影片教學] Nuxt 3 部署網站服務

技術 [Day 30] Nuxt 3 版本的升級與套件升級的管理工具

技術 我的 Vue.js 筆記(30) - Vue 的版本代號與參賽後記

技術 [影片教學] Nuxt 3 部署前的建構打包

技術 [Day 29] Nuxt 3 混合渲染 (Hybrid Rendering) 中的 SWR 與 ISR

技術 我的 Vue.js 筆記(29) - 將專案打包上版到 GitHub Pages

技術 [影片教學] Nuxt 3 視覺化開發工具 Nuxt DevTools

技術 [Day28] Nuxt 3 建構打包與部署至 Cloudflare Workers

技術 我的 Vue.js 筆記(28) - 認識大鳳梨

技術 [影片教學] Nuxt 3 SEO 搜尋引擎最佳化 - 實戰部落格系列 Part 5

技術 [Day 27] Nuxt 3 產生靜態網頁部署至 Cloudflare Pages 與持續自動部署

技術 開箱27:Vue 3 + Firebase Cloud Messaging 建立測試通知

技術 我的 Vue.js 筆記(27) - 使用 Vue Router

標記使用者

技術甚麼是 Vue、Options API 、Composition API

技術實作login試誤篇

技術我的 Vue.js 筆記(30) - Vue 的版本代號與參賽後記

技術我的 Vue.js 筆記(29) - 將專案打包上版到 GitHub Pages

技術我的 Vue.js 筆記(28) - 認識大鳳梨

技術開箱27:Vue 3 + Firebase Cloud Messaging 建立測試通知

技術我的 Vue.js 筆記(27) - 使用 Vue Router