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

0 Like 1 留言 817 瀏覽

鐵人賽 Vue.js DAY 5

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

技術 Day5-試試Vue3-建立會員API

此篇 API 部分主要紀錄如何建立簡易的 API 供專案發送網路請求用。 (1)安裝 json-serverjson-server 利用 Node.js 提供的...

jennydisc ‧ 2023-09-20

1 Like 0 留言 806 瀏覽

鐵人賽 Vue.js DAY 1

這是我的 Vue.js 筆記，不知道有沒有機會幫到你系列第 1 篇

技術我的 Vue.js 筆記(1) - 前言

前端御三家，請選擇前端框架，一個在「大前端時代」出現的產物，當 jQuery 已經沒辦法輕易應付萬紫千紅的需求時，框架開始崛起。近期開始接觸網頁程式的人，無...

imall ‧ 2023-09-16

0 Like 0 留言 803 瀏覽

鐵人賽 Modern Web DAY 25

派對動物嗨起來！系列第 25 篇

技術 D25 - 建立類比控制搖桿

本系列文已改編成書「甚麼？網頁也可以做派對遊戲？使用 Vue 和 babylon.js 打造 3D 派對遊戲吧！」書中不只重構了程式架構、改善了介面設計，還新...

鱈魚 ‧ 2022-10-09

0 Like 1 留言 796 瀏覽

鐵人賽 Vue.js DAY 6

深入 Vue.js 世界 : 30 Days 核心概念與實作系列第 6 篇

技術 DAY 6 - 從 Option API 進化到 Compisiton API !!

DAY 6 - Option API 進化 Compisiton API 學習目標 : 從 Option API 進化 Compisiton API ，從了...

阿蘇蘇 ‧ 2023-09-21 ‧團隊大船要開囉

0 Like 0 留言 794 瀏覽

鐵人賽 Modern Web DAY 23

「你知道這是什麼嗎？」小白也能輕鬆瞭解的 Vue3 單元測試！Feat. Vitest + Vue Test Utils 系列第 23 篇

技術【語法ノ章】元件測試：模擬 Vue APIs（emit, provide/inject）

本系列文已重新編排並新增內容出版成冊，若您喜歡透過書籍來閱讀的話，歡迎至天瓏書局下單選購唷！ ShawnL - Vue.js 3前端測試入門從這裡開始...

ShawnL ‧ 2022-10-08

0 Like 0 留言 779 瀏覽

鐵人賽 Modern Web DAY 18

派對動物嗨起來！系列第 18 篇

技術 D18 - 玩家一起粗乃玩！

本系列文已改編成書「甚麼？網頁也可以做派對遊戲？使用 Vue 和 babylon.js 打造 3D 派對遊戲吧！」書中不只重構了程式架構、改善了介面設計，還新...

鱈魚 ‧ 2022-10-02

0 Like 1 留言 716 瀏覽

鐵人賽 Vue.js DAY 1

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

技術 Day1-試試Vue3-初衷與目標

技術背景資料庫工程師轉前端技術。所學從六角學院修習切版、 JavaScript 、 Vue 三種前端技術。參賽初衷所學至今跟著課程作業有作出一些網站前後台模板...

jennydisc ‧ 2023-09-16

0 Like 0 留言 693 瀏覽

鐵人賽 Modern Web DAY 25

「你知道這是什麼嗎？」小白也能輕鬆瞭解的 Vue3 單元測試！Feat. Vitest + Vue Test Utils 系列第 25 篇

技術【試験ノ章】第二個測驗：容器（Wrapper）與容器方法（Wrapper methods）

本系列文已重新編排並新增內容出版成冊，若您喜歡透過書籍來閱讀的話，歡迎至天瓏書局下單選購唷！ ShawnL - Vue.js 3前端測試入門從這裡開始...

ShawnL ‧ 2022-10-10

0 Like 0 留言 692 瀏覽

鐵人賽 Modern Web DAY 24

「你知道這是什麼嗎？」小白也能輕鬆瞭解的 Vue3 單元測試！Feat. Vitest + Vue Test Utils 系列第 24 篇

技術【語法ノ章】元件測試：模擬 Vue APIs（slots, custom directives）

本系列文已重新編排並新增內容出版成冊，若您喜歡透過書籍來閱讀的話，歡迎至天瓏書局下單選購唷！ ShawnL - Vue.js 3前端測試入門從這裡開始...

ShawnL ‧ 2022-10-09

