iT邦幫忙

vue相關文章
共有 792 則文章
鐵人賽 Modern Web DAY 3

技術 [為你自己寫 Vue Component] AtomicButton

按鈕在網頁中是最常見的元件之一,這個元件通常在使用者點擊後會觸發程式上的操作,可能是關閉或打開 Modal,也可能是送出表單,又或是刪除某些重要資料等等。 在...

鐵人賽 Modern Web DAY 2

技術 [為你自己寫 Vue Component] AtomicLink

連結(Link)在網站開發中是不可或缺的存在。為了讓我們更好的實現 SPA(Single Page Application)網站,我們通常會使用 Vue Ro...

鐵人賽 Modern Web DAY 1

技術 [為你自己寫 Vue Component] 簡介

身為前端工程師,元件管理是不論選用哪一個前端框架的開發人員都需要面臨的挑戰。能不能妥善規劃與管理元件,很大程度上決定了專案未來的走向。好的元件規劃可以讓開發更...

鐵人賽 Modern Web DAY 1

技術 D01 - 行前須知

緣起 源自公司內部練習專案,靈感來自於以前看到一個名為「最糟糕音量控制設計大賽」的有趣比賽。 簡單來說就是設計奇奇怪怪的元件。 別看這些元件好像很沒用,實作起來...

技術 [NPM] klinechart多語系

#node_modules\klinecharts/dist/klinecharts.js 2450行 定義多語結構 tooltip: { show...

技術 Vue 好用語法 (v-for、v-show、v-bind、v-model、v-on、scoped)

v-for 寫在 html tag 裡面跑回圈,可設定 key <div v-for="item in items" :key=&qu...

技術 甚麼是 Vue、Options API 、Composition API

甚麼是 Vue Vue 是一個前端框架,有兩大核心: 聲明式渲染、響應式 宣告式渲染: 相較於指令式能用較間單方式控制 HTML 和 JavaScript 之間...

技術 實作login試誤篇

前言 這星期二突然發現我們應該做的登入系統還沒做,聽隊友們討論聽得頭皮發麻,太多我聽都沒聽過的專有名詞,但也只能故作鎮定繼續聽下去,討論結束前,試圖用很具體很直...

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

技術 [影片教學] Nuxt 3 部署網站服務

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 Nuxt 3 網站部署至 Vercel 流程 前往 Verc...

鐵人賽 Vue.js DAY 30
Nuxt 3 實戰筆記 系列 第 30

技術 [Day 30] Nuxt 3 版本的升級與套件升級的管理工具

Nuxt 3 版本的升級 目前 Nuxt 3 仍積極的在修正錯誤與添加新功能,版本更新的速度也不慢,相較去年底,目前正式版釋出後已經穩定許多,與其他大型的開源框...

鐵人賽 Vue.js DAY 30

技術 我的 Vue.js 筆記(30) - Vue 的版本代號與參賽後記

前言 這篇文章來回收 為什麼選 Vue? 所埋的伏筆。 我就先說了,這篇應該不會是什麼太正經的文章,純粹是最後一天放飛自我的內容 XD Vue 的版本代號 會想...

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

技術 [影片教學] Nuxt 3 部署前的建構打包

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 建構打包專案 使用 Nuxt CLI 的 build 指令來...

鐵人賽 Vue.js DAY 29
Nuxt 3 實戰筆記 系列 第 29

技術 [Day 29] Nuxt 3 混合渲染 (Hybrid Rendering) 中的 SWR 與 ISR

前言 Nuxt 3 除了是一個 SSR 的框架外,也能允許網頁使用混合渲染 (Hybrid Rendering),混合渲染允許使用路由路徑的規則來決定不同的渲染...

鐵人賽 Vue.js DAY 29

技術 我的 Vue.js 筆記(29) - 將專案打包上版到 GitHub Pages

前言 多年前筆者初次接觸框架時,不對...應該是開始寫網頁程式時,最大的疑惑莫過於那個在 localhost 執行的東西,該怎麼實際讓人家有辦法透過網只看到內容...

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

