按鈕在網頁中是最常見的元件之一,這個元件通常在使用者點擊後會觸發程式上的操作,可能是關閉或打開 Modal,也可能是送出表單,又或是刪除某些重要資料等等。 在...
連結(Link)在網站開發中是不可或缺的存在。為了讓我們更好的實現 SPA(Single Page Application)網站,我們通常會使用 Vue Ro...
身為前端工程師,元件管理是不論選用哪一個前端框架的開發人員都需要面臨的挑戰。能不能妥善規劃與管理元件,很大程度上決定了專案未來的走向。好的元件規劃可以讓開發更...
緣起 源自公司內部練習專案,靈感來自於以前看到一個名為「最糟糕音量控制設計大賽」的有趣比賽。 簡單來說就是設計奇奇怪怪的元件。 別看這些元件好像很沒用,實作起來...
#node_modules\klinecharts/dist/klinecharts.js 2450行 定義多語結構 tooltip: { show...
v-for 寫在 html tag 裡面跑回圈,可設定 key <div v-for="item in items" :key=&qu...
甚麼是 Vue Vue 是一個前端框架,有兩大核心: 聲明式渲染、響應式 宣告式渲染: 相較於指令式能用較間單方式控制 HTML 和 JavaScript 之間...
前言 這星期二突然發現我們應該做的登入系統還沒做,聽隊友們討論聽得頭皮發麻,太多我聽都沒聽過的專有名詞,但也只能故作鎮定繼續聽下去,討論結束前,試圖用很具體很直...
👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 Nuxt 3 網站部署至 Vercel 流程 前往 Verc...
Nuxt 3 版本的升級 目前 Nuxt 3 仍積極的在修正錯誤與添加新功能,版本更新的速度也不慢,相較去年底,目前正式版釋出後已經穩定許多,與其他大型的開源框...
前言 這篇文章來回收 為什麼選 Vue? 所埋的伏筆。 我就先說了,這篇應該不會是什麼太正經的文章,純粹是最後一天放飛自我的內容 XD Vue 的版本代號 會想...
👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 建構打包專案 使用 Nuxt CLI 的 build 指令來...
前言 Nuxt 3 除了是一個 SSR 的框架外,也能允許網頁使用混合渲染 (Hybrid Rendering),混合渲染允許使用路由路徑的規則來決定不同的渲染...
前言 多年前筆者初次接觸框架時,不對...應該是開始寫網頁程式時,最大的疑惑莫過於那個在 localhost 執行的東西,該怎麼實際讓人家有辦法透過網只看到內容...
👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 展示專案 我們使用實戰部落格系列所開發的範例程式碼:http...
前言 Nuxt 3 的網站應用程式,可以根據實際業務需求來決定渲染的模式,而最終專案所建構打包的專案程式碼,也會因為模式的選擇而需要部署在不同的執行環境上,例如...
前言 我們已經知道元件與元件之間的溝通可以使用 props 與 emits,不過這東西就只能設定兩個元件溝通的狀態。 如果我們的元件樹的結構長得比較複雜一點,尾...
👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 添加網站頁面的標題 調整 ./app.vue 檔案: <...
前言 Nuxt 3 的渲染模式,可以支援我們產生靜態的頁面,而這些預渲染的靜態網頁檔案,就很適合部署至靜態的託管平台來服務,例如 Cloudflare Page...
本次要跟姊姊一起學習Vue 3 + Firebase Cloud Messaging 測試一筆訊息通知吧! ▶ 如果您尚未建立專案/安裝 Firebase J...
前言 傳統網頁的網址,以往會是後端根據不同的頁面去配置不同的網址規則。 不過如果要使用 Vue 框架開發網頁,會是「單一頁面網站」 (Sigle Page Ap...
👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 建立路由中間件 在 middleware 目錄下建立一個檔案...
前言 網站開發過程與上正式環境後,難免會遇到一些 Bug 導致網站處理邏輯發生異常,甚至一小段的 JavaScript 的邏輯錯誤或未處理的拋出錯誤,可能導致整...
Vite 的簡易介紹 之前所有的操作項目,都是直接使用 CDN 引入 Vue 之後進行開發,這種做法在一個小型的應用程式足以感受到 Vue 的方便性。 不過一個...
MV播放1.MV標示顯示(v-if2.MV地址獲取3.遮罩層(v-show v-on4.MV地址設置(v-bind mv地址獲取(以下為黑馬程序員課程提供)請...
播放CD-監聽音樂播放(v-on play-監聽音樂暫停(v-on pause-操縱class(v-bind 對象這個功能不用掉用到axios,只要操作clas...
歌曲評論->點擊播放時同步顯示當前評論->列表結構1.點擊播放2.評論獲取:axios+歌曲id3.渲染:v-for 熱門評論獲取(以下為黑馬程序...
歌曲封面1.更蓋封面主要是更改image的src2.封面獲取3.封面設置v-bind 歌曲詳情獲取(以下為黑馬程序員課程提供)-請求地址:https://au...
👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 建立伺服器中間件 在 server/middleware 目...
前言 不管在 Vue 與 Nuxt 的開發,常會有需要使用圖片或靜態資源的時刻,例如,已經具有外部的圖片連結,我們很輕易的可以使用 URL 等方式來做載入,若是...