0 Like 0 留言 689 瀏覽

鐵人賽 Vue.js DAY 23

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

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

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

切版姐姐 ‧ 2023-10-08

1 Like 0 留言 670 瀏覽

鐵人賽 Vue.js DAY 17

深入 Vue.js 世界 : 30 Days 核心概念與實作系列第 17 篇

技術 DAY 17 - 全新的開發者體驗，探索 Nuxt 3 世界

今日前言 Nuxt3 了，接下來後半篇鐵人賽都會以 Nuxt3 為主，一開始預計 Vue.js 的概念篇本來預計寫 10 天，不知不覺越寫越多 orz ...發...

阿蘇蘇 ‧ 2023-10-02 ‧團隊大船要開囉

0 Like 0 留言 642 瀏覽

鐵人賽 Vue.js DAY 24

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

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

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

切版姐姐 ‧ 2023-10-09

0 Like 0 留言 632 瀏覽

鐵人賽 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 留言 626 瀏覽

鐵人賽 Vue.js DAY 11

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

技術 Day11-試試Vue3-歡迎訊息顯示會員名(localStorage)

這邊分享歡迎訊息顯示會員名用儲存在瀏覽器的 localStorage 方法。 (1)介紹 localStorageHTML 5 出現後瀏覽器暫存有了 Local...

jennydisc ‧ 2023-09-26

0 Like 0 留言 612 瀏覽

鐵人賽 Vue.js DAY 14

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

技術開箱14:前端圖片壓縮～Compressor.js範例應用

要使用圖片壓縮工具來處理網頁時，一種是打包後處理圖片，像是Webpack 插件image-webpack-loader ，另一種則是幫助您在瀏覽器中進行圖片壓縮...

切版姐姐 ‧ 2023-09-29

0 Like 0 留言 612 瀏覽

鐵人賽 Vue.js DAY 2

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

技術開箱2:最愛跟你拖拖拉拉了～vue.draggable範例應用

本篇開箱的是vue.draggable.next，是一款簡單上手vue3的拖曳插件也就是vue.draggable升級版本。 ▲ 官方典型範例示意圖介紹...

切版姐姐 ‧ 2023-09-17

0 Like 0 留言 594 瀏覽

鐵人賽 Vue.js DAY 15

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

技術開箱15:輕鬆套用訊息通知UI～Vue 3 Toastify範例應用

Vue 3 Toastify是一個給Vue.js應用程式提供訊息通知功能的函式庫。它可以幫助您建立和顯示輕量級的訊息提示。介紹官網https://vue...

切版姐姐 ‧ 2023-09-30

0 Like 0 留言 574 瀏覽

鐵人賽 Vue.js DAY 11

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

技術開箱11:文字轉語音不專業版～Speech Synthesis範例應用

本篇開箱Web Speech API提供了瀏覽器內建的文字轉語音功能。大家應該用過Google的語音功能吧？其實我們可以透過Web Speech API就...

切版姐姐 ‧ 2023-09-26

0 Like 0 留言 569 瀏覽

鐵人賽 Vue.js DAY 21

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

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

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

切版姐姐 ‧ 2023-10-06

0 Like 0 留言 563 瀏覽

鐵人賽 Vue.js DAY 16

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

技術開箱16:圖片懶加載Lazy Loading範例應用

在前端網站效能優化中，圖片處理是一個重要的部分，因為圖片通常是網頁中佔用大量頻寬和資源的元素之一。而關於圖片處理的實踐方法有多種，其中一種是將圖片壓縮，這在本系...

切版姐姐 ‧ 2023-10-01

0 Like 0 留言 557 瀏覽

鐵人賽 Vue.js DAY 9

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

技術 Day9-試試Vue3-主頁歡迎訊息顯示會員名(Pinia)

這裡要將會員登入頁面（LoginView.vue 檔）中 axios.get() 取得的會員 name 儲存到 Pinia 裡的 store 。再透過該 sto...

jennydisc ‧ 2023-09-24

0 Like 0 留言 557 瀏覽

鐵人賽 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 留言 553 瀏覽

鐵人賽 Vue.js DAY 7

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

技術 Day7-試試Vue3-首頁增加會員頁面

(1)新增會員頁面檔案路徑 src / views 底下新增 front 資料夾，並於此增加 LoginView.vue 檔案。html 架構同註冊頁面（表單驗...

jennydisc ‧ 2023-09-22

0 Like 0 留言 541 瀏覽

