iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

3 Like 0 留言 896 瀏覽

鐵人賽 Modern Web DAY 3

Vue 3 初學者：用實作帶你看過核心概念系列第 3 篇

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

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

Antonio ‧ 2024-09-16

2 Like 0 留言 1139 瀏覽

鐵人賽 Modern Web DAY 3

Vue 和 TypeScript 的最佳實踐：成為前端工程師的進階利器系列第 3 篇

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

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

MichaelHo ‧ 2024-09-17

5 Like 0 留言 933 瀏覽

鐵人賽 Modern Web DAY 2

Vue 和 TypeScript 的最佳實踐：成為前端工程師的進階利器系列第 2 篇

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

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

MichaelHo ‧ 2024-09-16

3 Like 1 留言 1233 瀏覽

鐵人賽 Modern Web DAY 1

Vue 和 TypeScript 的最佳實踐：成為前端工程師的進階利器系列第 1 篇

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

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

MichaelHo ‧ 2024-09-15

0 Like 0 留言 620 瀏覽

鐵人賽 JavaScript DAY 2

Vue.js學習中的細節陷阱：30天自我學習指南系列第 2 篇

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

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

Rafael ‧ 2024-09-15

3 Like 0 留言 866 瀏覽

鐵人賽 Modern Web DAY 2

Vue 3 初學者：用實作帶你看過核心概念系列第 2 篇

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

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

Antonio ‧ 2024-09-15

6 Like 1 留言 867 瀏覽

鐵人賽 Modern Web DAY 1

Vue 3 初學者：用實作帶你看過核心概念系列第 1 篇

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

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

Antonio ‧ 2024-09-14

0 Like 0 留言 1808 瀏覽

鐵人賽 JavaScript DAY 1

Vue.js學習中的細節陷阱：30天自我學習指南系列第 1 篇

技術 Day 1: Vue Create App and Mount

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

Rafael ‧ 2024-09-14

2 Like 0 留言 920 瀏覽

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

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

Pam ‧ 2024-05-18

1 Like 0 留言 951 瀏覽

技術 v-model

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

Pam ‧ 2024-04-19

0 Like 0 留言 1510 瀏覽

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

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

moreene ‧ 2024-02-29

1 Like 2 留言 1061 瀏覽

鐵人賽 Vue.js DAY 30

Vue3歡樂套件箱耶系列第 30 篇

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

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

切版姐姐 ‧ 2023-10-15

0 Like 0 留言 1385 瀏覽

鐵人賽 Vue.js DAY 29

Vue3歡樂套件箱耶系列第 29 篇

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

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

切版姐姐 ‧ 2023-10-14

0 Like 0 留言 1558 瀏覽

鐵人賽 Vue.js DAY 30

試試用Vue建立網站吧系列第 30 篇

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

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

jennydisc ‧ 2023-10-15

0 Like 0 留言 1343 瀏覽

鐵人賽 Vue.js DAY 29

試試用Vue建立網站吧系列第 29 篇

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

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

jennydisc ‧ 2023-10-14

0 Like 0 留言 2279 瀏覽

鐵人賽 Vue.js DAY 28

試試用Vue建立網站吧系列第 28 篇

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

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

jennydisc ‧ 2023-10-13

1 Like 1 留言 1638 瀏覽

鐵人賽 Vue.js DAY 28

Vue3歡樂套件箱耶系列第 28 篇

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

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

切版姐姐 ‧ 2023-10-13

0 Like 0 留言 711 瀏覽

鐵人賽 Vue.js DAY 27

試試用Vue建立網站吧系列第 27 篇

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

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

jennydisc ‧ 2023-10-12

0 Like 0 留言 2337 瀏覽

鐵人賽 Vue.js DAY 27

Vue3歡樂套件箱耶系列第 27 篇

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

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

切版姐姐 ‧ 2023-10-12

0 Like 0 留言 1183 瀏覽

鐵人賽 Vue.js DAY 26

試試用Vue建立網站吧系列第 26 篇

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

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

jennydisc ‧ 2023-10-11

0 Like 0 留言 2070 瀏覽

鐵人賽 Vue.js DAY 26

Vue3歡樂套件箱耶系列第 26 篇

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

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

切版姐姐 ‧ 2023-10-11

0 Like 0 留言 634 瀏覽

鐵人賽 Vue.js DAY 25

試試用Vue建立網站吧系列第 25 篇

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

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

jennydisc ‧ 2023-10-10

0 Like 0 留言 2064 瀏覽

鐵人賽 Vue.js DAY 25

Vue3歡樂套件箱耶系列第 25 篇

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

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

切版姐姐 ‧ 2023-10-10

0 Like 0 留言 2063 瀏覽

鐵人賽 Vue.js DAY 24

Vue3歡樂套件箱耶系列第 24 篇

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

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

切版姐姐 ‧ 2023-10-09

0 Like 0 留言 606 瀏覽

鐵人賽 Vue.js DAY 24

試試用Vue建立網站吧系列第 24 篇

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

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

jennydisc ‧ 2023-10-09

0 Like 0 留言 719 瀏覽

鐵人賽 Vue.js DAY 23

試試用Vue建立網站吧系列第 23 篇

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

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

jennydisc ‧ 2023-10-08

0 Like 0 留言 1928 瀏覽

鐵人賽 Vue.js DAY 23

Vue3歡樂套件箱耶系列第 23 篇

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

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

切版姐姐 ‧ 2023-10-08

1 Like 0 留言 1900 瀏覽

鐵人賽 Vue.js DAY 22

Vue3歡樂套件箱耶系列第 22 篇

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

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

切版姐姐 ‧ 2023-10-07

0 Like 0 留言 1360 瀏覽

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

小弟在網上找的範例為: <script setup lang="ts"> import { useRoute } from 'v...

aa910113 ‧ 2023-10-06

0 Like 0 留言 1828 瀏覽

鐵人賽 Vue.js DAY 21

Vue3歡樂套件箱耶系列第 21 篇

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

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

切版姐姐 ‧ 2023-10-06