技術 [影片教學] Nuxt 3 視覺化開發工具 Nuxt DevTools

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 展示專案 我們使用實戰部落格系列所開發的範例程式碼:http...

鐵人賽 Vue.js DAY 28
Nuxt 3 實戰筆記 系列 第 28

技術 [Day28] Nuxt 3 建構打包與部署至 Cloudflare Workers

前言 Nuxt 3 的網站應用程式,可以根據實際業務需求來決定渲染的模式,而最終專案所建構打包的專案程式碼,也會因為模式的選擇而需要部署在不同的執行環境上,例如...

鐵人賽 Vue.js DAY 28

技術 我的 Vue.js 筆記(28) - 認識大鳳梨

前言 我們已經知道元件與元件之間的溝通可以使用 props 與 emits,不過這東西就只能設定兩個元件溝通的狀態。 如果我們的元件樹的結構長得比較複雜一點,尾...

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

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

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

鐵人賽 Vue.js DAY 27
Nuxt 3 實戰筆記 系列 第 27

技術 [Day 27] Nuxt 3 產生靜態網頁部署至 Cloudflare Pages 與持續自動部署

前言 Nuxt 3 的渲染模式,可以支援我們產生靜態的頁面,而這些預渲染的靜態網頁檔案,就很適合部署至靜態的託管平台來服務,例如 Cloudflare Page...

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

技術 開箱27:Vue 3 + Firebase Cloud Messaging 建立測試通知

本次要跟姊姊一起學習Vue 3 + Firebase Cloud Messaging 測試一筆訊息通知吧! ▶ 如果您尚未建立專案/安裝 Firebase J...

鐵人賽 Vue.js DAY 27

技術 我的 Vue.js 筆記(27) - 使用 Vue Router

前言 傳統網頁的網址,以往會是後端根據不同的頁面去配置不同的網址規則。 不過如果要使用 Vue 框架開發網頁,會是「單一頁面網站」 (Sigle Page Ap...

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

技術 [影片教學] Nuxt 3 路由頁面的權限判斷 - 實戰部落格系列 Part 4

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

鐵人賽 Vue.js DAY 26
Nuxt 3 實戰筆記 系列 第 26

技術 [Day 26] Nuxt 3 錯誤頁面 (Error Page) 與錯誤處理 (Error handling)

前言 網站開發過程與上正式環境後,難免會遇到一些 Bug 導致網站處理邏輯發生異常,甚至一小段的 JavaScript 的邏輯錯誤或未處理的拋出錯誤,可能導致整...

鐵人賽 Vue.js DAY 26

技術 我的 Vue.js 筆記(26) - 使用 Vite 開發 Vue

Vite 的簡易介紹 之前所有的操作項目,都是直接使用 CDN 引入 Vue 之後進行開發,這種做法在一個小型的應用程式足以感受到 Vue 的方便性。 不過一個...

技術 25.music-MV播放

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

技術 24.music-播放CD

播放CD-監聽音樂播放(v-on play-監聽音樂暫停(v-on pause-操縱class(v-bind 對象這個功能不用掉用到axios,只要操作clas...

技術 23.music-歌曲評論

歌曲評論->點擊播放時同步顯示當前評論->列表結構1.點擊播放2.評論獲取:axios+歌曲id3.渲染:v-for 熱門評論獲取(以下為黑馬程序...

技術 22.music-歌曲封面

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

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

技術 [影片教學] Nuxt 3 Server API 權限判斷與串接 - 實戰部落格系列 Part 3

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

鐵人賽 Vue.js DAY 25
Nuxt 3 實戰筆記 系列 第 25

技術 [Day 25] Nuxt 3 深入靜態資源的使用 Public & Assets

前言 不管在 Vue 與 Nuxt 的開發,常會有需要使用圖片或靜態資源的時刻,例如,已經具有外部的圖片連結,我們很輕易的可以使用 URL 等方式來做載入,若是...