iT邦幫忙

vue相關文章
共有 816 則文章
鐵人賽 Modern Web DAY 23

技術 進階內核(I):Async Transaction 實作

前言 前面已經示範了如何將我們設計好的 signal 機制,容入兩個主流框架下(React、Vue),這篇開始我們來回顧我們設計好的 signal 核心機制,探...

鐵人賽 Modern Web DAY 12
為你自己寫 Vue Component 系列 第 12

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

Badge 元件是一種簡單但功能強大的資料展示元件,通常以小圓形的形式出現,依附於其他 UI 元件上。Badge 元件主要用於通知提醒,顯示未讀訊息、通知數量...

鐵人賽 自我挑戰組 DAY 18
每天來點 Vue.js 吧 系列 第 18

技術 Seeking the Balance in Framework Design

tags: Vuejs Seeking the Balance in Framework Design ✐ 在中秋連假倒數兩天的今天,作為放鬆,來分享之前看的...

鐵人賽 Modern Web DAY 25
LV的全端開發體驗 系列 第 25

技術 Day25 使用者的後台觀看權限 - Route & Middleware

正當我覺得核心問題都處理的差不多,終於可以來補完其它還沒動工的功能時,突然發現使用者如果手動變更路由中的id,那麼,使用者是可輕易的訪問其它使用者的後台的,不小...

鐵人賽 Vue.js DAY 11

技術 我的 Vue.js 筆記(11) - methods 方法

