iT邦幫忙

vue.js相關文章
共有 1414 則文章
鐵人賽 SideProject30 DAY 9

技術 Day9—Vue(三)創建Vue專案(Vite)

前言 昨天大致介紹了Vue的核心概念,今天就來談建置環境的部分。 創建環境 在 Vue 官方文件中,官方建議開發人員將 Vite 作為 Vue.js 應用程...

鐵人賽 Vue.js DAY 9

技術 DAY 9 - v-bind 綁定樣式與 v-on 監聽事件

DAY 9 - v-bind 綁定樣式與 v-on 監聽事件 v-bind 綁定你的 attributes(屬性) v-bind 簡寫、縮寫 常見運...

鐵人賽 Vue.js DAY 9

技術 V09_在vue之前_必備的CSS基礎(2)_排版控制

V09_在vue之前_必備的CSS基礎(2)_排版控制 今天來探索一下有關CSS的排版控制的觀念及用法還有 box (normal, grid, flex)的排...

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

技術 [影片教學] Nuxt 3 元件 (Components)

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

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

技術 [Day 08] Nuxt 3 如何得知路由名稱與自定義頁面路由

前言 Nuxt 3 內建基於檔案的路由可以快速實現頁面的路由配置,我們只需要在 pages 目錄下建立頁面,Nuxt 將會自動載入 Vue Router 來實現...

鐵人賽 SideProject30 DAY 8

技術 Day8—Vue(二)Composition API與Options API

前言 接著繼續看官方文件,我們可以看到官方提到Vue的組件可以按照兩種不同風格書寫,分別是選項式API以及組合式API。 從Vue 3.0開始,引入了Comp...

鐵人賽 Vue.js DAY 8

技術 DAY 8 - v-model 雙向綁定與修飾符運用

DAY 8 - v-model 雙向綁定與修飾符運用 接下來DAY 8 ~ DAY 11 會來到 Vue 的指令篇,這邊就是比較基礎的常用的指令,會一一來慢...

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

技術 [影片教學] Nuxt 3 布局模板 (Layouts)

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

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

技術 [Day 07] Nuxt 3 使用 Dotenv 與 .env 檔案自動載入環境變數與配置 Runtime Config

前言 我們在使用 Node 開發時,可能會碰到需要使用環境變數來設定不同情境所執行的邏輯,也可能是要避免在設定檔中或專案推送至遠端版控倉庫時暴露敏感資訊。 你可...

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

技術 開箱7:偵測元素寬度~useResizeObserver範例應用

本篇開箱是VueUse中的useResizeObserver方法,簡單就能取元素的寬高 昨篇介紹的是針對整個螢幕的寬高去做偵測,但是如果今天的需求是當某一個...

鐵人賽 SideProject30 DAY 7

技術 Day7—Vue(一)初探Vue框架

前言 在前幾篇文章中,我們深入研究了Firebase的基本操作,學習了如何在Cloud Firestore中新增、讀取和刪除資料。今天將轉向一個全新的主題——...

鐵人賽 Vue.js DAY 7

技術 DAY 7 -深入了解 Dom 元素,了解 Virtual DOM 原理

DAY 7 - 深入了解 Dom 元素,了解 Virtual DOM 原理 Dom 元素是什麼 ? DOM : Document Object Mode 文...

鐵人賽 Modern Web DAY 16

技術 【Day 16】不要再重新計算啦!把計算複雜的值緩存起來 - computed & useMemo

需要一個經歷複雜計算所產出的值時,大家通常都會怎麼做呢?是用函式把這個計算過程包裝起來,並回傳出這個計算後的值?還是透過其他的方式達成呢?其實在Vue和Reac...

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

技術 開箱6:偵測螢幕寬度~useWindowSize範例應用

本篇開箱的是VueUse中的useWindowSize方法,簡單就能取得目前螢幕的寬高 介紹 VueUse 是一個基於Vue.js 的開源函式庫,主要是以...

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

技術 [影片教學] Nuxt 3 頁面 (Pages) 與路由 (Routing)

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

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

技術 [Day 06] Nuxt 3 專案分析開發工具 - Nuxt DevTools 視覺化工具系列

