iT邦幫忙

vue3相關文章
共有 392 則文章
鐵人賽 Vue.js DAY 21

技術 在 Vue 過氣前要學的第二十一件事 - 小孩才做選擇 ( 上 ) / Tailwind v4

前言 先說! 我覺得版上已經有很多寫得非常好的 Tailwind 系列文章例如 排版神器 Tailwind CSS~和兔兔一起快速上手漂亮的元件開發!或 Ta...

鐵人賽 Vue.js DAY 20

技術 在 Vue 過氣前要學的第二十件事 - 從單頁升級成多頁( 下 ) / Vue Router

前情提要 昨天我們帶入了最簡單的 Vue Router 安裝並使用。那今天我們將要進入稍稍進階的使用方法,運用得當可以讓你省去很多程式碼,同時還有保有原本的效果...

鐵人賽 Vue.js DAY 19

技術 在 Vue 過氣前要學的第十九件事 - 從單頁升級成多頁 ( 上 ) / Vue Router

前言 為什麼我們會需要 Vue Router,或放大來說: 為甚麼我們需要路由管理呢? 現代大多的前端框架都是採 SPA 架構,這也代表了頁面切換是不再依靠...

鐵人賽 Vue.js DAY 18

技術 在 Vue 過氣前要學的第十八件事 - 我們必須更深入一點 / slot

前言 在設計元件時使用 slot,可以為元件設計帶來很高的彈性。 並減少過度拆元件造成的傳遞參數問題,也就是 props drilling ,常見使用方法有 &...

鐵人賽 Vue.js DAY 17

技術 在 Vue 過氣前要學的第十七件事 - 依賴注入 Provide/Inject

前言 在 Vue 過氣前要學的第十六件事 - 愛是雙向的 中,我們提到了 vue 的雙向綁定,這僅止於父子關係的組件。 但如果今天這個元件跨了兩層,跨了三層嗎,...

鐵人賽 Vue.js DAY 16

技術 在 Vue 過氣前要學的第十六件事 - 愛是雙向的 / emit & v-model

