iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
自我挑戰組

使用 Vue 3 做出 30 個 Side Project 系列

本篇幅是 以 Javascript30 線上的教學課程為基礎修改而成的 Vue 3教程,皆基於 Composition API,在三十天的時間每天實作一個簡單的Vue作品並講解相關概念

參賽天數 7 天 | 共 7 篇文章 | 0 人訂閱 訂閱系列文 RSS系列文
DAY 1

01 - Vue Drum Kit

前言 該範例使用 Vue 3 的 Composition API 來管理狀態和行為,並且利用了 Vue 的響應式數據和生命週期鉤子來處理鍵盤事件和動畫過渡效果。...

2024-09-15 ‧ 由 TimTim 分享
DAY 2

02 - Vue and CSS Clock

說明 該時鐘頁面邏輯可以分為幾個關鍵部分:初始化狀態、計算屬性、設置時間、組件掛載和自動更新。下面我會詳細解釋每個部分的具體邏輯和它們在應用中的作用。 Set...

2024-09-16 ‧ 由 TimTim 分享
DAY 3

03 - CSS Variables

Update CSS variable with Vue 摘要 本篇最主要透過 CSS 以及 Vue 抓取物件去改變 CSS的值,範例是改變了內邊距(paddi...

2024-09-17 ‧ 由 TimTim 分享
DAY 4

04 Array Cardio use lodash

摘要 透過 Lodash 來降低JS 操作 陣列,數字,對象,字符串等在 es5 上使用困難,從而讓開發者在不使用 Babel 編譯器以及不考慮瀏覽器版本的情況...

2024-09-18 ‧ 由 TimTim 分享
DAY 5

05 - Flex Panel Gallery

摘要 本教學打造出了一個互動式的“彈性面板”界面,使用了 Vue 3 Composition API 和 CSS 的 flexbox 布局和過渡動畫。主要功能如...

2024-09-19 ‧ 由 TimTim 分享
DAY 6

06 - Type Ahead

摘要 本篇主要介紹 Axios用 ajax 的方式來取資料(城市名稱),並依使用者輸入字符的不同查找不同的資料,會使用到正規表達式來處理字串。Axios 內容...

2024-09-20 ‧ 由 TimTim 分享
DAY 7

07 - Array Cardio Day 2

摘要 延續 Day4 的陣列常使用方法做介紹。本篇包含 lodah 中常用的 some,every,find,findIndex, slice() 內容 s...

2024-09-21 ‧ 由 TimTim 分享