iT邦幫忙

vue3相關文章
共有 363 則文章
鐵人賽 Vue.js DAY 17

技術 第16天 - Select a Coffee Plan with Component Event

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

鐵人賽 Vue.js DAY 16

技術 第 15 天- Add a Coffee Plan Form

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

鐵人賽 Vue.js DAY 1

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

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

鐵人賽 Vue.js DAY 15

技術 第14天 - 建立 PlanPicker 父元件

建立 PlanPicker 元件 在第14天,我繼續重構 App 元件,將咖啡計畫清單抽取到新的 PlanPicker 元件中。這樣不僅讓 App 元件更乾淨,...

鐵人賽 Vue.js DAY 14

技術 第 13 天- 建立帶有 Prop 的 CoffeePlan 元件

建立 CoffeePlan 元件 第 13 天,我開始將 HTML 程式碼重構為可重用的 CoffeePlan 元件。該元件將接受一個 name 輸入,並在 H...

鐵人賽 Vue.js DAY 13

技術 第 12 天 - 開始 Vue 元件入門課程

使用 JavaScript 框架的元件基礎 在第 12 天,我開始觀看 Vue School 的 Vue Component Fundamentals with...

鐵人賽 Vue.js DAY 1

技術 專案介紹:Vue.js + 雅思學習目標

大家好!這是我參加鐵人賽的第一天文章 🎉。這次我選擇的主題是 「Vue.js + 雅思學習目標」,為什麼會把前端框架和英文考試放在一起呢?原因很簡單:一方面我想...

鐵人賽 Vue.js DAY 12

技術 第11天 將 Vue 3、Svelte 5 和 Angular 應用程式部署到 Github Pages

在第11天,我會把所有示範專案部署到 Github Pages,因為 Github Pages 是免費且我手動部署也很簡單。 使用 Github Actions...

鐵人賽 Vue.js DAY 11

技術 第10天 - Vue 3、Svelte 5 和 Angular 的響應式介紹

在第10天,我們終於學習了一個關鍵的響應式概念:從現有狀態衍生新狀態。在 Vue 3 與 Angular 中,使用 computed 函數來從其他狀態創建只讀的...

鐵人賽 Vue.js DAY 10

技術 第 9 天 - 在 Vue 3、Svelte 5 和 Angular 中屬性綁定

在第 9 天,我將示範在 Vue 3、SvelteKit 和 Angular 中屬性綁定(attribute binding)的範例。範例中 Save Item...

鐵人賽 Vue.js DAY 9

技術 第 8 天 - 在 Vue 3、Svelte 5 和 Angular 中動態綁定 CSS 類別與樣式

在第8天,我將示範 Vue 3、SvelteKit 與 Angular 如何執行動態的 CSS 類別與樣式綁定。展示中包含 CSS 類別綁定與樣式綁定的範例。當...

鐵人賽 Vue.js DAY 8

技術 第七天 - 使用內建控管流程語法或指令進行條件渲染

本篇文章示範了 Vue 3、SvelteKit 與 Angular 如何使用內建的控管流程語法或指令來進行條件渲染。Vue 3 使用 v-if、v-else-i...

鐵人賽 Vue.js DAY 7

技術 第 6 天 - 元件中的用戶事件處理

在第 6 天,我將說明 Vue 3、SvelteKit 與 Angular 如何在購物車元件中回應 HTML 事件。 在購物車元件中,我們會在表單送出事件時,將...

鐵人賽 Vue.js DAY 6

技術 第 5 天:元件中的用戶輸入處理

在第五天,我要示範如何將輸入欄位和核取方塊(checkbox)雙向綁定到響應式(reactive)狀態。當你在輸入欄位編輯數值時,對應的狀態會即時更新並顯示在畫...

鐵人賽 Vue.js DAY 1

技術 【Day 1】Vue 3 核心演進:不只是改版,更是思維的躍遷

