vue3简单使用第23页

Vue3 里 CSS 深度作用选择器 :deep()

解释在Vue组件里，CSS默认是scoped（作用域限定的），只对当前组件生效。如果你想在scoped样式里，穿透到子组件的内部元素，就要用:deep()。✏️示例比如，你有一个子组件Child.vue，里面有：子组件里的元素然后你在父组件的里想去修改Child.vue里的.test样式，正常是选不到的，这时候就用:deep()：:deep(.test){color:red;font-size:2

珠峰下的沙砾·2025-04-27 16:10

Vue3 里 CSS 深度作用选择器 :global

在Vue3的中，:global()是用来声明全局样式的！意思是：即使你的是scoped的，:global(.test)里面的样式也是全局生效的！

珠峰下的沙砾·2025-04-27 16:10

在 Vue3 中封装的 Axios 实例中，若需要为部分接口提供手动取消请求的功能

核心思路封装接口时返回Promise和abort方法：为需要支持取消的接口返回一个对象，包含promise和abort方法，用户可通过abort主动中断请求。使用AbortController或CancelToken：推荐AbortController（浏览器原生API，兼容性更好）。若使用axios的CancelToken，需额外处理。实现步骤1.封装Axios实例//src/api/index

梦境之冢·2025-04-27 07:13

[Vue3]绑定props 默认值

前言使用TS、Vue3组织组件中传入props的通用方式步骤步骤1：使用defineProps定义Props使用interface定义props中各项的类型：//组件List.vue//定义Props类型和接口

水果摊见·2025-04-27 07:39

Vue项目实战

一、项目介绍优选商城pc端旅途移动端web项目（H5）后台管理系统ts+vue3常见前端项目的UI库后台管理系统：elementUI、Ant-Design小程序：vant移动端web：vant门户网站：

DustinWangq·2025-04-27 07:39

vue3并发请求Promise.all和Promise.allSettled

在Vue3中，使用Promise.all处理并发请求可以高效地并行获取数据。以下是实现步骤和示例：步骤说明生命周期钩子：在onMounted中触发请求，确保组件挂载后执行。

BillKu·2025-04-27 05:30

vue3使用 Record 替换 switch

switch//获取类型值constgetTypeValue=(key:number)=>{switch(key){case0:return"不评价";case1:return"卫生评价";case2:return"检验结论";case3:return"卫生评价+检验结论";default:return"";}};Record//获取类型值constgetTypeValue=(key:number

BillKu·2025-04-27 05:30

Vue3中AbortController取消请求的用法详解

在Vue3中，AbortController用于取消fetch请求，避免组件卸载后仍执行异步操作导致的潜在问题（如内存泄漏或更新已销毁组件的状态）。

BillKu·2025-04-27 05:29

vue3 给全局(每个实例) 添加公共方法

众所周知，vue3，现在不会暴露Vue对象给你用了！那么该如何给它的每个子组件实例添加公共的方法呢？

Z_ One Dream·2025-04-27 03:14

vue3 vite terser打包后保留console.log输出的做法

1、首先安装tersernpminstallterser-S//一定要是-S将其保存到dependencies而不是devDependencies2、在vite.config.js中进行如下配置:和plugins同级建一个build，然后在里边进行如下配置plugins:[vue(),],resolve:{alias:{'@':fileURLToPath(newURL('./src',import

jjw_zyfx·2025-04-26 22:47

OWASP出品：Xenotix XSS漏洞测试框架及简单使用

OWASPXenotixXSSExploitFramework是一个高效的跨站脚本漏洞（XSS）检测和攻击测试框架。它通过特有的三大浏览器引擎（包括Trident,WebKit和Gecko）进行安全扫描检测，并且其号称拥有全世界第二大的XSS测试Payload，同时具有WAF绕过能力。扫描模块ManualModeScannerAutoModeScannerDOMScannerMultiplePar

weixin_30598225·2025-04-26 20:01

vue3--手写手机屏组件

{}">import{ref,watch}from"vue";typeMobileStatusInfo="on"|"off";constprops=defineProps({isOn:{//手机是否显示type:Boolean,default:true,},isImmersive:{//是否是沉浸式状态栏type:Boolean,default:false,},statusBarBg:{type:

旅行者1024号·2025-04-26 19:26

九方前端面试

面试问题回答小编大二找实习面试，跟面试官死缠烂打的一次，公司使用的是vue2和vue3较多，所以问的比较多的是vue2和es6，以下是总结的面试官喜欢问的几个点。1.ES6新特性有哪些？

Deepsleep.·2025-04-26 17:47

vue3项目中eslint.config.ts配置rules

vue3项目中eslint.config.ts配置rules1.使用npmcreatevue@latest创建vue项目默认的eslint.config.ts如下import{globalIgnores

前端每日三省·2025-04-26 17:14

2、electron vue3 怎么创建子窗口，并给子窗口路由传参

接上回初始化vue3electron项目，创建完vue3electron项目后，现在要实现在渲染进程中点击按钮创建一个新的子窗口开始子窗口创建操作只能在主线程内完成，而创建操作是在渲染线程触发，因此就需要进行两者间的通讯

凉豆菌·2025-04-26 17:12

1、初始化vue3 electron 项目，及安装报错解决方法

开始1、首先，安装：npmi@vue/cli-g2、接着，创建项目，选择vue3vuecreateto-do-reminder3、进入创建好的目录下：cdto-do-reminder4、安装VueCLIPluginElectronBuilder

凉豆菌·2025-04-26 17:11

手把手教你 Vue 父子组件通信（超通俗版）

1.爸爸给儿子送东西：父传子（props）就像爸爸给儿子递玩具，父组件用props给子组件传数据，Vue2和Vue3的区别主要在写法：Vue2（传统写法）爸爸组件（父组件）：importChildComponentfrom

jingling1007·2025-04-26 17:40

Linux fdisk 命令简单使用方法

比如在/dev中有一块新的硬盘sde，那么我们就可以用fdisk/dev/sde来查看磁盘状态进入了fdisk命令列表之后，会先把磁盘的基本信息打印出来。输入m可以看到全部的命令列表。可以使用p查看当前的磁盘分区情况。本文地址：https://segmentfault.com/a/11...分区由于是空磁盘，假设我们只分一个区，那么我们应该使用n指令（addanewpartition）。有以下几步

·2025-04-26 13:52

Vue3 入门笔记 ---- 使用vue-router配置路由

文章目录路由的简单介绍vue-router安装vue-router创建router配置代码创建页面文件绑定router到vue实例上这个系列的笔记重点会放在怎么样利用Vue3把项目架设起来并跟后端API

潘智祥·2025-04-26 11:31

前端笔记-Vue3（中）

学习参考视频：尚硅谷Vue3入门到实战，最新版vue3+TypeScript前端开发教程_哔哩哔哩_bilibilivue3学习目标：VUE31、Vue3架构与设计理念2、组合式API（CompositionAPI

MrsBaek·2025-04-26 10:30

Vue3+Vite+TypeScript+Element Plus开发-23.客制Form组件

系列文档目录Vue3+Vite+TypeScript安装ElementPlus安装与配置主页设计与router配置静态菜单设计Pinia引入Header响应式菜单缩展Mockjs引用与Axios封装登录设计登录成功跳转主页多用户动态加载菜单

秋之猫·2025-04-26 10:25

Vue3 + OpenLayers 开发教程 ( 三 ) 交互与空间分析

1.空间分析的重要性空间分析是GIS的核心功能之一，它可以帮助我们：分析地理要素之间的空间关系进行空间查询和统计支持决策制定预测和模拟地理现象2.地图交互2.1交互类型在WebGIS中，常见的交互类型包括：选择（Select）：选择地图上的要素绘制（Draw）：创建新的地理要素修改（Modify）：编辑现有要素捕捉（Snap）：辅助精确绘制和编辑2.2创建交互配置文件创建src/config/in

若愚6792·2025-04-26 09:51

Vue3 - 详细实现虚拟列表前端虚拟滚动列表解决方案，vue3长列表优化之虚拟列表，解决列表动态高度不固定高度及图片视频图文异步请求加载问题，虚拟列表DOM大量数据同时加载渲染卡顿太慢及下滑列表闪烁

前言Vue2版本，请访问这篇文章在vue3项目开发中，详解实现虚拟列表高度不固定(不定高)且复杂含有图片视频等复杂虚拟列表教程，决列表每项高度不确定及img图像或视频的加载方案，利用缓冲区技术解决用户浏览时渲染不及时列表闪烁白屏

王二红·2025-04-26 06:57

vue3 -- 中实现子组件与父组件的双向数据绑定

前言在Vue3中实现子组件与父组件的双向数据绑定，v-model是最核心的机制。

Kingsaj·2025-04-26 06:57

vue3+TS+echarts 折线图

需要实现的效果如下import*asechartsfrom'echarts'import{getInitecharts}from'@/utils/echart'importtype{EChartsOption}from'echarts'//定义props类型interfaceProps{id:stringdataObj:Record|null}//定义propsconstprops=defineP

tjh0001·2025-04-26 05:51

vue3 + css 列表无限循环滚动+鼠标移入停止滚动+移出继续滚动

1.动画文件.vue{{index}}{{item.nickname}}{{item.point}}{{index}}{{item.nickname}}{{item.point}}importp0from'../../assets/images/dashboard/icon_0.png?v=1'importp1from'../../assets/images/dashboard/icon_1.pn

Web项目开发·2025-04-26 05:20

vue3 jsx或tsx中使用自定义指令

使用withDirectives、resolveDirective函数实现import{createVNode,h,withDirectives,resolveDirective}from'vue'//包裹自定义指令名称constpermission=resolveDirective('hasPermi')customRender:({record})=>{returnh('div',[h(But

tjh0001·2025-04-26 04:17

vue3 + element-plus 设置表格自动滚动

el-table中设置ref，用来获取元素，必须设置高度才可以滚动，鼠标放上停止自动滚动，可手动滚动，鼠标离开自动滚动import{ref,onMounted,onUnmounted}from'vue'lettimer=nullletmyTable=ref(null)constclearScroll=()=>{clearInterval(timer)timer=null}constcreateSc

goods_yao·2025-04-26 04:46

Vue3 elmentUi table 自动滚动

constscrollTable=ref()constscrollTimer=ref()onMounted(()=>{autoScroll(true)})//表格自动轮播constautoScroll=(isScroll)=>{consttable=scrollTable.value.layout.table.refsconsttableWrapper=table.bodyWrapper.firs

步侗·2025-04-26 02:35

vue3中，vue-echarts饼图（玫瑰图）的基础使用，并实现自动hover效果

注意：vue-echarts在使用前要先安装echarts，不要只安装vue-echarts这一个echarts官网地址：Examples-ApacheEChartsApacheECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。https://echarts.apache.org/examples/zh/index.html具体安

可爱的秋秋啊·2025-04-26 02:04

uniapp(vue3) - 实现AP配网+物联网硬件配网示例代码说明，uniApp做WIFI设备配网开发AP配网功能，扫描附近WiFi、选择网络、通过TCP发送配置信息、热点配网解决设备连接失败报错

效果图在uni-app手机h5网页网站/支付宝微信小程序/安卓app/苹果app/nvue等(一般情况下都是微信小程序平台就够了)，实现uniappAP配网硬件配网物联网连接等，建立TCP通讯硬件设备完成配网，提供输入wifi账号和密码表单，UNI-APP全端兼容实现物联网设备进行ap配网扫描连接使用、设备状态监控等，通用兼容性示例满足大多数场景。提供详细示例代码，新手小白复制稍微改改就能用了。完

十一猫咪爱养鱼·2025-04-26 02:59

可视化大屏系列（4）：高德地图集成与动态热区渲染

一、地图组件集成方案1.安装高德地图Vue插件在Vue3项目中推荐使用@vuemap/vue-amap，它对高德地图进行了Vue3的适配封装，使用方便、功能全面。✅安装

全栈探索者chen·2025-04-25 21:28

Vue - 详细实现将复杂 table 表格导出到 Excel(xls) 文件，支持原生表格、ElementUI 复杂表格、Ant Design Vue 复杂表格（将前端表格“所见所得“导出）

前言如果您需要Vue3版本，请访问这篇文章。

王二红·2025-04-25 20:23

施磊老师基于muduo网络库的集群聊天服务器(二)

Cmake简单介绍Cmake与MakefileCmake配置CmakeLists.txt编写完整cmake例子文件夹杂乱问题多级目录Cmakevscode极其推荐的cmake方式Mysql环境与编程mysql简单使用

Zhuai-行淮·2025-04-25 15:39

Vue3---(8)Pinia

目录简介安装创建pinia实例StoreOptionStoreSetupStore使用StoreStore解构State访问State通过store实例直接访问重置State选项式API通过$reset()方法将state重置为初始值组合式Setup中,需要自己创建重置方法修改State直接修改批量修改$patch通过action修改订阅state($subscribe)GetterAction访

前端无涯·2025-04-25 11:17

VUE3+Element-Plus开发一个简单登陆页

VUE3+Element-Plus开发一个简单登陆页，并发送异步请求1、安装element-plus组件库element-plus官方指南链接https://element-plus.org/zh-CN

学习与奋斗·2025-04-25 07:48

unity3d插件分享paint in 3d插件的简单使用

avi9111·2025-04-25 07:17

vue3+element-push 实现input框粘贴图片或文本，图片上传。

vue3+element-push实现input框粘贴图片或文本，图片上传。//展示上传的列表--可不要{{item.fileName}}······...

Dnn01·2025-04-25 06:45

vue3 el-tabs 和 el-dropdown 结合实现 tagsView 标签导航

大致思路所谓tagsView可以分成两部分来去看：tagsview那怎么分开看呢？首先我们先来看tags：所谓tgas指的是：位于appmain之上的标签那么现在我们忽略掉view，现在只有一个要求：在view之上渲染这个tag仅看这一个要求，很简单吧。v

小白小白从不日白·2025-04-25 04:02

vue3 上传文件带进度条

1是我的进度条，这里我用了遮罩层的方式2是我上传成功的地方3是上传按钮//所有请求都会从这里经过//创建一个axios实例constservice=axios.create({baseURL:'/api',//所有的请求地址前缀部分timeout:60000,//请求超时时间毫秒withCredentials:true,//异步请求携带cookieheaders:{//设置后端需要的传参类型'Co

sky亦恒·2025-04-25 04:30

Vue3封装table表格右键菜单功能

1)效果，右键单击单元格，打开菜单弹窗:点击菜单选项，可选择只读/编辑，可在只读/编辑方法中，拿到该行列表格的数据，进行相关操作2)思路1、右键菜单组件出现的时机，是右键单击table表格@row-contextmenu，Element-Plus有提供；且需要阻止右键单击默认事件@contextmenu.prevent。2、右键菜单组件出现的位置，根据右键单击table表格的位置对右键菜单组件的位

小御姐@stella·2025-04-25 04:00

解决el-radio-group中的area-hidden报错

三、解决方法：方法一：(vue2和vue3都适用)选项1选项2选项3exportdefault{data(){return

新茶十九·2025-04-25 04:29

web前端代码指南(vue3)

一、命名规范市面上常用的命名规范：camelCase（小驼峰式命名法——首字母小写）PascalCase（大驼峰式命名法——首字母大写）kebab-case（短横线连接式）Snake（下划线连接式）1.1项目文件命名1.1.1项目命名全部采用小写方式，以短横线分隔。正例：mall-management-system反例：mall_management-system/mallManagementSy