前言 Nuxt DevTools 是一個強大的視覺化除錯工具,,整合開發了許多工具與功能在除錯分析上它可以幫助你更快速的了解 Nuxt 專案,提升開發者體驗,本...

鐵人賽 Vue.js DAY 6

技術 DAY 6 - 從 Option API 進化到 Compisiton API !!

DAY 6 - Option API 進化 Compisiton API 學習目標 : 從 Option API 進化 Compisiton API ,從了...

鐵人賽 Vue.js DAY 7

技術 V07_在vue之前_必備的JS基礎(4)_同步與非同步的操作

V07_在vue之前_必備的JS基礎(4)_同步與非同步的操作 Promise 是一個因應非同步操作的需求所產生的語法可以參考MDN有關Promise的說明ht...

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

技術 [影片教學] Nuxt 3 目錄結構與自動載入 (Auto Imports)

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 專案目錄結構 .nuxt 目錄 開發環境下由 Nuxt 產生...

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

技術 [Day 05] Nuxt 3 專案內部伺服器與進階開發工具 - Nuxt DevTools 視覺化工具系列

前言 Nuxt DevTools 是一個強大的視覺化除錯工具,Nuxt DevTools 整合開發了許多工具與功能在除錯分析上它可以幫助你更快速的了解 Nuxt...

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

技術 開箱5:輕量視窗follow me~VueFinalModal範例應用

本篇開箱的是Vue Final Modal 4,簡單應用就能有modal視窗 ▲ 示意圖 介紹 Vue Final Modal 是一個輕量、無渲染、對行動裝...

鐵人賽 Modern Web DAY 19

技術 在 NX 中建立 Vue 元件庫

來嘗試在 NX 中建立 Vue 元件庫 lib。 跟 Nuxt 一樣,目前官方沒有支援 Vue 的擴充,所以要手動設定。 首先建立一個基於 Vite 的 js...

鐵人賽 Vue.js DAY 6

技術 V06_在Vue之前_必備的JS基礎(3)_DOM元件及樣版文字的操作

V06_在Vue之前_必備的JS基礎(3)_DOM元件及樣版文字的操作 今天來了解一下將陣列及物件的操作應用在網頁DOM的操作上,並結合jQuery的語法 DO...

鐵人賽 Vue.js DAY 5

技術 DAY 5 - Vue 2 > Vue 3 破壞性改動,了解不同版本

DAY 5 - Vue 2 > Vue 3 破壞性改動,了解不同版本 為什麼要了解不同版本呢 ? 1. 版本間差異寫法大,只學一種不理解其中差...

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

技術 開箱4:超強輪播插件~Vue-Swiper範例應用

本篇開箱的是Swiper一個流行的、功能強大的插件庫,用於創建滑動式的輪播、幻燈片和相冊...等。 ▲ 示意圖 介紹 Swiper是一個電腦和手機端全螢幕滑...

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

技術 [影片教學] Nuxt 3 安裝與使用 Tailwind CSS

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

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

技術 [Day 04] Nuxt 3 專案應用程式開發工具 - Nuxt DevTools 視覺化工具系列

前言 Nuxt DevTools 是一個強大的視覺化除錯工具,,整合開發了許多工具與功能在除錯分析上它可以幫助你更快速的了解 Nuxt 專案,進而解放開發者體驗...

鐵人賽 Vue.js DAY 4

技術 DAY 4 - 建立到銷毀:深入了解 Vue 生命週期

DAY 4 - 建立到銷毀:深入了解 Vue 生命週期 今日前言 今天來談談Vue.js的生命周期,了解元件建立到摧毀過程,深入了解元件運作原理及我們可以如...

鐵人賽 Vue.js DAY 5

技術 V05_在Vue之前_必備的JS基礎(2)_陣列Array的操作

V05_在Vue之前_必備的JS基礎(2)_陣列Array的操作 今天來了解一下JS的陣列的概念陣列Array, 物件Object在JS中,需要學會非常熟練的操...

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

技術 開箱3:讓我來好好看看你~vue-easy-lightbox範例應用

本篇開箱的是vue-easy-lightbox,簡單應用就能有圖片預覽功能 ▲ 示意圖 介紹 基於Vue.js 3.0與TypeScript構建的圖片瀏覽(...