聯繫我 如果有任何問題或建議,歡迎隨時聯繫我: GitHub Email 前言 今年,再次挑戰自我! 也謝謝我的好朋友,邀請我繼續參加這場「攀登技術...

鐵人賽 Vue.js DAY 5

技術 第 4 天 - Vue 3、Svelte 5 與 Angular 19 的清單渲染

清單渲染與刪除按鈕 今天我要示範如何渲染一個項目清單。每列還會有一個刪除按鈕,可以從清單中刪除項目。當清單更新後,模板會反應性地重新渲染清單。 新增了一個 It...

鐵人賽 Vue.js DAY 4

技術 第 3 天:在模板中使用表達式

在模板中插值 header 表達式 Vue 3 應用程式 在 ShoppingCart 組件的 script 標籤內,我會建立一個初始值的 header ref...

鐵人賽 Vue.js DAY 3

技術 第 2 天 - 建立 ShoppingCart 元件

建立購物車元件 Vue 3 應用程式 刪除了 components/ 資料夾中所有檔案。在 components/ 目錄底下建立 ShoppingCart.vu...

鐵人賽 Vue.js DAY 2

技術 第 1 天 - 建立新專案、安裝相依套件及設定全域 CSS 樣式

這篇文章內容主要來自 Vue School 的 "Vue.js 3 Fundamental with the Composition API&quot...

鐵人賽 Vue.js DAY 1

技術 第 0 天 — 為什麼我參加這個挑戰

我是 Angular 的 Google Developer Expert(GDE),自 2021 年起開始撰寫各種 Angular 主題的部落格文章。我的前端旅...

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

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

技術 vue的 Teleport

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

鐵人賽 Modern Web DAY 30

技術 Vue 3 用實作帶你看過核心概念 - Day 30:新手村的鐵人證書 - 完賽心得

參賽心得 花了整整半年左右的時間,每天下班都很用心的準備範例或是看書,這一段旅程對我來說真的很重要。擔心、害怕跟不安的心情一直充斥自己心中,擔心寫錯或是寫不好...

鐵人賽 Modern Web DAY 29

技術 Vue 3 用實作帶你看過核心概念 - Day 29:Composables(組合式函數)

目錄 Composition API Composables vs Options API mixins 使用差異 Composables 嵌套使用 - u...

鐵人賽 JavaScript DAY 29

技術 Day 29: Vue 的不同渲染模式 - CSR、SSR和通用渲染模式

Vue可以用來構建單頁應用程式 (SPA),打包後的程式碼會完全在瀏覽器上執行,透過 JavaScript 生成 DOM 元素並交由瀏覽器進行呈現(Client...

鐵人賽 Modern Web DAY 28

技術 Vue 3 用實作帶你看過核心概念 - Day 28:官方 Vue Router 的應用與技巧

目錄 Vue Router 基本使用 Vue Router 路由連結與路由守衛介紹 - RouterLink & Navigation Guards...

鐵人賽 JavaScript DAY 28

技術 Day 28: Vue 的元件更新優化-重新渲染問題 (Re-render)

今天要來談談 Vue官網效能優化 的部分,昨天我們複習了使用 JavaScript 動態載入 的特性來進行程式碼分割,這種方法將程式碼拆分成不同檔案,減少了初次...

鐵人賽 Modern Web DAY 27

技術 Vue 3 用實作帶你看過核心概念 - Day 27:VeeValidate 表單驗證工具

目錄 VeeValidate 基本使用 - 內建規則使用 VeeValidate 基本使用 - i18n 多國語系設定 VeeValidate 手動設置驗證...

鐵人賽 JavaScript DAY 27

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

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

鐵人賽 Modern Web DAY 26

技術 Vue 3 用實作帶你看過核心概念 - Day 26:KeepAlive 與 Teleport 內置組件

目錄 KeepAlive 內置組件 - 動態切換組件 KeepAlive 組件 prop - include、exclude、max KeepAlive 緩...