前言 你可能會聽說 vue 是雙向綁定,但我又說 Vue 是單向資料流。先別生氣。 這就要提到 `emit 了,在 Vue 過氣前要學的第十五件事 - 單向資料...

鐵人賽 Vue.js DAY 15

技術 在 Vue 過氣前要學的第十五件事 - 單向資料流

前言 Vue 是一個資料驅動的框架,畫面是由資料的狀態所決定的,當資料改變,畫面會自動更新。 因此,掌握資料的流向、變動方式與渲染時機,是深入理解 Vue 的核...

鐵人賽 Vue.js DAY 30

技術 第 29 天 - 新增 Loader 與 Error 狀態

在第 29 天,我新增了一個載入器(一個 <div>Loading ...</div>)來顯示頁面正在載入資料。 在 Angular 2...

鐵人賽 Vue.js DAY 14

技術 在 Vue 過氣前要學的第十四件事 - 事件處理 / v-on

前言 在 Vue 中,當你希望做某些動作並觸發事件時,可能就會需要用到事件綁定,譬如說呢,今天要點擊一個按鈕數字會 +1: const count = ref(...

鐵人賽 Vue.js DAY 29

技術 第 28 天 - 取得貼文作者

第 28 天 - 取得貼文作者 在第 28 天,我使用貼文的 userId 呼叫 users 端點來取得使用者名稱。 在 Vue 3 中,我建立了另一個 com...

鐵人賽 Vue.js DAY 13

技術 在 Vue 過氣前要學的第十三件事 - Here we go again / v-for

前言 在前端開發中,難免動態決定該渲染什麼資料的情況,舉例來說,今天有一個畫面是 : 要根據 API 回傳的資料來渲染該公司的員工列表 那公司員工這個資料可...

鐵人賽 Vue.js DAY 28

技術 第27天 - 建立一個簡單的部落格頁面

第27天 - 建立一個簡單的部落格頁面 在第27天,我完成了Vue 3 Vue 3 Composition API 課程,建立一個簡單的部落格來顯示文章。該網站...

鐵人賽 Vue.js DAY 12

技術 在 Vue 過氣前要學的第十二件事 - 如果 IF / v-if

前言 在 Vue 開發中,我們經常需要根據條件顯示或隱藏特定 DOM 元素。 常見的情境有: 表單錯誤訊息只在輸入驗證失敗時顯示。 API 請求後才顯示資料、...

鐵人賽 Vue.js DAY 27

技術 第26天 - 從 AlertBar 中抽取邏輯和元件

在第26天,我檢視了 AlertBar 元件的程式碼,並發現兩項改進可以讓它更乾淨。 該元件包含一個靜態標籤 (static label) 和一個雙向綁定...

鐵人賽 Vue.js DAY 11

技術 在 Vue 過氣前要學的第十一件事 - 抓住 Vue 的心 / v-bind

前言 v-bind 是非常常見的內置指令,常用於 HTML attribute,例如 style, class, props, etc.。 放的位置會在 ele...

鐵人賽 Vue.js DAY 26

技術 第 25 天 - Alert 元件第 4 部分 - 更新 Alert Bar 以重新開啟已關閉的 Alert

在第 25 天,我擴充了 Alert Bar 元件來顯示已關閉 Alert 的按鈕。接著,使用者可以選擇重新開啟所有已關閉的 Alert,或是特定類型的 Ale...

鐵人賽 Vue.js DAY 10

技術 在 Vue 過氣前要學的第十件事 - 從打好基本功開始 / Directives

前言 其實一開始很猶豫要不要寫這個篇章,因為如果你用過 Vue 那接下來這些指令你基本上應該是爛熟於心。 不過考慮到這些指令是基本上你不可能可以避免的功能,除非...

鐵人賽 Vue.js DAY 25

技術 第 24 天 - Alert 元件 第 3 部分 - 新增用於更換樣式的 Alert Bar

第 24 天 - Alert 元件 第 3 部分 - 新增用於更換樣式的 Alert Bar 在第 24 天,我建立了一個 Alert Bar 元件,用來顯示或...

鐵人賽 Vue.js DAY 9

技術 在 Vue 過氣前要學的第九件事 - Virtual DOM 要走入歷史了嗎? / Vapor Mode

前言 Vue 3.6.0-alpha.1 推出了,其中最特殊的應該就是這個 Vapor Mode 了,就來看一下這個新的模式會有什麼幫助吧。 概述 Vapor...

鐵人賽 Vue.js DAY 24

技術 第23天 - Alert 組件第二部分 - 動態渲染 (Dynamic Rendering) SVG 圖示

在第23天,我動態渲染警示(alert)的 SVG 圖示,因為動態渲染更易於維護(maintainable)、擴展(scalable)及高效(efficient...

鐵人賽 Vue.js DAY 23

技術 第22天 - Alert Component 第一部份 - Alert List 和 Alert Components

第22天,我開始進行 Vue 3、Angular 20 以及 Svelte 5 的 Alert Component 練習。 該 Alert component...

鐵人賽 Vue.js DAY 22

技術 第21天 - 部署 Github 個人檔案專案到 Github Pages

在第21天,我會將所有的示範部署到 Github Pages,因為 Github Pages 是免費的,且可以透過 Github Actions 自動化處理。...

鐵人賽 Vue.js DAY 21

技術 第 20 天 - Github Card 專案 第三部分 - 樣式設計

樣式設計其實是這個練習中最簡單的部分。步驟在不同框架中通常是相同的。 安裝 tailwindcss 和 DaisyUI 在 CSS 檔案中加入 DaisyUI...

鐵人賽 Vue.js DAY 20

技術 第 19 天 - Github 卡片專案 第二部分 - 元件組合

示範中使用卡片佈局 (card layout) 顯示 Github 使用者。GithubProfileList 會迭代一個使用者名稱的清單,並在 GithubP...

鐵人賽 Vue.js DAY 4

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

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

鐵人賽 Vue.js DAY 19

技術 第18天 - Github Card 專案 第一部分 - 資料擷取

第18天,我開始在 Vue 3、Angular 19 和 Svelte 5 中進行 Github 使用者個人資料的練習。 我的 CSS 技術不強,因此我會遵循講...

鐵人賽 Vue.js DAY 3

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

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

鐵人賽 Vue.js DAY 18

技術 第 17 天 - 在 HTML 模板中渲染動態內容

第 17 天 - 在 HTML 模板中渲染動態內容 在第 17 天,我示範如何在元件中渲染動態內容。Vue 3 將內容投影到 slots,並可選擇性地顯示插槽屬...

鐵人賽 Vue.js DAY 17

技術 第16天 - 使用元件事件選擇咖啡方案

在第16天,當選擇了一個咖啡方案 (coffee plan) 時,我會在該方案周圍加上邊框。其他咖啡方案則變成非活躍狀態,並移除邊框。CoffeePlan 組件...

鐵人賽 Vue.js DAY 16

技術 第 15 天- Add a Coffee Plan Form

第 15 天- Add a Coffee Plan Form 在第15天,我擴展了 PlanPicker 組件,加入了一個 AddCoffeePlan 組件,用...