同「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></...
本篇開始會對「Day15-試試Vue3-口袋餐廳的html架構」的內容進行調整，試將資料內容改用 JavaScript 來動態渲染畫面。因開發過程細節較多會分幾...
在前端網站效能優化中，圖片處理是一個重要的部分，因為圖片通常是網頁中佔用大量頻寬和資源的元素之一。而關於圖片處理的實踐方法有多種，其中一種是將圖片壓縮，這在本系...
Vue 3 Toastify是一個給Vue.js應用程式提供訊息通知功能的函式庫。它可以幫助您建立和顯示輕量級的訊息提示。 介紹 官網https://vue...
要使用圖片壓縮工具來處理網頁時，一種是打包後處理圖片，像是Webpack 插件image-webpack-loader ，另一種則是幫助您在瀏覽器中進行圖片壓縮...
本篇開箱Tesseract.js是能圖像中取得文字的工具 介紹 Tesseract.js 是一個 JavaScript 函式庫，它是基於 Google 的...
此篇接續介紹口袋餐廳頁面的靜態 html 架構。 (1) html 程式碼畫面示意圖請參考前一篇。介面開發的技巧如下： 導覽（nav）架構請參考「Day8-試...
對於前端新手來說，編寫 JavaScript 可能較具挑戰性。譬如如何使用 v-for 進行資料渲染等 JavaScript 方法，建議先專注於建立想要的 ht...
Web Speech API 可讓您將語音資料合併到 Web 應用程式中。分兩個功能：(Speech Synthesis)語音合成（文字轉語音）和(Speech...
同「Day5-試試Vue3-建立會員API」篇採用 json-server 方式建立 API。 (1)新增 restaurant.json 檔案建立資料專案根目...
這篇簡單說明使用者故事（以會員角度）。 假定華特義式餐廳為一餐飲集團，旗下有多個義式料理相關的餐飲品牌。為提供集團會員更多便利和互動性，會員主頁除首頁、登出外提...
本篇開箱Web Speech API提供了瀏覽器內建的文字轉語音功能。 大家應該用過Google的語音功能吧？其實我們可以透過Web Speech API就...
本篇介紹根據內容自動更新文字區域的高度的工具resize-textarea-vue3 <input>只能輸入單行，而<textarea&g...
分享寫「Day9-試試Vue3-主頁歡迎訊息顯示會員名(Pinia)」時整理幾種其他歡迎訊息顯示會員名的寫法，及從中學到的新知識點。會分兩篇介紹。 (1)登入會...
這邊分享歡迎訊息顯示會員名用儲存在瀏覽器的 localStorage 方法。 (1)介紹 localStorageHTML 5 出現後瀏覽器暫存有了 Local...
本篇開箱的是vue-ellipsis-3，是一款簡單上手就能實現的文字縮略元件。 相信大家在網頁功能上一定會碰到這個需求，超過某個寬度時要出現...省略號（...
這裡要將會員登入頁面（LoginView.vue 檔）中 axios.get() 取得的會員 name 儲存到 Pinia 裡的 store 。再透過該 sto...
(1)新增會員主頁檔案會員頁面登入後的畫面稱為會員主頁（以下簡稱主頁）。路徑 src / views / front 底下新增 MainView.vue 檔案。...
本篇開箱是VueUse中的useResizeObserver方法，簡單就能取元素的寬高 昨篇介紹的是針對整個螢幕的寬高去做偵測，但是如果今天的需求是當某一個...
(1)新增會員頁面檔案路徑 src / views 底下新增 front 資料夾，並於此增加 LoginView.vue 檔案。html 架構同註冊頁面（表單驗...
本篇開箱的是VueUse中的useWindowSize方法，簡單就能取得目前螢幕的寬高 介紹 VueUse 是一個基於Vue.js 的開源函式庫，主要是以...
jennydisc
切版姐姐
iThome鐵人賽
看影片追技術