iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 0 留言 920 瀏覽

鐵人賽 Vue.js DAY 20

Nuxt 3 實戰筆記系列第 20 篇

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

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

Ryan ‧ 2023-10-05 ‧團隊啾嚕咕嚕跳起來

0 Like 0 留言 540 瀏覽

鐵人賽 Vue.js DAY 20

Vue3歡樂套件箱耶系列第 20 篇

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

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

切版姐姐 ‧ 2023-10-05

0 Like 0 留言 685 瀏覽

鐵人賽 Vue.js DAY 20

這是我的 Vue.js 筆記，不知道有沒有機會幫到你系列第 20 篇

技術我的 Vue.js 筆記(20) - 在輕前端中使用元件、元件的命名

前言雖說單一元件檔案的程式因為有 script setup 語法，能讓程式變得乾淨俐落。不過並不是每個人都會使用 vite (或以前的 vue cli) 來...

imall ‧ 2023-10-05

0 Like 0 留言 263 瀏覽

技術 8 .Vue-2

(一)Vue.js 的實體物件: 透過new Vue()或Vue.createApp()得到新物件，並指定變數名稱，透過此物件來掛載在網頁上的某個 DOM 節點...

伍貳捌 ‧ 2023-10-05

1 Like 1 留言 1386 瀏覽

鐵人賽影片教學 DAY 19

Nuxt 3 快速入門系列第 19 篇

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

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

Ryan ‧ 2023-10-04

0 Like 0 留言 325 瀏覽

技術 7.Vue-1

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

伍貳捌 ‧ 2023-10-05

0 Like 0 留言 1065 瀏覽

鐵人賽 Vue.js DAY 19

Nuxt 3 實戰筆記系列第 19 篇

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

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

Ryan ‧ 2023-10-04 ‧團隊啾嚕咕嚕跳起來

0 Like 0 留言 646 瀏覽

鐵人賽 Vue.js DAY 19

這是我的 Vue.js 筆記，不知道有沒有機會幫到你系列第 19 篇

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

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

imall ‧ 2023-10-04

1 Like 0 留言 908 瀏覽

鐵人賽 Vue.js DAY 18

Vue3歡樂套件箱耶系列第 18 篇

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

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

切版姐姐 ‧ 2023-10-03

0 Like 0 留言 631 瀏覽

鐵人賽影片教學 DAY 18

Nuxt 3 快速入門系列第 18 篇

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

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

Ryan ‧ 2023-10-03

0 Like 0 留言 1431 瀏覽

鐵人賽 Vue.js DAY 18

Nuxt 3 實戰筆記系列第 18 篇

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

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

Ryan ‧ 2023-10-03 ‧團隊啾嚕咕嚕跳起來

0 Like 0 留言 725 瀏覽

鐵人賽 Vue.js DAY 18

這是我的 Vue.js 筆記，不知道有沒有機會幫到你系列第 18 篇

技術我的 Vue.js 筆記(18) - 指令：v-for

前言看到 for 這個字樣，應該已經知道他在做啥了！沒錯，跑迴圈。在網頁畫面中常常會有清單資料，像是購物網的商品清單，或是 google 搜尋完的每一筆資...

imall ‧ 2023-10-03

1 Like 0 留言 1335 瀏覽

鐵人賽影片教學 DAY 17

Nuxt 3 快速入門系列第 17 篇

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

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

Ryan ‧ 2023-10-02

1 Like 0 留言 1306 瀏覽

鐵人賽 Vue.js DAY 17

Vue3歡樂套件箱耶系列第 17 篇

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

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

切版姐姐 ‧ 2023-10-02

0 Like 1 留言 1832 瀏覽

鐵人賽 Vue.js DAY 17

Nuxt 3 實戰筆記系列第 17 篇

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

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

Ryan ‧ 2023-10-02 ‧團隊啾嚕咕嚕跳起來

0 Like 0 留言 597 瀏覽

鐵人賽 Vue.js DAY 17

這是我的 Vue.js 筆記，不知道有沒有機會幫到你系列第 17 篇

技術我的 Vue.js 筆記(17) - 指令：v-if 、v-else-if、v-else、 v-show

