前言 今天封裝股票k線圖組件前幾天學(xué)的幾個知識點(diǎn)都有用到，都是在封裝k線圖的時(shí)候遇到的問題，又啃了一遍基礎(chǔ)。 一、改進(jìn)之前的封裝echarts組件 使用ref對象方式封裝us...
發(fā)簡信
IP屬地：浙江
-
Vue3實(shí)戰(zhàn)筆記（50）—Vue 3+ECharts還能看股票？附源碼 -
Vue3實(shí)戰(zhàn)筆記（49）—Vue 3響應(yīng)式魔法：ref vs reactive深入對決
前言 Vue 3 中的 ref 和 reactive 都是用于創(chuàng)建響應(yīng)式數(shù)據(jù)的工具，但它們之間存在一些重要的區(qū)別。今天聊聊它們之間的主要差異： 一、 ref 和 reacti...
-
Vue3實(shí)戰(zhàn)筆記（48）— reactive大揭秘：Vue 3中復(fù)雜數(shù)據(jù)結(jié)構(gòu)的響應(yīng)式處理
前言 前些天了解了ref，開發(fā)時(shí)候大部分時(shí)候都是直接用ref，其實(shí)還有reactive這玩意，有時(shí)候用起來更方便，不需要.value,本文介紹一下。在 Vue 3 中，rea...
-
Vue3實(shí)戰(zhàn)筆記（47）— 一探emit奧秘——組件間通信的藝術(shù)與實(shí)踐
前言 Vue封裝了自定義組件之后，如果子組件想要向父組件傳遞數(shù)據(jù)該怎么辦？ Vue.js 中的 emit 方法就是主要用于組件間的通信，特別是父組件與子組件之間的通信機(jī)制。它...
-
Vue3實(shí)戰(zhàn)筆記（46）—Vue 3高效開發(fā)定制化Dashboard的權(quán)威手冊前言 后臺管理系統(tǒng)中的Dashboard是一種圖形化的信息顯示工具，通常用于提供一個特定領(lǐng)域或系統(tǒng)的概況。它可以幫助用戶監(jiān)控和分析數(shù)據(jù)，快速獲取重要信息。可以幫助用戶監(jiān)控業(yè)務(wù)...
-
Vue3實(shí)戰(zhàn)筆記（45）—VUE3封裝一些echarts常用的組件，附源碼前言 日前使用hooks的方式封裝組件，在我使用復(fù)雜的圖標(biāo)時(shí)候遇到了些問題，預(yù)想在onMounted中初始化echarts，在使用hooks的時(shí)候，組件沒有渲染完，使用實(shí)例會...
-
Vue3實(shí)戰(zhàn)筆記（44）—vue3組件的ref屬性
前言 之前學(xué)習(xí)過ref聲明響應(yīng)式對象，前幾天讀代碼遇到了發(fā)懵的地方，詳細(xì)學(xué)習(xí)了一下才發(fā)現(xiàn)，用法還有很多，遂總結(jié)一下ref的用法備忘。 一、組件的ref用法總結(jié) Vue3 中的...
-
Vue3實(shí)戰(zhàn)筆記（43）—Vue3組合式API下封裝可復(fù)用ECharts圖表組件前言 接上文，已經(jīng)安裝好了ECharts，開始封裝組件方便使用。 一、封裝echart圖標(biāo)鉤子 首先應(yīng)用我們之前學(xué)習(xí)的鉤子方式，在hooks目錄下創(chuàng)建一個名為 useECha...
-
Vue3實(shí)戰(zhàn)筆記（42）—Vue + ECharts：流量數(shù)據(jù)可視化的強(qiáng)大組合前言 在前端開發(fā)中，數(shù)據(jù)可視化已經(jīng)成為了一個不可或缺的部分。Vue.js作為一個輕量級且易于上手的漸進(jìn)式JavaScript框架，與ECharts這個強(qiáng)大的數(shù)據(jù)可視化庫的結(jié)合...
-
Vue3實(shí)戰(zhàn)筆記（41）—自己封裝一個計(jì)時(shí)器Hooks
前言 在Vue項(xiàng)目中，封裝一個計(jì)時(shí)器掛鉤（Hook）是一種實(shí)用的技術(shù)，它允許你在組件中方便地管理定時(shí)任務(wù)，如倒計(jì)時(shí)、計(jì)時(shí)器等，而無需在每個使用場景重復(fù)編寫相同的邏輯代碼。 計(jì)...
-
Vue3實(shí)戰(zhàn)筆記（40）—組件邏輯復(fù)用：自定義Hooks的完全指南）
前言 自定義Hooks是Vue3中的一個重要特性，它允許您創(chuàng)建可重用的函數(shù)，以便在組件之間共享狀態(tài)和邏輯。以下是一些關(guān)于自定義Hooks的常見用法。 一、狀態(tài)管理 使用rea...
-
Vue3實(shí)戰(zhàn)筆記（39）—封裝頁腳組件，附源碼前言 在Web開發(fā)中，頁腳組件是一個重要的部分，它為用戶提供關(guān)于網(wǎng)站的信息、導(dǎo)航鏈接以及版權(quán)聲明等。而封裝頁腳組件則是一種高效的方法，可以提高代碼的可重用性和可維護(hù)性。 一、...
-
Vue3實(shí)戰(zhàn)筆記（38）—粒子特效終章前言 官方還有很多漂亮的特效，但是vue3只有一個demo，例如我前面實(shí)現(xiàn)的兩個頁面就耗費(fèi)了一些時(shí)間，今天記錄一下tsparticles官方內(nèi)置的幾個特效的使用方法，一般這幾...
-
Vue3實(shí)戰(zhàn)筆記（37）—粒子特效登錄頁面前言 上頭了，再來一個粒子特效登錄頁面。 一、粒子特效登錄頁 登錄頁： 如果不成功仔細(xì)看第一篇文章，一步一步做，很簡單的。實(shí)際效果要比圖片好看多了，gif錄糊了糊了。。。 總...
-
Vue3實(shí)戰(zhàn)筆記（36）—粒子特效完成炫酷的404前言 昨天介紹了一個粒子特效小例子，不夠直觀，下面直接實(shí)戰(zhàn)在自己的項(xiàng)目中實(shí)現(xiàn)一個好玩滴。 404特效 更改之前創(chuàng)建好的404.vue: 完事兒了！就這么簡單?？纯葱Ч?動圖...
-
Vue3實(shí)戰(zhàn)筆記（35）—集成炫酷的粒子特效前言 學(xué)習(xí)一個有趣炫酷的玩意開心一下圖片。 tsparticles，可以方便的實(shí)現(xiàn)各種粒子特效。支持的語言框架也是相當(dāng)?shù)呢S富. 官網(wǎng)：https://particles.js...
-
Vue3實(shí)戰(zhàn)筆記（34）—完美的菜單組件封裝前言 之前簡單的封裝了一下菜單組件，數(shù)據(jù)都是寫死的，多層嵌套沒有支持，學(xué)完了組件傳值，計(jì)算屬性就可以繼續(xù)完善了。 多層菜單封裝 先看下數(shù)據(jù)結(jié)構(gòu)： 數(shù)據(jù)有多層，所以使用嵌套，定...
-
Vue3實(shí)戰(zhàn)筆記（33）—組件傳值props終章前言 在 Vue 3 中，組件的聲明方式主要有兩種：運(yùn)行時(shí)聲明和基于類型的聲明。這兩種方式在 Vue 3 的 Composition API 中體現(xiàn)得尤為明顯。 一、運(yùn)行時(shí)聲...
-
Vue3實(shí)戰(zhàn)筆記（32）—組件傳值props第三天還很細(xì)
前言 Vue 組件可以更細(xì)致地聲明對傳入的 props 的校驗(yàn)要求。比如我們上面已經(jīng)看到過的類型聲明，如果傳入的值不滿足類型要求，Vue 會在瀏覽器控制臺中拋出警告來提醒使用...
-
Vue3實(shí)戰(zhàn)筆記（31）—組件傳值props第二天特別細(xì)
前言 今天聊聊Prop傳值的一些細(xì)節(jié). 一、Prop 名字格式 如果一個 prop 的名字很長，應(yīng)使用 camelCase 形式，因?yàn)樗鼈兪呛戏ǖ?JavaScript 標(biāo)識...