前言 不知道大家在開始使用元件的時候有沒有一個疑惑，明明元件在模版中的寫法跟一般的 HTML 標籤沒兩樣 <my-component></my...
歌曲播放1.點擊歌曲v-on2.歌曲地址獲取(axios/歌曲id)3.歌曲地址設置(v-bind)4.Audio標籤當我們點擊播放時，audio裡的src會改...
👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。 建立 Neon Serverless Postgres 資料...
要添加歌曲搜索功能，可以使用音樂數據API（例如Spotify、YouTube等）來獲取歌曲信息。在瀏覽器中搜尋->enter->發送給服務器1.按...
前言 Nuxt 3 整合 Vue I18n v9.x 多國語系的模組 Nuxt I18n，已經在 RC 階段準備釋出正式版，在使用上也穩定不少，這篇文章將介紹一...
用戶可以輸入城市名稱，然後點擊按鈕來獲取天氣訊息。當用戶輸入城市名稱並點擊按鈕時，應用會向天氣API發送請求，然後顯示返回的天氣數據 首先先到openwea...
動態元件 網頁中有一種常見的功能，是能做到某個區塊可以點選畫面中的按鈕(或標籤)進行資料的抽換，這種功能在電商網站就很常會看到。 在 Vue 中要實踐這種功能，...
本次要跟姊姊一起學習Vue 3 + Firebase Authentication 信箱註冊登入登出功能 ▶ 如果您尚未建立專案／安裝 Firebase JS...
Enter事件->按下enter(v-on .enter)->查詢數據(axios / v-model)->渲染 v-for / that...
👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。 建立預設布局模板與路由頁面 在 layouts 目錄下建立一...
在vue實例方法當中可以透過this訪問data裡面的數據，但獲取網路數據後，vue實例裡面的this不在是同樣的那個因此無法訪問data中的數據，所以我們應該...
(一)Axios基於promise的HTTP客戶端，可以用在瀏覽器和 Node.js 中，幫助你發送 GET、POST、PUT、DELETE 等不同類型的請求...
前言 Nuxt 3 整合 Vue I18n v9.x 多國語系的模組 Nuxt I18n，已經在 RC 階段準備釋出正式版，在使用上也穩定不少，這篇文章將簡單的...
前言 之前提到，元件如果要接收資料，必須用 props元件如果要向外傳資料，則是定義 emit 事件 假設我們的元件有個 <input> 標籤，我們...
👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。 Public 目錄 在 Nuxt 3 的專案根目錄下，存在一...
清空-點及清除所有信息(v-on)Clear =>讓列表裡面的值全部清空lists=[] v-on click觸發 clear(){ this...
點擊刪除指定內容(v-on splice索引) splice方法的使用當我們點擊某個待辦事項的刪除按鈕時，remove方法將被調用，並將該待辦事項從lists...
今天來練習一個小小的代辦清單:新增功能:1.生成列表結構 v-for2.獲取用戶輸入 (v-model 雙向數據綁定)3.enter，新增數據 (v-on .e...
前言 網站的介面多多少少會放置圖示 (Icon)，圖示的載入方式可以像圖片一樣以 png、jpg、webp 或 svg 等圖片格式來呈現，本篇將介紹如何在 Nu...
本次要跟姊姊一起學習Vue 3 + Firebase 實現一些功能，只是本篇只是先介紹事前準備，下篇才會進去實作 如果您尚未建立專案 及 安裝 Firebase...
前言 前篇說到，在定義好元件之後，如果元件需要透過「外部」傳入狀態，可以使用 props 來傳遞，同時也提到 props 應該是 readonly 的特性，不該...
沒想到與React和Vue你看我我看你地過著的這段日子雖然過程難熬，但回頭看卻又發現時間過得居然如此的快，轉眼間已經到了鐵人賽的最後一天了！雖然已經到了最後一天...
👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。 配置 Nuxt I18n 安裝 Nuxt I18n 套件 n...
前言 在搜尋引擎最佳化 SEO 中，其中有一個最佳化項目是結構化資料標記 (Structured Data Markup)，當你的網站設定好結構化的資料，將有助...
前言 這篇文章來記錄一下，當父層元件傳遞資料給子層元件的語法：props props 我們已經知道在模版中要使用元件，會是這樣的語法： <div id=&...
(一) v-for根據數據生成結構列表(如陣列或物件) 語法: item in items (item 的名稱可任意命名，只要是合法的 JavaScript...
定義圖片陣列-圖片數組imgArr 添加圖片索引-index 綁定src屬性-v-bind 圖片切換 v-on 邏輯-v-show 顯示狀態切換 <d...
(一)v-show: 根據條件的布林值來控制元素的顯示和隱藏，與CSS的display屬性相關聯，但與v-if指令不同，v-show 不會將元素從DOM中移除，...
(一) v-text:設置標籤的文本內容textContent我們除了可以用兩個大括號{{}}將data值綁定之外，也可用使用v-txet <div id...
👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。 使用 useCookie 來設定 Cookie 在 page...
imall
Ryan
切版姐姐
文科少女
iThome鐵人賽
看影片追技術