前言 今天聊聊 Vue 實體中的 methods, 中文叫做「方法」。 如同我們在說「物件的方法」一樣,Vue 世界如果說到「方法」,其實就是在講函式(func...

技術 幫助自己上班的零件數量查詢器(5) - Js、Vue基本架構

Vue.js(/vjuː/,簡稱Vue)是一個用於建立使用者介面的開源MVVM前端JavaScript框架,也是一個建立單頁應用的Web應用框架。--維基百科...

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

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

🔥【Vue.js → Nuxt 入門推薦!🌟 新書即將上市 🌟】📘《想要 SSR 嗎?就使用 Nuxt 吧!Nuxt 讓 Vue.js 更好處理 SEO 搜...

鐵人賽 Modern Web DAY 25
欸你是要進 Vue 了沒? 系列 第 25

技術 欸你是要進 Vue 了沒? - Day25:Vue 組件偵聽器之 watch && watchEffect 是在襪取什麼東東

不可能放這種迷因圖八 安安搭家,還記得我們在 computed 的章節 講到的嗎: 不應該在 computed 物件其中像上述談到的:變更值、狀態,非同...

鐵人賽 Modern Web DAY 7

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

彈出視窗(Popover,浮動視窗)通常隨著使用者的互動而顯示,它浮動於互動元素的周圍,主要用來提供附加資訊或操作,而不會改變頁面佈局。 <Atomic...

鐵人賽 Vue.js DAY 8

技術 我的 Vue.js 筆記(8) - Vue 元件實體生命週期

前言 你可能會疑惑,我們還沒接觸元件,為什麼現在在講元件的生命週期 事實上,一個 Vue 實體,就是一個元件,所以我們只要開始使用 Vue 之後,就必須跟元件的...

鐵人賽 Modern Web DAY 22
LV的全端開發體驗 系列 第 22

技術 Day22 查看測驗紀錄-組件的組件的組件,聊聊重覆利用的設計

昨天提到我們可以在後台看到測驗紀錄被儲存,今天除了要讓紀錄可以被重新讀取並顯示外,也要來聊聊前端組件設計的經驗, 首先我們在測驗列表上加入連結,點擊後會顯示整個...

鐵人賽 Modern Web DAY 30
欸你是要進 Vue 了沒? 系列 第 30

技術 欸你是要進 Vue 了沒? - Day30:比賽過一半就想開始寫的完賽心得?

蛤肉,搭家好,我乘風破浪的來了。 在寫這篇前,想說把自己 Day1~Day29 看過一遍,就可以準備好心情和能量,面對完賽了喔這個不真實的事實,屏氣凝神的來下筆...

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

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

🔥【Vue.js → Nuxt 入門推薦!🌟 新書即將上市 🌟】📘《想要 SSR 嗎?就使用 Nuxt 吧!Nuxt 讓 Vue.js 更好處理 SEO 搜...

鐵人賽 Vue.js DAY 21

技術 我的 Vue.js 筆記(21) - 元件之間的溝通:props

前言 這篇文章來記錄一下,當父層元件傳遞資料給子層元件的語法:props props 我們已經知道在模版中要使用元件,會是這樣的語法: <div id=&...

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

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

🔥【Vue.js → Nuxt 入門推薦!🌟 新書即將上市 🌟】📘《想要 SSR 嗎?就使用 Nuxt 吧!Nuxt 讓 Vue.js 更好處理 SEO 搜...

鐵人賽 Modern Web DAY 19

技術 在 NX 中建立 Vue 元件庫

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

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

技術 [影片教學] Nuxt 3 模組 (Modules)

🔥【Vue.js → Nuxt 入門推薦!🌟 新書即將上市 🌟】📘《想要 SSR 嗎?就使用 Nuxt 吧!Nuxt 讓 Vue.js 更好處理 SEO 搜...

鐵人賽 Modern Web DAY 20
LV的全端開發體驗 系列 第 20

技術 Day20 解決一下後台路由導向問題-Middleware及Guard

先前我們留下了一個問題,[Day06 不同角色登入導向],就是使用者登入後,可以透過改變網址的方式去讀取管理者的頁面,我們當時只有在後台首頁做了各自導向的設定,...

鐵人賽 Vue.js DAY 9

技術 我的 Vue.js 筆記(9) - Vue 的模板

模板語法 先說一個觀念:模板,其實不完全等於 HTML,只是剛好 Vue 使用的模板語法,完全支援 HTML。所以我們使用 Vue 的時候如果提到的「模板」,可...

鐵人賽 Modern Web DAY 24

技術 進階內核(II):原子交易

什麼是原子交易? 在開始前,先把 「原子交易(Atomic Transaction)」 說清楚: 「它是一個把多筆狀態更新包起來的保護殼,保證這段操作要嘛全部...

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

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

🔥【Vue.js → Nuxt 入門推薦!🌟 新書即將上市 🌟】📘《想要 SSR 嗎?就使用 Nuxt 吧!Nuxt 讓 Vue.js 更好處理 SEO 搜...

鐵人賽 Vue.js DAY 1

技術 在 Vue 過氣前要學的第一件事 - 先了解自己

前言 今天是 9 月 1 號, 在這個特別的日子裡~為什麼特別呢, 因為今天是 友克鑫集合是我鐵人賽開賽的第一天啦! 話不多說直接開始身為一名前端工程師,對框架...

技術 [NPM] klinechart多語系

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

技術 vue的 Teleport

在 Vue 中,Teleport是一個特殊的內建元件,從Vue 3開始引入。元件的邏輯關聯性。 這對於一些需要特定 DOM 結構的功能(如模態框、通知、工具提示...

鐵人賽 Modern Web DAY 27
為你自己寫 Vue Component 系列 第 27

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

Radio 是一種表單控制元件,通常用於使用者在一組選項中選取一個。在 UI 呈現上,通常顯示為圓形按鈕,當用戶選中時,按鈕會顯示填滿狀態,表示該選項已被選中...

鐵人賽 Modern Web DAY 21
欸你是要進 Vue 了沒? 系列 第 21

技術 欸你是要進 Vue 了沒? - Day21:Vue 列表渲染之 v-for 和它の關鍵小夥伴 key && 虛擬 DOM

哈囉搭家,在昨天我們講到了列表渲染的用法 v-for,今天會來認識 key 這個屬性、Vue 的渲染模式「虛擬 DOM」以及 v-for 搭配 method 的...

鐵人賽 Modern Web DAY 26
欸你是要進 Vue 了沒? 系列 第 26

技術 欸你是要進 Vue 了沒? - Day26:Vue 模板引用之使用 ref 直接操作 DOM 的小小法術

Hi 大家好,今天我們要來看的是「模板引用」的章節。還記得之前我們提到的 ref 嗎? ref 除了可以用來綁定響應式的狀態,它還能被使用在 <templ...

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

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

🔥【Vue.js → Nuxt 入門推薦!🌟 新書即將上市 🌟】📘《想要 SSR 嗎?就使用 Nuxt 吧!Nuxt 讓 Vue.js 更好處理 SEO 搜...

鐵人賽 Modern Web DAY 2

技術 D02 - No Site No Start

所以我說那個畫面呢? 畢竟是網頁,還是應該先來個網頁才能夠有畫面嘛。( ´ ▽ ` )ノ 鱈魚:「讓我們從頭開始建立網頁吧!ˋ( ° ▽、° ) 」 路人:(轉...

鐵人賽 Modern Web DAY 28
為你自己寫 Vue Component 系列 第 28

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

Rating 元件讓使用者可以對某項目進行評分,通常以星星或其他符號來表示評分等級。Rating 元件的核心功能是提供一種直觀的方式,讓使用者針對產品、服務或...