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 的開源函式庫，主要是以...
基本上表單驗證前後端都需要做，前端可做簡單的基礎驗證（如 mail 須為正確格式、必填欄位等），後端則負責較嚴謹的驗證。此篇針對註冊頁面的表單增加 Vee Va...
來嘗試在 NX 中建立 Vue 元件庫 lib。 跟 Nuxt 一樣，目前官方沒有支援 Vue 的擴充，所以要手動設定。 首先建立一個基於 Vite 的 js...
本篇開箱的是Vue Final Modal 4，簡單應用就能有modal視窗 ▲ 示意圖 介紹 Vue Final Modal 是一個輕量、無渲染、對行動裝...
此篇 API 部分主要紀錄如何建立簡易的 API 供專案發送網路請求用。 (1)安裝 json-serverjson-server 利用 Node.js 提供的...
安裝 Vue Cli npm install -g @vue/cli 創建 Vue 項目 vue create 自訂義的資料夾名稱 因為一些個人因素，之...
本篇開箱的是Swiper一個流行的、功能強大的插件庫，用於創建滑動式的輪播、幻燈片和相冊...等。 ▲ 示意圖 介紹 Swiper是一個電腦和手機端全螢幕滑...
本篇開箱的是vue-easy-lightbox，簡單應用就能有圖片預覽功能 ▲ 示意圖 介紹 基於Vue.js 3.0與TypeScript構建的圖片瀏覽(...
首頁分為註冊與會員登入頁面，此篇先介紹註冊部分。 (1)建立路由表Vue.js 是一個元件化的框架，每個頁面通常由一個或多個元件構成，且元件有各自的生命周期，包...
本篇開箱的是vue.draggable.next，是一款簡單上手vue3的拖曳插件也就是vue.draggable升級版本。 ▲ 官方典型範例示意圖 介紹...
今年其實很猶豫要不要參賽，想把去年的安裝教學做完，還是報名了。壓線最後一刻 ~~~(有可能不會完成30天的影片發文:P)(但會把Vue Cli和Node.js...
前端御三家，請選擇 前端框架，一個在「大前端時代」出現的產物，當 jQuery 已經沒辦法輕易應付萬紫千紅的需求時，框架開始崛起。 近期開始接觸網頁程式的人，無...
(1)安裝 Bootstrap 套件bootstrap 最新版本請參考這個網站。 Visual Studio 「工具列/終端機/新增終端機」開啟終端機並輸入以下...
(1)建立 vite 專案透過命令提示字元以 npm 方式建立 vite 專案。 STEP1. 開啟命令提示字元視窗Windows 作業系統中點擊開始>搜...
技術背景資料庫工程師轉前端技術。所學從六角學院修習切版、 JavaScript 、 Vue 三種前端技術。 參賽初衷所學至今跟著課程作業有作出一些網站前後台模板...
今日前言 Nuxt3 了，接下來後半篇鐵人賽都會以 Nuxt3 為主，一開始預計 Vue.js 的概念篇本來預計寫 10 天，不知不覺越寫越多 orz ...發...
元件大致上的使用規則都已經了解後，這一個單元會實際用一個例子來講解元件的其中一個用法，就是可以使用元件來製作 Tab 的瀏覽方式。 一開始先新增三個元件檔案，分...
template 輸入和添加 v-model綁定input的數據，裡面的字顯示新增待辦，也加上enter和按鈕觸發事件 待辦列表 v-for渲染我們的filte...
切版姐姐
jennydisc
Jasper
Olivia
imall
阿蘇蘇
JK 程式誌
lohchanhin
iThome鐵人賽
看影片追技術