iT邦幫忙

vue.js相關文章
共有 1414 則文章
鐵人賽 Vue.js DAY 26

技術 DAY 26 - Nuxt 渲染模式 SSR+SPA / CSR / 混合渲染 ,輕鬆切換渲染模式

DAY 26 - Nuxt 渲染模式 SSR+SPA / CSR / 混合渲染 ,輕鬆切換渲染模式 今日前言 - 網站模式/渲染模式複習 前篇 DAY 25...

鐵人賽 Vue.js DAY 27
業主說給你30天學會Vue 系列 第 27

技術 V27_Vue的小專案_youtube點播機(1)

V27_Vue的小專案_youtube點播機(1) 在先前的發文中,對於Vue的學習已經有一些基礎,再最後的幾篇發文,想要來做一個小專案,youtube點播機...

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

技術 開箱25:Vue 3 + Firebase Cloud Firestore 簡單CRUD功能

本次要跟姊姊一起學習Vue 3 + Firebase Firestore database CRUD功能 ▶ 如果您尚未建立專案/安裝 Firebase JS...

鐵人賽 Vue.js DAY 26
業主說給你30天學會Vue 系列 第 26

技術 V26_Vue的Routing的操作

V26_Vue的Routing的操作 今天來研究一下Vue的Routing的操作,在一般的Vue的學習上,有使用SFC或是Component的方式也有使用slo...

鐵人賽 影片教學 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 等方式來做載入,若是...

鐵人賽 Vue.js DAY 25

技術 DAY 25 - Vue SPA 單頁式/ MPA 多頁式 / Nuxt SSR / CSR

DAY 25 - Vue SPA 單頁式/ MPA 多頁式 / Nuxt SSR / CSR 今日前言 接下來會提到 Nuxt 渲染方式,那就不得不提到本身...

鐵人賽 Vue.js DAY 25
業主說給你30天學會Vue 系列 第 25

技術 V25_Vue的slot網頁內容的分解及組合

V25_Vue的slot網頁內容的分解及組合 今天來研究一下 slots的用法 參考W3School Vue的說明Vue v-slothttps://www.w...

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

技術 [影片教學] Nuxt 3 建立部落格文章相關 API - 實戰部落格系列 Part 2

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 建立 Neon Serverless Postgres 資料...

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

技術 [Day 24] Nuxt 3 多國語系模組 Nuxt I18n 的進階使用方法與 SEO 搜尋引擎最佳化

前言 Nuxt 3 整合 Vue I18n v9.x 多國語系的模組 Nuxt I18n,已經在 RC 階段準備釋出正式版,在使用上也穩定不少,這篇文章將介紹一...

鐵人賽 Vue.js DAY 24

技術 DAY 24 - Nuxt Routing 路由 與動態路由

DAY 24 - Nuxt Routing 路由 與動態路由 Nuxt Routing Nuxt 路由是基於vue-router 來使用, 依據資料夾 pa...

鐵人賽 Vue.js DAY 24
業主說給你30天學會Vue 系列 第 24

技術 V24_Vue的props_emit_子元件傳資料給父元件

V24_Vue的props_emit_子元件傳資料給父元件 今天來再次研究一下 子元件傳資料給父元件 的方式有時一些Vue的語法需要不斷反覆練習將一些有疑慮的問...

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

技術 [影片教學] Nuxt 3 建立第一個網站 - 實戰部落格系列 Part 1

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

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

技術 [Day 23] Nuxt 3 多國語系模組 Nuxt I18n 的初入門與基本使用方法

前言 Nuxt 3 整合 Vue I18n v9.x 多國語系的模組 Nuxt I18n,已經在 RC 階段準備釋出正式版,在使用上也穩定不少,這篇文章將簡單的...

鐵人賽 Vue.js DAY 23

技術 DAY 23 - Nuxt 將 component、page 、layout 整合,嘗試寫一個模板

DAY 23 - Nuxt 將 component、page 、layout 整合,嘗試寫一個模板 驗收學習成果 再這篇我們會試著整合前面所學的,將 app...

