iT邦幫忙

vue相關文章
共有 800 則文章
鐵人賽 Vue.js DAY 5

技術 在 Vue 過氣前要學的第五件事 - 主動還是被動

前言 在上一篇 在 Vue 過氣前要學的第四件事 - 2025 了還要用 .value ?我們講了 ref 跟 reactive 之間的差異,這篇就接著說入門會...

鐵人賽 Vue.js DAY 4

技術 在 Vue 過氣前要學的第四件事 - 2025 了還要用 .value ?

前言 在 Vue 的使用中你可能會看到 ref 跟 reactive,這是 Composition API 的核心,讓資料具備響應式。 但平平都是用來做變數的引...

鐵人賽 Vue.js DAY 3

技術 在 Vue 過氣前要學的第三件事 - Rolldown 上位後會對 Vite 產生什麼影響

前言 在前面的篇章中我們快速的帶過 Vite 和 SFC 檔案,今天我們會介紹 Snippet 快速創建 SFC 模板和 Vite 底層如何打包以及 Rolld...

鐵人賽 Vue.js DAY 2

技術 在 Vue 過氣前要學的第二件事 - Vue 到底是什麼

前言 在研究 Vue 的時候第一個吸引我的,絕對是版本名稱。 1.0: "Evangelion" (新世紀福音戰士) 2.0 &quot...

鐵人賽 Vue.js DAY 1

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

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

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

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

鐵人賽 Modern Web DAY 5

技術 Signal 與 Proxy、Virtual DOM 的區別

前端 Reactivity 三路線,究竟差在哪? 我們常在 Signal / Proxy / Virtual DOM 之間搖擺:哪個更快?哪個更好維護? 如果把...

鐵人賽 Modern Web DAY 3

技術 Reactivity 的概念與演進

承先啟後的發展 2010 年的 Knockout.js 首度將 Observable / Computed 帶進前端,讓「資料自己開口,UI 跟着動」成為可行路...

技術 vue的 Teleport

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

鐵人賽 JavaScript DAY 30

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

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

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

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

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

鐵人賽 JavaScript DAY 29

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

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

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

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

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

鐵人賽 Modern Web DAY 30

技術 D30 - 後記

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

鐵人賽 JavaScript DAY 30

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

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

鐵人賽 Modern Web DAY 28

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

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

鐵人賽 JavaScript DAY 28

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

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

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

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

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

鐵人賽 Modern Web DAY 29

技術 D29 - Web Component 也來點測試

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

鐵人賽 Modern Web DAY 27

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

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

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

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

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

鐵人賽 Modern Web DAY 28

技術 D28 - 來點 Web Component

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

鐵人賽 Modern Web DAY 27

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

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

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

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

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

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

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

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

鐵人賽 Modern Web DAY 26

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

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

鐵人賽 JavaScript DAY 26

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

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

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

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

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

鐵人賽 JavaScript DAY 25

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

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

鐵人賽 Modern Web DAY 25

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

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