iT邦幫忙

vue3相關文章
共有 411 則文章
鐵人賽 Modern Web DAY 3

技術 Vue 3 用實作帶你看過核心概念 - Day 3:使用 Vite 建構工具搭建 Vue 專案

目錄 Vite 環境搭建 Vue 專案(適用於正式開發環境) Step 1:安裝 Vue 套件並執行 create-vue Step 2:執行對應指令並啟...

鐵人賽 Modern Web DAY 3

技術 Day 3: Vee-Validate 和 TypeScript 實現表單驗證的最佳實踐

介紹 表單驗證是 Web 開發中不可或缺的一部分。通過表單驗證,我們能保證用戶提交的數據正確無誤。今天我們將介紹如何使用 Vee-Validate 和 Zod...

鐵人賽 Modern Web DAY 2

技術 Day 2: Zod 與 TypeScript 的結合:如何進行數據驗證與解析

介紹 在前端開發中,數據驗證是一個不可忽視的重要步驟,特別是當你處理表單輸入或 API 響應數據時。雖然 TypeScript 提供了靜態型別檢查功能,確保代...

鐵人賽 Modern Web DAY 1

技術 Day 1: 使用 Vite 和 UnoCSS 快速搭建 Vue 3 + TypeScript 開發環境

前言 在現代前端開發中,效率與性能變得越來越重要。Vue 3 的 Composition API、TypeScript 的強型別系統,以及 Vite 的超快打...

鐵人賽 JavaScript DAY 2

技術 Day 2: Vue SFC樣板(Template)和渲染函式(Render Function)

上一篇為了深入Vue開啟了初章,也提到createApp和App mount掛載的宏觀概念,今天來研究官網有蜻蜓點水著墨,但並沒有刻意放在主章節上-Vue te...

鐵人賽 Modern Web DAY 2

技術 Vue 3 用實作帶你看過核心概念 - Day 2:命令式編程 vs 聲明式編程

目錄 命令式編程 聲明式編程 總結 命令式編程 還記得我們在使用純 HTML 和 JavaScript 時,如何實現按下按鈕來變更文字顏色嗎?讓我們一起...

鐵人賽 Modern Web DAY 1

技術 Vue 3 用實作帶你看過核心概念 - Day 1:前言介紹

前言 大家好,我是 Antonio(安東尼奧),目前是一名 Angular 的新手工程師,同時,也是一名熱愛寫程式的工程師。去年參加六角學院的 Vue 直播班...

鐵人賽 JavaScript DAY 1

技術 Day 1: Vue Create App and Mount

嗨~大家好,我是Rafael,從原本的農業領域轉職剛滿1年,目前在AI數據公司擔任前端工程師。 最近自己籌組的Vue3線上讀書會順利結束了🥳,也剛好是以Vue3...

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

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

技術 v-model

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

技術 在網頁上嵌入Google Map及設置圖釘的方法 (下)

接續上一篇使用iframe來實現這個功能,這一篇將介紹使用Vue的套件:vue3-google-map來完成嵌入地圖及設置圖釘。 在官方文件有提到,若要使用此套...

鐵人賽 Vue.js DAY 30
Vue3歡樂套件箱耶 系列 第 30

技術 ><點閱率太差了!fine~以「收穫心態」來回顧吧!

今年系列相較過往,點閱率變好差...是不是寫得「不夠好」...每當看別人的成就或是文章時,都覺得「喔~好厲害喔」「自己好像差很遠」...從來都沒有欣賞過自己,做...

鐵人賽 Vue.js DAY 29
Vue3歡樂套件箱耶 系列 第 29

技術 開箱29:一秒變即時聊天室~Vue3+Firebase簡易實作

今天將之前所學的,小小結合作個簡易聊天室吧! 開箱25:Vue 3 + Firebase Cloud Firestore 簡單CRUD功能開箱26:Vue 3...

鐵人賽 Vue.js DAY 30
試試用Vue建立網站吧 系列 第 30

技術 Day30-試試Vue3-老天鵝~撐到30天了

終於撐到連續發文的第30天,分享個賽中小故事。 (1)主題名稱由來其實起初參加第 15 屆鐵人賽的主題不是「試試用Vue建立網站吧」,而是「跟著雲端前輩用Vue...

鐵人賽 Vue.js DAY 29
試試用Vue建立網站吧 系列 第 29

技術 Day29-試試Vue3-後台管理者頁面(2)

資料來源是先前建立的餐廳 API(採用 json-server 方式建立),管理者具有新增餐廳的權限。本系列旨在練習開發前端畫面,因為現有前端技術僅支持簡單的...

鐵人賽 Vue.js DAY 28
試試用Vue建立網站吧 系列 第 28

技術 Day28-試試Vue3-後台管理者頁面(1)

後台管理者頁面設計概念同本專案的前端頁面。管理者於指定的頁面登入後,主頁功能除首頁、登出外提供「管理餐廳列表」一項功能。因後台模板與前端相似,開發過程會簡單說明...

鐵人賽 Vue.js DAY 28
Vue3歡樂套件箱耶 系列 第 28