鐵人賽 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 留言 531 瀏覽

鐵人賽 Vue.js DAY 8

深入 Vue.js 世界 : 30 Days 核心概念與實作系列第 8 篇

技術 DAY 8 - v-model 雙向綁定與修飾符運用

DAY 8 - v-model 雙向綁定與修飾符運用接下來DAY 8 ~ DAY 11 會來到 Vue 的指令篇，這邊就是比較基礎的常用的指令，會一一來慢...

阿蘇蘇 ‧ 2023-09-23 ‧團隊大船要開囉

0 Like 0 留言 517 瀏覽

鐵人賽 Vue.js DAY 30

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

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

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

jennydisc ‧ 2023-10-15

1 Like 1 留言 502 瀏覽

鐵人賽 Vue.js DAY 28

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

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

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

切版姐姐 ‧ 2023-10-13

1 Like 0 留言 501 瀏覽

鐵人賽 Vue.js DAY 18

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

技術開箱18:圖片/元件懶加載～vue3 + IntersectionObserver API範例應用

本篇要來介紹當使用者滑到該圖或該組件時，才載入圖或組件的應用還記得我們在16篇以及17篇分別提到圖片懶加載 IntersectionObserver...

切版姐姐 ‧ 2023-10-03

1 Like 0 留言 500 瀏覽

鐵人賽 Vue.js DAY 7

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

技術開箱7:偵測元素寬度～useResizeObserver範例應用

本篇開箱是VueUse中的useResizeObserver方法，簡單就能取元素的寬高昨篇介紹的是針對整個螢幕的寬高去做偵測，但是如果今天的需求是當某一個...

切版姐姐 ‧ 2023-09-22

0 Like 0 留言 497 瀏覽

鐵人賽 Vue.js DAY 25

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

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

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

切版姐姐 ‧ 2023-10-10

技術 Day5-試試Vue3-建立會員API

技術 我的 Vue.js 筆記(1) - 前言

技術 D25 - 建立類比控制搖桿

技術 DAY 6 - 從 Option API 進化到 Compisiton API !!

技術 【語法ノ章】元件測試：模擬 Vue APIs（emit, provide/inject）

技術 D18 - 玩家一起粗乃玩！

技術 Day1-試試Vue3-初衷與目標

技術 【試験ノ章】第二個測驗：容器（Wrapper）與容器方法（Wrapper methods）

技術 【語法ノ章】元件測試：模擬 Vue APIs（slots, custom directives）

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

技術 DAY 17 - 全新的開發者體驗，探索 Nuxt 3 世界

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

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

技術 Day11-試試Vue3-歡迎訊息顯示會員名(localStorage)

技術 開箱14:前端圖片壓縮～Compressor.js範例應用

技術 開箱2:最愛跟你拖拖拉拉了～vue.draggable範例應用

技術 開箱15:輕鬆套用訊息通知UI～Vue 3 Toastify範例應用

技術 開箱11:文字轉語音不專業版～Speech Synthesis範例應用

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

技術 開箱16:圖片懶加載Lazy Loading範例應用

技術 Day9-試試Vue3-主頁歡迎訊息顯示會員名(Pinia)

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

技術 Day7-試試Vue3-首頁增加會員頁面

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

技術 DAY 8 - v-model 雙向綁定與修飾符運用

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

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

技術 開箱18:圖片/元件懶加載～vue3 + IntersectionObserver API範例應用

技術 開箱7:偵測元素寬度～useResizeObserver範例應用

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

標記使用者

技術我的 Vue.js 筆記(1) - 前言

技術【語法ノ章】元件測試：模擬 Vue APIs（emit, provide/inject）

技術【試験ノ章】第二個測驗：容器（Wrapper）與容器方法（Wrapper methods）

技術【語法ノ章】元件測試：模擬 Vue APIs（slots, custom directives）

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

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

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

技術開箱14:前端圖片壓縮～Compressor.js範例應用

技術開箱2:最愛跟你拖拖拉拉了～vue.draggable範例應用

技術開箱15:輕鬆套用訊息通知UI～Vue 3 Toastify範例應用

技術開箱11:文字轉語音不專業版～Speech Synthesis範例應用

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

技術開箱16:圖片懶加載Lazy Loading範例應用

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

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

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

技術開箱18:圖片/元件懶加載～vue3 + IntersectionObserver API範例應用

技術開箱7:偵測元素寬度～useResizeObserver範例應用

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