iT邦幫忙

vue相關文章
共有 669 則文章
鐵人賽 Modern Web DAY 30

技術 【Day 30】從Vue學React!最終大回顧&完賽感言

沒想到與React和Vue你看我我看你地過著的這段日子雖然過程難熬,但回頭看卻又發現時間過得居然如此的快,轉眼間已經到了鐵人賽的最後一天了!雖然已經到了最後一天...

鐵人賽 Vue.js DAY 22

技術 我的 Vue.js 筆記(22) - 元件之間的溝通:emit

前言 前篇說到,在定義好元件之後,如果元件需要透過「外部」傳入狀態,可以使用 props 來傳遞,同時也提到 props 應該是 readonly 的特性,不該...

鐵人賽 影片教學 DAY 8
Nuxt 3 快速入門 系列 第 8

技術 [影片教學] Nuxt 3 元件 (Components)

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 建立與使用第一個元件 在 components 目錄下建立一...

鐵人賽 影片教學 DAY 16
Nuxt 3 快速入門 系列 第 16

技術 [影片教學] Nuxt 3 狀態管理 (State Management)

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 建立路由頁面 在 pages 目錄下建立一個檔案 ./pag...

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

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

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

鐵人賽 影片教學 DAY 13
Nuxt 3 快速入門 系列 第 13

技術 [影片教學] Nuxt 3 Server API

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 建立第一個 Server API 在 server/api...

鐵人賽 影片教學 DAY 12
Nuxt 3 快速入門 系列 第 12

技術 [影片教學] Nuxt 3 路由中間件 (Route Middleware)

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 建立路由頁面 建立 About 頁面 在 pages 目錄下...

鐵人賽 影片教學 DAY 9
Nuxt 3 快速入門 系列 第 9

技術 [影片教學] Nuxt 3 組合式函式 (Composables)

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 建立與使用組合式函式 在 composables 目錄下建立...

鐵人賽 Vue.js DAY 19

技術 我的 Vue.js 筆記(19) - 認識元件、Vue 的單一元件檔案 SFC

認識元件 在 Vue 幫我們解決的事情這篇文章中,已經用一個簡單的方式介紹元件的概念。 當時只是提到模板結構跟資料抽離,並且讓結構重複使用,帶上不同的資料。 有...

鐵人賽 Vue.js DAY 13

技術 我的 Vue.js 筆記(13) - 指令

指令介紹 開始進入指令的章節,先前有提到,在 Vue 中,只要看到 v- 開頭的東西,就是指令。 指令的用途很多,例如:資料綁定、事件綁定、條件判斷、迴圈等等。...

鐵人賽 Vue.js DAY 30

技術 DAY 30 - <鐵人完賽> 回顧 30 Days 學習歷程

DAY 30 - &lt;鐵人完賽感言&gt; 回顧 30 Days 學習歷程 DAY 30 完結篇,在抓篇章結果沒有預估好,Nuxt 果然寫不完 XD光是...

鐵人賽 影片教學 DAY 15
Nuxt 3 快速入門 系列 第 15

技術 [影片教學] Nuxt 3 資料獲取 (Data Fetching)

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 建立 Server API 在 server/api 目錄下...

技術 14.代辦清單-刪除、統計

點擊刪除指定內容(v-on splice索引) splice方法的使用當我們點擊某個待辦事項的刪除按鈕時,remove方法將被調用,並將該待辦事項從lists...

技術 25.music-MV播放

MV播放1.MV標示顯示(v-if2.MV地址獲取3.遮罩層(v-show v-on4.MV地址設置(v-bind mv地址獲取(以下為黑馬程序員課程提供)請...

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

技術 開箱20:前端用戶導覽這樣做~v-onboarding範例應用

當我們第一次使用某網站時,有時候網站會跳出導覽指引(就是教你怎麼用?),這可稱作網頁導覽或者用戶導覽(User Tour)或者 Onboarding (是指使用...

鐵人賽 影片教學 DAY 27
Nuxt 3 快速入門 系列 第 27

技術 [影片教學] Nuxt 3 SEO 搜尋引擎最佳化 - 實戰部落格系列 Part 5

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 添加網站頁面的標題 調整 ./app.vue 檔案: &lt...

技術 19.天氣查詢(下)

用戶可以輸入城市名稱,然後點擊按鈕來獲取天氣訊息。當用戶輸入城市名稱並點擊按鈕時,應用會向天氣API發送請求,然後顯示返回的天氣數據 首先先到openwea...

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

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

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

技術 15.代辦清單-清空、隱藏

清空-點及清除所有信息(v-on)Clear =&gt;讓列表裡面的值全部清空lists=[] v-on click觸發 clear(){ this...

技術 7.Vue-1

Vue是一個用於建立使用者介面的 JavaScript 框架。他提供聲明性和基於元件的程式設計模型,幫助開發人員構建交互性強、高效的網頁應用程序。以下是Vue的...

技術 11.Vue圖片切換

定義圖片陣列-圖片數組imgArr 添加圖片索引-index 綁定src屬性-v-bind 圖片切換 v-on 邏輯-v-show 顯示狀態切換 &lt;d...

鐵人賽 影片教學 DAY 22
Nuxt 3 快速入門 系列 第 22

技術 [影片教學] Nuxt 3 靜態資源的管理 - Public & Assets

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 Public 目錄 在 Nuxt 3 的專案根目錄下,存在一...

鐵人賽 Modern Web DAY 10

技術 【Day 10】ref和useState:定義與畫面渲染有關的State

前天和昨天花了一些時間了解Vue和React的「單向資料流」設計模式後,接著來看看與畫面渲染有關的state的部分,雖然在使用上,某些程度來說,Vue和Reac...

技術 18.天氣查詢(上)

Enter事件-&gt;按下enter(v-on .enter)-&gt;查詢數據(axios / v-model)-&gt;渲染 v-for / that...

技術 20.music-歌曲搜索

要添加歌曲搜索功能,可以使用音樂數據API(例如Spotify、YouTube等)來獲取歌曲信息。在瀏覽器中搜尋-&gt;enter-&gt;發送給服務器1.按...

鐵人賽 Modern Web DAY 14

技術 【Day 14】設計樣式共用的元件!Vue有v-slot,那React可以怎麼做!?

對vue比較熟悉的朋友們,應該對於slot的使用都不陌生,slot對於增加元件的使用彈性上有著很大的幫助。但是React沒有vue框架中的v-slot,要怎麼彈...

技術 13.代辦清單-新增

今天來練習一個小小的代辦清單:新增功能:1.生成列表結構 v-for2.獲取用戶輸入 (v-model 雙向數據綁定)3.enter,新增數據 (v-on .e...

鐵人賽 Modern Web DAY 15

技術 【Day 15】究竟是watch?還是生命週期API?處理副作用的useEffect

寫Vue的時候,偶爾會需要使用watch去監聽某個state的變動,來去進行一些邏輯操作。在接觸React之後,我發現React也有一個類似用途的hook,這個...

技術 12.Vue-5

(一) v-for根據數據生成結構列表(如陣列或物件) 語法: item in items (item 的名稱可任意命名,只要是合法的 JavaScript...

技術 22.music-歌曲封面

歌曲封面1.更蓋封面主要是更改image的src2.封面獲取3.封面設置v-bind 歌曲詳情獲取(以下為黑馬程序員課程提供)-請求地址:https://au...