技術 開箱28:新手搭建~Vue+Vite+GitHub部署到Firebase Hosting

Firebase 託管為您的 Web 應用、靜態和動態內容以及微服務提供快速且安全的託管。 簡介Firebase Hosting收費方式https://fir...

鐵人賽 Vue.js DAY 27
試試用Vue建立網站吧 系列 第 27

技術 Day27-試試Vue3-餐廳實評頁面(2)

程式碼盡量只寫要說明的地方,無關的就不贅述。 (3-4)頁面表單提交的規範 點選任一張卡片時,表單中「餐廳評論」欄位才可進行編輯。否則唯讀狀態。 原本已有評...

鐵人賽 Vue.js DAY 27
Vue3歡樂套件箱耶 系列 第 27

技術 開箱27:Vue 3 + Firebase Cloud Messaging 建立測試通知

本次要跟姊姊一起學習Vue 3 + Firebase Cloud Messaging 測試一筆訊息通知吧! ▶ 如果您尚未建立專案/安裝 Firebase J...

鐵人賽 Vue.js DAY 26
試試用Vue建立網站吧 系列 第 26

技術 Day26-試試Vue3-餐廳實評頁面(1)

因開發過程細節較多會分成兩篇來說明。 (1)新增餐廳實評頁面檔案路徑 src / views / front 底下新增 CommentView.vue 檔案。...

鐵人賽 Vue.js DAY 26
Vue3歡樂套件箱耶 系列 第 26

技術 開箱26:Vue 3 + Firebase Storage存儲服務簡單實作

本次要跟姊姊一起學習Vue 3 + Firebase Storage 上傳檔案功能 ▶ 如果您尚未建立專案/安裝 Firebase JS SDK 並初始化 F...

鐵人賽 Vue.js DAY 25
試試用Vue建立網站吧 系列 第 25

技術 Day25-試試Vue3-規劃餐廳實評的頁面

「Day14-試試Vue3-規劃口袋餐廳的頁面」提到建立新頁面之前,建議專注於設計所需的 html 結構。這樣可以更好地思考如何渲染資料以及應該使用哪些 Jav...

鐵人賽 Vue.js DAY 25
Vue3歡樂套件箱耶 系列 第 25

技術 開箱25:Vue 3 + Firebase Cloud Firestore 簡單CRUD功能

本次要跟姊姊一起學習Vue 3 + Firebase Firestore database CRUD功能 ▶ 如果您尚未建立專案/安裝 Firebase JS...

鐵人賽 Vue.js DAY 24
Vue3歡樂套件箱耶 系列 第 24

技術 開箱24:Vue 3 +Firebase Authentication 信箱註冊登入登出

本次要跟姊姊一起學習Vue 3 + Firebase Authentication 信箱註冊登入登出功能 ▶ 如果您尚未建立專案/安裝 Firebase JS...

鐵人賽 Vue.js DAY 24
試試用Vue建立網站吧 系列 第 24

技術 Day24-試試Vue3-口袋餐廳的口袋清單(2)

接續處理口袋餐廳清單右側的「移除」鈕功能。 (2)口袋餐廳清單-移除鈕分為資料渲染與觸發方法兩部分說明。 1.「移除」鈕的限制只能移除口袋餐廳清單(以下簡稱口袋...

鐵人賽 Vue.js DAY 23
試試用Vue建立網站吧 系列 第 23

技術 Day23-試試Vue3-口袋餐廳的口袋清單(1)

口袋餐廳頁面下方區塊是篩選後的清單,以表單形式顯示所選的口袋餐廳。畫面示意圖請參考「Day14-試試Vue3-規劃口袋餐廳的頁面」篇。 (1)口袋餐廳清單-主表...

鐵人賽 Vue.js DAY 23
Vue3歡樂套件箱耶 系列 第 23

技術 開箱23:Vue 3 + 建立web應用程式+Firebase JS SDK 初始化

本次要跟姊姊一起學習Vue 3 + Firebase 實現一些功能,只是本篇只是先介紹事前準備,下篇才會進去實作 如果您尚未建立專案 及 安裝 Firebase...

鐵人賽 Vue.js DAY 22
Vue3歡樂套件箱耶 系列 第 22

技術 開箱22:效能優化?記憶化(Memoization)~Vue範例應用

在前端開發中,記憶化(Memoization)主要用於優化性能,特別是在需要頻繁計算或重新渲染的情況下。所以我們今天來認識一下在Vue中,有幾種方式可以實現Me...

技術 在 Vue 3 中使用 setup 取得當前路由的 params

小弟在網上找的範例為: &lt;script setup lang=&quot;ts&quot;&gt; import { useRoute } from 'v...

鐵人賽 Vue.js DAY 21
Vue3歡樂套件箱耶 系列 第 21

技術 開箱21:提示/彈出視窗元件輕鬆套!~Vue 3 Popper範例應用

還記得昨篇開箱:前端用戶導覽這樣做~v-onboarding範例應用,其中導覽的框是依賴PopperJS做出來的,那我們今天要介紹在Vue3中可以使用的視窗元件...