前言如果你知道程式的 if 、else if 、 else 的操作方式，那麼這篇文章的內容應該很容易理解 if (布林值) { // 一些邏輯操作 }...

imall ‧ 2023-10-02

2 Like 0 留言 1482 瀏覽

鐵人賽 Vue.js DAY 16

Nuxt 3 實戰筆記系列第 16 篇

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

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

Ryan ‧ 2023-10-01 ‧團隊啾嚕咕嚕跳起來

0 Like 0 留言 503 瀏覽

鐵人賽影片教學 DAY 16

Nuxt 3 快速入門系列第 16 篇

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

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

Ryan ‧ 2023-10-01

0 Like 0 留言 631 瀏覽

鐵人賽 Vue.js DAY 16

這是我的 Vue.js 筆記，不知道有沒有機會幫到你系列第 16 篇

技術我的 Vue.js 筆記(16) - 指令：v-model

前言我們已經知道使用雙大括號，可以把資料綁到模板上，並且在程式中操作資料時，綁定的資料也會跟著異動。不過有沒有一種可能，是要讓使用者操作畫面資料內容後，...

imall ‧ 2023-10-01

0 Like 0 留言 550 瀏覽

鐵人賽影片教學 DAY 15

Nuxt 3 快速入門系列第 15 篇

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

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

Ryan ‧ 2023-09-30

1 Like 0 留言 2538 瀏覽

鐵人賽 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...

Ryan ‧ 2023-09-30 ‧團隊啾嚕咕嚕跳起來

0 Like 0 留言 553 瀏覽

鐵人賽 Vue.js DAY 15

這是我的 Vue.js 筆記，不知道有沒有機會幫到你系列第 15 篇

技術我的 Vue.js 筆記(15) - 前言

前言今天來聊聊 Vue 中事件的寫法。基本語法如果你有看過怎麼在 HTML 寫事件，那你對於 Vue 提供的事件語法應該會很熟悉。 <div onc...

imall ‧ 2023-09-30

0 Like 0 留言 436 瀏覽

鐵人賽影片教學 DAY 14

Nuxt 3 快速入門系列第 14 篇

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

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

Ryan ‧ 2023-09-29

1 Like 1 留言 2614 瀏覽

鐵人賽 Vue.js DAY 14

Nuxt 3 實戰筆記系列第 14 篇

技術 [Day 14] Nuxt 3 最佳化圖片動態調整請求控制圖片大小 - Nuxt Image

前言 Nuxt Image 是 Nuxt 的一個模組，顧名思義讓你可以在 Nuxt 專案中使用圖片時，可以幫助你最佳化圖片，Nuxt Image 它所做的是，使...

Ryan ‧ 2023-09-29 ‧團隊啾嚕咕嚕跳起來

0 Like 0 留言 571 瀏覽

鐵人賽 Vue.js DAY 14

這是我的 Vue.js 筆記，不知道有沒有機會幫到你系列第 14 篇

技術我的 Vue.js 筆記(14) - 指令：v-bind

前言今天來講 v-bind ，一個用來在 HTML 屬性綁資料的指令。我們已經知道雙大括號的語法可以把「變數」綁在模板內，不過這個語法並不適用於 HTML...

imall ‧ 2023-09-29

1 Like 0 留言 619 瀏覽

鐵人賽影片教學 DAY 13

Nuxt 3 快速入門系列第 13 篇

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

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

Ryan ‧ 2023-09-28

0 Like 0 留言 2638 瀏覽

鐵人賽 Vue.js DAY 13

Nuxt 3 實戰筆記系列第 13 篇

技術 [Day 13] Nuxt 3 使用路由中間件（Middleware）實作身份驗證與實作技巧

前言 Nuxt 3 提供了一個路由中間件的框架，我們只要再專案目錄 middleware 下定義好路由中間件，就可以在路由切換之間來實現一些功能，包含了身份驗證...

Ryan ‧ 2023-09-28 ‧團隊啾嚕咕嚕跳起來

0 Like 3 留言 615 瀏覽

鐵人賽 Vue.js DAY 30

深入 Vue.js 世界 : 30 Days 核心概念與實作系列第 30 篇

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

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

阿蘇蘇 ‧ 2023-10-15 ‧團隊大船要開囉

0 Like 0 留言 2119 瀏覽

鐵人賽 Vue.js DAY 28

深入 Vue.js 世界 : 30 Days 核心概念與實作系列第 28 篇

技術 DAY 28 - Nuxt 使用 useFetch 串接 API

DAY 28 - Nuxt 使用 useFetch 串接 API 前言延續上篇 ...DAY 27 - Nuxt Server 模擬 RESTful AP...

阿蘇蘇 ‧ 2023-10-13 ‧團隊大船要開囉

1 Like 0 留言 1191 瀏覽

鐵人賽 Vue.js DAY 23

深入 Vue.js 世界 : 30 Days 核心概念與實作系列第 23 篇

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

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

阿蘇蘇 ‧ 2023-10-08 ‧團隊大船要開囉

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

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

技術 我的 Vue.js 筆記(20) - 在輕前端中使用元件、元件的命名

技術 8 .Vue-2

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

技術 7.Vue-1

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

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

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

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

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

技術 我的 Vue.js 筆記(18) - 指令：v-for

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

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

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

技術 我的 Vue.js 筆記(17) - 指令：v-if 、v-else-if、v-else、 v-show

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

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

技術 我的 Vue.js 筆記(16) - 指令：v-model

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

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

技術 我的 Vue.js 筆記(15) - 前言

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

技術 [Day 14] Nuxt 3 最佳化圖片 動態調整請求控制圖片大小 - Nuxt Image

技術 我的 Vue.js 筆記(14) - 指令：v-bind

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

技術 [Day 13] Nuxt 3 使用路由中間件（Middleware）實作身份驗證與實作技巧

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

技術 DAY 28 - Nuxt 使用 useFetch 串接 API

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

標記使用者

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

技術我的 Vue.js 筆記(20) - 在輕前端中使用元件、元件的命名

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

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

技術我的 Vue.js 筆記(18) - 指令：v-for

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

技術我的 Vue.js 筆記(17) - 指令：v-if 、v-else-if、v-else、 v-show

技術我的 Vue.js 筆記(16) - 指令：v-model

技術我的 Vue.js 筆記(15) - 前言

技術 [Day 14] Nuxt 3 最佳化圖片動態調整請求控制圖片大小 - Nuxt Image

技術我的 Vue.js 筆記(14) - 指令：v-bind