iT邦幫忙

vue.js相關文章
共有 1413 則文章
鐵人賽 Vue.js DAY 19
Vue3歡樂套件箱耶 系列 第 19

技術 開箱19:所以Import是?陪我一起觀念釐清~

在轉寫框架時,用了很多import,可是卻不知道有區分靜態跟動態導入(dynamic import)?那動態載入跟框架裡面的用法有什麼關係?於是我將很多困惑交給...

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

技術 [影片教學] Nuxt 3 串接 Google OAuth 登入

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

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

技術 [Day 19] Nuxt 3 自動產生 Sitemap 網站地圖 - SEO 搜尋引擎最佳化系列

前言 Sitemap 網站地圖基本上都是由網頁開發人員進行製作,網站地圖內容包含了整個網站的連結,例如你的網站有首頁、文章列表、文章詳細頁面等,這些連結如果你想...

鐵人賽 Vue.js DAY 19

技術 DAY 19 - Nuxt 專案目錄結構

DAY 19 - Nuxt 專案目錄結構 今天來一起分解 Nuxt 專案架構,我們在前面有提到 Nuxt 優點之一易懂的目錄架構 即使沒有這篇單看目錄架構...

鐵人賽 SideProject30 DAY 19

技術 客服問題表單輸入功能

Hi,大家好,昨天我們完成了登入&變更密碼機制,按照預定的作業流程,我們今天來處理的是表單輸入的機制,在這裡我們會使用vue.js送出資料到後端,後端資...

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

技術 開箱18:圖片/元件懶加載~vue3 + IntersectionObserver API範例應用

本篇要來介紹當使用者滑到該圖或該組件時,才載入圖或組件的應用 還記得我們在16篇以及17篇分別提到 圖片懶加載 IntersectionObserver...

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

技術 [影片教學] Nuxt 3 Runtime Config & App Config

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 使用 Runtime Config 開啟專案下 nuxt.c...

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

技術 V19_從Vue的範例做中學(3)_CRUD

V19_從Vue的範例做中學(3)_CRUD 今天來練習一下,在網頁資料中常見的 CRUDCRUD 是 Create(新增), Read(讀取), Update...

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

技術 [Day 18] Nuxt 3 自動產生連結縮圖 OG Image - SEO 搜尋引擎最佳化系列

前言 在做網頁的 SEO 搜尋引擎最佳化時,你可以在 og:image 或 twitter:image 設定圖片的網址,來讓搜尋引擎爬蟲收錄網頁縮圖或在分享連結...

鐵人賽 Vue.js DAY 18

技術 DAY 18 - Vue + Vite + Nuxt 建立專案,享受最優質的 DX

DAY 18 - Vue + Vite + Nuxt 建立專案,享受最優質的 DX Vue3 + Vite + Nuxt 這次我主要是選擇使用Vue3 +...

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

技術 開箱17:是不是跟我一樣困惑異步加載???defineAsyncComponent範例應用

上篇簡單介紹了圖片懶加載,那其實頁面(組件)也可以懶加載,因此本篇要介紹改進初始頁面加載的好方法 也就是將我們的應用程式以較小的區塊加載,而不必在頁面加載時...

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

技術 V18_Vue的Composition_API的功能清單

V18_Vue的Composition_API的功能清單 接下來的幾篇發文,想要從Vue的官網的API清單,來整個看一遍Vue的功能,會以Composition...

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

技術 [Day 17] Nuxt 3 頁面載入效果 - 使用 NuxtLoadingIndicator 元件與實作自訂 Loading 元件

前言 當路由頁面跳轉時,可能會因為下一個頁面阻塞而導致畫面卡住,使用者無法得知頁面的載入狀況,Nuxt 3 提供一個 <NuxtLoadingIndica...

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

技術 [影片教學] Nuxt 3 使用 Pinia 進行狀態管理

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 安裝 Pinia 與 Nuxt Pinia 模組 在專案中安...

鐵人賽 Vue.js DAY 17

