iT邦幫忙

vue.js相關文章
共有 1664 則文章
鐵人賽 Modern Web DAY 12
為你自己寫 Vue Component 系列 第 12

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

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

鐵人賽 自我挑戰組 DAY 18
每天來點 Vue.js 吧 系列 第 18

技術 Seeking the Balance in Framework Design

tags: Vuejs Seeking the Balance in Framework Design ✐ 在中秋連假倒數兩天的今天,作為放鬆,來分享之前看的...

鐵人賽 Modern Web DAY 26

技術 二十六號坑,來做多個聊天頻道之二(介面篇)

之二來處理一下介面 要讓sidebar跟上面的分頁共用同個組件channels sidebar <div class="sidebar_se...

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

技術 [影片教學] Nuxt 3 Server API 權限判斷與串接 - 實戰部落格系列 Part 3

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

鐵人賽 Modern Web DAY 19

技術 Day19 Vue.js 動效分類實戰 (11) 進階背景特輯 - 用 GSAP 打造你的專屬海洋世界

結合動態背景與滾動效果,打造前所未有的海洋深處互動體驗 在這個數位時代,誰說網頁設計只能是靜態的?想像一下你的頁面不再只是一片白板,而是變成了一個充滿生命力...

鐵人賽 Modern Web DAY 12

技術 Day12 Vue.js 動效分類實戰 (4) 導航特輯 - 用 GSAP 打造超爆棚品牌感設計

讓導航欄脫穎而出!用 Vue.js 和 GSAP 強調呼吸感的品牌互動 哈囉各位!今天我們要來搞點大動作,帶大家一起用 Vue.js 和 GSAP 打造一個超...

鐵人賽 Modern Web DAY 7

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

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

鐵人賽 Modern Web DAY 25
欸你是要進 Vue 了沒? 系列 第 25

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

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

鐵人賽 自我挑戰組 DAY 23

技術 (第二十三天)自我練習專案 - 新增卡片

可以新增卡片出來 卡片已經有了一個樣子了,接下來我們來做新增卡片 我們需要在卡片的下方加上一個按鈕 //使用上一個所寫的 <draggable v-m...

技術 認識Vue基礎資料夾及結構

Vue 專案基本目錄結構 my-vue-app/├── node_modules/ # 外部套件庫├── public/ #...

鐵人賽 自我挑戰組 DAY 17
vue.js 30天學習軌跡 系列 第 17

技術 Day17 vue.js - props(2)

由外到內資料傳遞 Components 的作用域是獨立的。父組件的數據需要通過 props 才能傳到子組件中。 靜態傳遞 與 動態傳遞 這是預先準備好的d...

技術 v-model

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

鐵人賽 Modern Web DAY 23

技術 二十三號坑,換頁就立刻focus!

現在的流程中,在首頁輸入暱稱之後換頁,習慣上我們應該一進入聊天室就會直接開始對話,可是目前換頁之後就不會focus在input上,今天就要來做一進入聊天室就自動...

鐵人賽 JavaScript DAY 27

技術 Day 27: JavaScript 模組(module) 和 Vue的程式碼分割 (code spliting)

終於來到鐵人賽的倒數第4天,今天要介紹 JavaScript 滿常見的 動態載入(Dynamic import),是基於JavaScript 模組(module...

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

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

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

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

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

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

鐵人賽 Modern Web DAY 30
欸你是要進 Vue 了沒? 系列 第 30

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

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

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

技術 [影片教學] Nuxt 3 渲染模式 (Rendering Modes)

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

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

技術 [影片教學] Nuxt 3 元件 (Components)

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

鐵人賽 Modern Web DAY 9

技術 【Day 9】Vue & React上的單向資料流的應用

關於單向資料流,昨天已經有針對這麼部分透過程式碼來了解是怎樣的資料流design pattern了,但是單向資料流究竟和Vue和React有什麼關係呢?就讓我們...

鐵人賽 Modern Web DAY 1

技術 Day01 參賽緣由

第二次參加鐵人賽。上一次 2019 是團體賽,而這一次則是個人參加。團體賽有個好處是大家會互相鼓勵且督促,去年是在最近老夢見的「好想工作室」完成,而這一次必須靠...

鐵人賽 Modern Web DAY 23

技術 Vue 的元件 Component(Part1)

如果疫情結束了,最會被報復性的行為會是什麼? 有人說元件(組件)應用在網頁上,最早出現是在 Google 的手機開發介面的討論,當時(時間不可考?) Goo...

鐵人賽 Modern Web DAY 19

技術 [30天 Vue學好學滿 DAY19] Vuex -2

State 定義狀態 store.js state: { // 待辦事項 todoList: ["待辦事項A", &quot...

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

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

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

技術 [影片教學] Nuxt 3 模組 (Modules)

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

鐵人賽 Modern Web DAY 19

技術 在 NX 中建立 Vue 元件庫

來嘗試在 NX 中建立 Vue 元件庫 lib。 跟 Nuxt 一樣,目前官方沒有支援 Vue 的擴充,所以要手動設定。 首先建立一個基於 Vite 的 js...

鐵人賽 JavaScript DAY 14

技術 Day 14: Vue 元件Props和響應式物件資料的驗證(customRef)

昨天認識了Vue元件彼此溝通傳遞時,一定會用到的props參數,主要功能是將父組件的資料由上至下傳入子組件渲染。 不過,開發實務上比較頭疼的是,有可能在專案規模...

鐵人賽 SideProject30 DAY 14

技術 Day14—Vue(八)v-bind綁定class與style

前言 今天要來講解v-bind的應用,以及它與class和style的綁定: 資料綁定提供了在HTML元素中靈活操作CSS類別列表和內聯樣式的解決方案,這是一...

鐵人賽 Modern Web DAY 8

技術 Day08 Vue.js 簡單迷人的網頁動態效果 - TransitionGroup 篇

使用 Vue <TransitionGroup> 打造出色的卡片動態效果 是否覺得網站上的卡片或列表元素看起來呆板?新增或移除元素時,總是顯得「生...

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

技術 [影片教學] Nuxt 3 Runtime Config & App Config

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