iT邦幫忙

vue.js相關文章
共有 1664 則文章
鐵人賽 Modern Web DAY 9

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

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

鐵人賽 Modern Web DAY 8

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

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

鐵人賽 Modern Web DAY 7

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

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

鐵人賽 Modern Web DAY 6

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

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

鐵人賽 Modern Web DAY 5

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

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

鐵人賽 Modern Web DAY 4

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

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

鐵人賽 Modern Web DAY 3

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

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

鐵人賽 Modern Web DAY 2

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

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

鐵人賽 Modern Web DAY 1

達標好文 技術 [為你自己寫 Vue Component] 簡介

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

鐵人賽 Modern Web DAY 1

技術 Day01 Vue.js 前言:從後端到前端的蛻變,帶你進入 Vue.js 互動世界

前言:從後端到前端,一起體驗互動設計的樂趣 嗨,大家好!歡迎來到這次的 IT 鐵人賽專題。我是一名專注於 PHP 和 Python 的後端工程師,這次會和大家...

技術 我從 prototype 到上線必用的開發工具

這篇文章將通過一個實際的例子,介紹我從 prototype 到上線過程中,常用的幾個工具。 我在做什麼 雖然細節不便透露太多,但我可以大致說明這個專案是一個互動...

技術 v-model 續集 (feat. computed)

想不到對我來說,v-model還有續集... 在vue pre3.4之前,defineModel還沒出現之前,要怎麼處理組件間的雙向綁定?目前我知道的有兩種方式...

技術 v-model

看了一整天,問chatgpt好多個蠢問題之後,甚至還跟它談心了,"v-model真的看不懂怎麼辦...?"雙向綁定這樣的說法好像很炫,但我聽...

技術 Vue Router 學習筆記

建立 router 安裝 vue-router npm install vue-router --save 建立 routes.js ,用來設定 ro...

技術 [NPM] hqchart 多語系

__locale(帶入語系) CN ,EN option.Language = __locale; var chart = HQChart.Chart.JS...

技術 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...

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

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

鐵人賽 影片教學 DAY 30
Nuxt 3 快速入門 系列 第 30

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

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

鐵人賽 Vue.js DAY 30
Nuxt 3 實戰筆記 系列 第 30

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

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

鐵人賽 Vue.js DAY 30
Vue3歡樂套件箱耶 系列 第 30

技術 ><點閱率太差了!fine~以「收穫心態」來回顧吧!

今年系列相較過往,點閱率變好差...是不是寫得「不夠好」...每當看別人的成就或是文章時,都覺得「喔~好厲害喔」「自己好像差很遠」...從來都沒有欣賞過自己,做...

鐵人賽 影片教學 DAY 29
Nuxt 3 快速入門 系列 第 29

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

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

鐵人賽 Vue.js DAY 29
Nuxt 3 實戰筆記 系列 第 29

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

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

鐵人賽 Vue.js DAY 30
業主說給你30天學會Vue 系列 第 31

技術 V31_業主說給你30天學會Vue系列_發文清單

V31_業主說給你30天學會Vue系列_發文清單 業主說給你30天學會Vue V01_工欲善其事_Vue先裝起來V02_最小規模的Vue的開發流程V03_直接在...

鐵人賽 影片教學 DAY 28
Nuxt 3 快速入門 系列 第 28

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

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

鐵人賽 Vue.js DAY 28
Nuxt 3 實戰筆記 系列 第 28

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

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

鐵人賽 Vue.js DAY 28
Vue3歡樂套件箱耶 系列 第 28

技術 開箱28:新手搭建~Vue+Vite+GitHub部署到Firebase Hosting

Firebase 託管為您的 Web 應用、靜態和動態內容以及微服務提供快速且安全的託管。 簡介Firebase Hosting收費方式https://fir...

鐵人賽 影片教學 DAY 27
Nuxt 3 快速入門 系列 第 27

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

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

鐵人賽 Vue.js DAY 27
Nuxt 3 實戰筆記 系列 第 27

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

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

鐵人賽 Vue.js DAY 27
Vue3歡樂套件箱耶 系列 第 27

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

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

鐵人賽 Vue.js DAY 30
業主說給你30天學會Vue 系列 第 30

技術 V30_Vue的小專案_youtube點播機(4)

V30_Vue的小專案_youtube點播機(4) 終於來到這最後的一篇了前3篇的發文 完成了 Vue版的 Youtube點播機最後一篇就用 Vue版的 You...