技術 DAY 17 - 全新的開發者體驗,探索 Nuxt 3 世界

今日前言 Nuxt3 了,接下來後半篇鐵人賽都會以 Nuxt3 為主,一開始預計 Vue.js 的概念篇本來預計寫 10 天,不知不覺越寫越多 orz ...發...

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

技術 V17_Vue的不同語法的對照Composition_API及Options_API

V17_Vue的不同語法的對照Composition_API及Options_API 從官網的介紹會發現有2種API,Composition API及 Opti...

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

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

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

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

技術 [Day 16] Nuxt 3 最佳管理 Meta Tag 的方式 - 使用 useSeoMeta 與 useServerSeoMeta

前言 在 Nuxt 3 我們可以使用 useHead 來設定 Meta Tag,你可以完全的掌握與控制 Meta 標籤的撰寫,不過為了應付各個平台或眾多的自訂標...

鐵人賽 SideProject30 DAY 16

技術 Day16—Vue(十)生命週期

前言 今天將來初步了解生命週期的部分,並簡單介紹生命週期鉤子的名詞。 簡介 Vue 3 的生命周期是組件從創建到銷毀的整個過程,包含了一系列的生命週期鉤子:在...

鐵人賽 Vue.js DAY 16

技術 DAY 16 - Vue.js 相關工具、套件大集合

DAY 16 - Vue.js 相關工具、套件大集合 回顧 DAY1 ~ DAY15 學習與進步 不知不覺來到了第 16 天,前半個月主要以自己面試常遇到...

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

技術 V16_從Vue的範例做中學(2)_Fetching_Data

V16_從Vue的範例做中學(2)_Fetching_Data 接下來學習 Fetching_Data 的範例 網址如下https://vuejs.org/ex...

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

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

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

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

技術 [Day 15] Nuxt 3 使用 useHead 動態設定 HTML Head 與 Meta Tag

前言 如果要在 Vue 中更改頁面的標題或 HTML Meta Tag,你可能使用或聽過 vue-meta,它能幫助你方便的更改 HTML Head、Meta...

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

技術 開箱15:輕鬆套用訊息通知UI~Vue 3 Toastify範例應用

Vue 3 Toastify是一個給Vue.js應用程式提供訊息通知功能的函式庫。它可以幫助您建立和顯示輕量級的訊息提示。 介紹 官網https://vue...

鐵人賽 SideProject30 DAY 15

技術 Day15—Vue(九)事件處理

前言 今天我們要來介紹如合用v-on這個指令進行監聽事件的處理。在 Vue 中,我們可以通過v-on指令(簡寫為@)來監聽DOM元素的事件,當指定事件被觸發時...

鐵人賽 Vue.js DAY 15

技術 DAY 15 - 輕鬆入門 Pinia 狀態管理工具

DAY 15 - 輕鬆入門 Pinia 狀態管理工具 Pinia 狀態管理工具 接著我們來嘗試運用 Pinia 狀態管理工具,Pinia 官方文件也有提供...

鐵人賽 SideProject30 DAY 15

技術 完成詳細資料顯示

Hi,大家好,今天是中秋佳節,祝大家烤肉吃到飽啦,今天我們要完成詳細資料顯示頁面,主要是資料的顯示機制,依照資料不同顯示不同之css,控制元素的顯示、隱藏、加上...

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

技術 開箱14:前端圖片壓縮~Compressor.js範例應用

要使用圖片壓縮工具來處理網頁時,一種是打包後處理圖片,像是Webpack 插件image-webpack-loader ,另一種則是幫助您在瀏覽器中進行圖片壓縮...

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

技術 V15_從Vue的範例做中學(1)_Markdown_Editor

V15_從Vue的範例做中學(1)_Markdown_Editor 前面幾篇的發文已經大致的了解Vue的主要的特性及用法了,接下來要轉到Vue的官網上的Exam...

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

技術 [影片教學] Nuxt 3 渲染模式 (Rendering Modes)

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 客戶端渲染 Client-Side Rendering (C...