iT邦幫忙

vue3相關文章
共有 251 則文章
鐵人賽 Vue.js DAY 17

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

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

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

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

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

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

技術 Day16-試試Vue3-口袋餐廳選單(1)

本篇開始會對「Day15-試試Vue3-口袋餐廳的html架構」的內容進行調整,試將資料內容改用 JavaScript 來動態渲染畫面。因開發過程細節較多會分幾...

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

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

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

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

技術 Day15-試試Vue3-口袋餐廳的html架構

此篇接續介紹口袋餐廳頁面的靜態 html 架構。 (1) html 程式碼畫面示意圖請參考前一篇。介面開發的技巧如下: 導覽(nav)架構請參考「Day8-試...

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

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

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

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

技術 Day14-試試Vue3-規劃口袋餐廳的頁面

對於前端新手來說,編寫 JavaScript 可能較具挑戰性。譬如如何使用 v-for 進行資料渲染等 JavaScript 方法,建議先專注於建立想要的 ht...

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

技術 開箱13:圖片轉文字不專業版~Tesseract.js範例應用

本篇開箱Tesseract.js是能圖像中取得文字的工具 介紹 Tesseract.js 是一個 JavaScript 函式庫,它是基於 Google 的...

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

技術 Day13-試試Vue3-建立餐廳API

同「Day5-試試Vue3-建立會員API」篇採用 json-server 方式建立 API。 (1)新增 restaurant.json 檔案建立資料專案根目...

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

技術 開箱12:語音轉文字不專業版~SpeechRecognition範例應用

Web Speech API 可讓您將語音資料合併到 Web 應用程式中。分兩個功能:(Speech Synthesis)語音合成(文字轉語音)和(Speech...

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

技術 Day12-試試Vue3-使用者故事(會員主頁)

這篇簡單說明使用者故事(以會員角度)。 假定華特義式餐廳為一餐飲集團,旗下有多個義式料理相關的餐飲品牌。為提供集團會員更多便利和互動性,會員主頁除首頁、登出外提...

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

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

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

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

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

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

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

技術 Day10-試試Vue3-歡迎訊息顯示會員名(Pinia)下

分享寫「Day9-試試Vue3-主頁歡迎訊息顯示會員名(Pinia)」時整理幾種其他歡迎訊息顯示會員名的寫法,及從中學到的新知識點。會分兩篇介紹。 (1)登入會...

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

技術 開箱10:自適應高度TextArea~resize-textarea-vue3範例應用

本篇介紹根據內容自動更新文字區域的高度的工具resize-textarea-vue3 <input>只能輸入單行,而<textarea&g...

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

技術 開箱9:輕鬆實現多行文本溢出顯示...~vue-ellipsis-3範例應用

本篇開箱的是vue-ellipsis-3,是一款簡單上手就能實現的文字縮略元件。 相信大家在網頁功能上一定會碰到這個需求,超過某個寬度時要出現...省略號(...

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

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

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

鐵人賽 Vue.js DAY 9

技術 DAY 9 - v-bind 綁定樣式與 v-on 監聽事件

DAY 9 - v-bind 綁定樣式與 v-on 監聽事件 v-bind 綁定你的 attributes(屬性) v-bind 簡寫、縮寫 常見運...

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

技術 Day8-試試Vue3-會員登入後轉跳主頁

(1)新增會員主頁檔案會員頁面登入後的畫面稱為會員主頁(以下簡稱主頁)。路徑 src / views / front 底下新增 MainView.vue 檔案。...

鐵人賽 Vue.js DAY 8

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

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

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

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

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

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

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

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

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

技術 開箱6:偵測螢幕寬度~useWindowSize範例應用

本篇開箱的是VueUse中的useWindowSize方法,簡單就能取得目前螢幕的寬高 介紹 VueUse 是一個基於Vue.js 的開源函式庫,主要是以...

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

技術 Day6-試試Vue3-表單使用Vee Validate驗證

基本上表單驗證前後端都需要做,前端可做簡單的基礎驗證(如 mail 須為正確格式、必填欄位等),後端則負責較嚴謹的驗證。此篇針對註冊頁面的表單增加 Vee Va...

鐵人賽 Vue.js DAY 6

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

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

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

技術 開箱5:輕量視窗follow me~VueFinalModal範例應用

本篇開箱的是Vue Final Modal 4,簡單應用就能有modal視窗 ▲ 示意圖 介紹 Vue Final Modal 是一個輕量、無渲染、對行動裝...

鐵人賽 Modern Web DAY 19

技術 在 NX 中建立 Vue 元件庫

來嘗試在 NX 中建立 Vue 元件庫 lib。 跟 Nuxt 一樣,目前官方沒有支援 Vue 的擴充,所以要手動設定。 首先建立一個基於 Vite 的 js...

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

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

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

鐵人賽 Vue.js DAY 5

技術 DAY 5 - Vue 2 > Vue 3 破壞性改動,了解不同版本

DAY 5 - Vue 2 > Vue 3 破壞性改動,了解不同版本 為什麼要了解不同版本呢 ? 1. 版本間差異寫法大,只學一種不理解其中差...

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

技術 開箱4:超強輪播插件~Vue-Swiper範例應用

本篇開箱的是Swiper一個流行的、功能強大的插件庫,用於創建滑動式的輪播、幻燈片和相冊...等。 ▲ 示意圖 介紹 Swiper是一個電腦和手機端全螢幕滑...