鐵人賽 Vue.js DAY 23
業主說給你30天學會Vue 系列 第 23

技術 V23_Vue的provide_inject_父元件傳資料給子元件

V23_Vue的provide_inject_父元件傳資料給子元件 今天來探究一下 Provide/Inject 的用法參考一下W3School_Vue的說明V...

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

技術 開箱22:效能優化?記憶化(Memoization)~Vue範例應用

在前端開發中,記憶化(Memoization)主要用於優化性能,特別是在需要頻繁計算或重新渲染的情況下。所以我們今天來認識一下在Vue中,有幾種方式可以實現Me...

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

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

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

鐵人賽 SideProject30 DAY 22

技術 Day22—開發日記(六)提醒密碼一致與否(v-show)、使用者資料傳入firestore

前言 今天是開發的Day6,開發重點為: 使用vue指令v-show進行實時確認密碼認證 將資料同步加進去firestore的資料庫 實現內容 圖片來源...

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

技術 [Day 22] Nuxt 3 使用 SVG 的解決方案與更方便的使用 Icon 圖示

前言 網站的介面多多少少會放置圖示 (Icon),圖示的載入方式可以像圖片一樣以 png、jpg、webp 或 svg 等圖片格式來呈現,本篇將介紹如何在 Nu...

鐵人賽 Vue.js DAY 22

技術 DAY 22 - Nuxt 自動引入 (Auto Imports)

DAY 22 - Nuxt 自動引入 (Auto Imports) Nuxt3 有個很重要的特性,那就是 自動引入 (Auto Imports),大幅增加你...

鐵人賽 SideProject30 DAY 22

技術 加入附件顯示功能

Hi,大家好,又到了連續假期了,總算可以脫離幾天上班的生活了XD,昨天我們完成了附件上傳的機制,使用 dataURL 的機制,傳完之後,當然就是要可以在畫面上看...

鐵人賽 Vue.js DAY 22
業主說給你30天學會Vue 系列 第 22

技術 V22_直覺式理解_Vue_Directives(2)_v-on

V22_直覺式理解_Vue_Directives(2)_v-on 今天來再探究 v-on參考一下W3School_Vue在v-on的說明Vue v-on Dir...

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

技術 [影片教學] Nuxt 3 使用 I18n 建立多國語系

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 配置 Nuxt I18n 安裝 Nuxt I18n 套件 n...

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

技術 [Day 21] Nuxt 3 管理網站結構化資料標記 (Structured Data Markup) - SEO 搜尋引擎最佳化系列工具簡介

前言 在搜尋引擎最佳化 SEO 中,其中有一個最佳化項目是結構化資料標記 (Structured Data Markup),當你的網站設定好結構化的資料,將有助...

鐵人賽 Vue.js DAY 21

技術 DAY 21 - 安裝 Nuxt Modules 模組 、插件 (Plugins)

DAY 21 - 安裝 Nuxt Modules 模組 、插件 (Plugins) Modules 模組 首先來看官方 Nuxt 模組,在這邊可以看到支援、...

鐵人賽 Vue.js DAY 21
業主說給你30天學會Vue 系列 第 21

技術 V21_直覺式理解_Vue_Directives(1)_v-bind

V21_直覺式理解_Vue_Directives(1)_v-bind 在Vue的架構下,透過 Vue Directives來作為與Vue變數綁定的介面,從W3S...

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

技術 [Day 20] Nuxt 3 管理網站的 robots.txt 與 Robots Tags - SEO 搜尋引擎最佳化系列

前言 搜尋引擎之所以能搜尋到世界各底的網頁,全歸功於網路爬蟲 (Web crawler),也有人稱之為網路蜘蛛 (Spider),爬蟲是一種機器人即是搜尋引擎檢...

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

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

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

鐵人賽 Vue.js DAY 20

技術 DAY 20 - Nuxt Devtools 超好用的開發者工具

DAY 20 - Nuxt Devtools 超好用的開發者工具 現在無倫是哪個框架都有專屬於自己的 Devtools ,像是 Recat 有 React...