接續上一篇使用iframe來實現這個功能，這一篇將介紹使用Vue的套件：vue3-google-map來完成嵌入地圖及設置圖釘。 在官方文件有提到，若要使用此套...
今年系列相較過往，點閱率變好差...是不是寫得「不夠好」...每當看別人的成就或是文章時，都覺得「喔～好厲害喔」「自己好像差很遠」...從來都沒有欣賞過自己，做...
今天將之前所學的,小小結合作個簡易聊天室吧! 開箱25:Vue 3 + Firebase Cloud Firestore 簡單CRUD功能開箱26:Vue 3...
終於撐到連續發文的第30天，分享個賽中小故事。 (1)主題名稱由來其實起初參加第 15 屆鐵人賽的主題不是「試試用Vue建立網站吧」，而是「跟著雲端前輩用Vue...
資料來源是先前建立的餐廳 API（採用 json-server 方式建立），管理者具有新增餐廳的權限。本系列旨在練習開發前端畫面，因為現有前端技術僅支持簡單的...
後台管理者頁面設計概念同本專案的前端頁面。管理者於指定的頁面登入後，主頁功能除首頁、登出外提供「管理餐廳列表」一項功能。因後台模板與前端相似，開發過程會簡單說明...
Firebase 託管為您的 Web 應用、靜態和動態內容以及微服務提供快速且安全的託管。 簡介Firebase Hosting收費方式https://fir...
程式碼盡量只寫要說明的地方，無關的就不贅述。 (3-4)頁面表單提交的規範 點選任一張卡片時，表單中「餐廳評論」欄位才可進行編輯。否則唯讀狀態。 原本已有評...
本次要跟姊姊一起學習Vue 3 + Firebase Cloud Messaging 測試一筆訊息通知吧！ ▶ 如果您尚未建立專案／安裝 Firebase J...
因開發過程細節較多會分成兩篇來說明。 (1)新增餐廳實評頁面檔案路徑 src / views / front 底下新增 CommentView.vue 檔案。...
本次要跟姊姊一起學習Vue 3 + Firebase Storage 上傳檔案功能 ▶ 如果您尚未建立專案／安裝 Firebase JS SDK 並初始化 F...
「Day14-試試Vue3-規劃口袋餐廳的頁面」提到建立新頁面之前，建議專注於設計所需的 html 結構。這樣可以更好地思考如何渲染資料以及應該使用哪些 Jav...
本次要跟姊姊一起學習Vue 3 + Firebase Firestore database CRUD功能 ▶ 如果您尚未建立專案／安裝 Firebase JS...
本次要跟姊姊一起學習Vue 3 + Firebase Authentication 信箱註冊登入登出功能 ▶ 如果您尚未建立專案／安裝 Firebase JS...
接續處理口袋餐廳清單右側的「移除」鈕功能。 (2)口袋餐廳清單-移除鈕分為資料渲染與觸發方法兩部分說明。 1.「移除」鈕的限制只能移除口袋餐廳清單（以下簡稱口袋...
口袋餐廳頁面下方區塊是篩選後的清單，以表單形式顯示所選的口袋餐廳。畫面示意圖請參考「Day14-試試Vue3-規劃口袋餐廳的頁面」篇。 (1)口袋餐廳清單-主表...
本次要跟姊姊一起學習Vue 3 + Firebase 實現一些功能，只是本篇只是先介紹事前準備，下篇才會進去實作 如果您尚未建立專案 及 安裝 Firebase...
在前端開發中，記憶化（Memoization）主要用於優化性能，特別是在需要頻繁計算或重新渲染的情況下。所以我們今天來認識一下在Vue中，有幾種方式可以實現Me...
小弟在網上找的範例為: <script setup lang="ts"> import { useRoute } from 'v...
還記得昨篇開箱:前端用戶導覽這樣做～v-onboarding範例應用，其中導覽的框是依賴PopperJS做出來的，那我們今天要介紹在Vue3中可以使用的視窗元件...
同「Day5-試試Vue3-建立會員API」與「Day13-試試Vue3-建立餐廳API」篇採用 json-server 方式建立 API。 (1)新增 use...
說明口袋餐廳的表單提交前，先調整登入會員的 Pinia store 與會員登入頁面。將會員登入時的電子郵件與 id 也儲存於登入會員的 Pinia store...
前置作業1：調用 Pinia store 資料<script></script> 將 LoginStore.js 檔裡的 useLogi...
當我們第一次使用某網站時，有時候網站會跳出導覽指引（就是教你怎麼用？），這可稱作網頁導覽或者用戶導覽（User Tour）或者 Onboarding （是指使用...
在轉寫框架時，用了很多import，可是卻不知道有區分靜態跟動態導入（dynamic import）？那動態載入跟框架裡面的用法有什麼關係？於是我將很多困惑交給...
本篇要來介紹當使用者滑到該圖或該組件時，才載入圖或組件的應用 還記得我們在16篇以及17篇分別提到 圖片懶加載 IntersectionObserver...
上篇簡單介紹了圖片懶加載，那其實頁面（組件）也可以懶加載，因此本篇要介紹改進初始頁面加載的好方法 也就是將我們的應用程式以較小的區塊加載，而不必在頁面加載時...
(3-2)動作拆解-品牌名稱與地址分為資料渲染與觸發方法兩部分說明。 1.下拉選項內容使用 v-for="item in filterRes.filt...
(3-1)動作拆解-品牌受眾分為資料渲染與觸發方法兩部分說明。 1.下拉選項內容使用 v-for="item in restaurants"...
程式碼盡量只寫要說明的地方，無關的就不贅述。 (2)建立要導出的資料試著整理出動態渲染畫面所需的資料實體有哪些。以下說明 <script></...
切版姐姐
jennydisc
iThome鐵人賽
看影片追技術