#vue3

Vue3 使用详解

一、Vue3简介Vue3是Vue.js框架的最新主要版本，于2020年9月正式发布。
上官箫羽·2025-04-29 09:36

Vue3组合式Api中ref何时需要使用.value

在Vue3中，是否需要使用.value取决于你操作的是响应式引用对象（ref）还是普通值。以下是详细规则和使用场景：需要.value的情况.value是ref对象的一个属性，用于访问或修改其存储的值。
北极星Henry·2025-04-28 21:18

Vue3中的ref为何要用.value进行值的调用？

在Vue2中，所有的数据都通过一个Data进行统一的返回，并且在data中对某个组件要用的数据进行统一的管理，常见的使用形式是这样的：importsearchfrom'@/components/search'importtodosfrom'@/components/todos'importallfrom'@/components/all'exportdefault{name:'App',data(
ciarlatani·2025-04-28 21:48

从源码的角度去分析,为什么Vue3中的ref为何要用.value进行值的调用

要从源码角度分析Vue3中ref为什么需要通过.value来访问和修改值，关键在于Vue3响应式系统的设计和实现。
吴世燅·2025-04-28 21:18

Vue3中Symbol的使用说明

在Vue3中，Symbol主要用于解决命名冲突和实现更安全的依赖注入。以下是详细讲解和示例代码：一、Symbol基础Symbol是ES6引入的原始数据类型，表示唯一的值。
BillKu·2025-04-28 21:42

Vue2、Vue3区别之响应式原理

Vue2、Vue3区别之响应式原理文章目录Vue2、Vue3区别之响应式原理**一、Vue2的响应式原理****1.核心机制：`Object.defineProperty`****2.局限性****二、
肠胃炎·2025-04-28 15:08

Vue2和Vue3区别之API

Vue2和Vue3区别之API文章目录Vue2和Vue3区别之API一、全局API对比总表**1.创建应用实例****Vue2:`newVue()`****Vue3:`createApp()`****2
肠胃炎·2025-04-28 15:08

Vue.js 核心特性解析：响应式原理与组合式API实践

本文将深入探讨Vue3的核心特性，包括响应式系统原理、组合式API的使用以及实际开发中的最佳实践，帮助开发者更好地掌握Vue.js的精髓。
じ☆ve 清风°·2025-04-28 13:24

vue3实现防抖和节流

安装Lodashyarnaddlodashnpminstalllodash--save导入Lodash节流防抖import_from"lodash";exportdefault{name:"",setup(){//节流constbtnClick=_.debounce(function(){//....console.log('节流');},2000);//防抖constbtnClick2=_.th
李長庚·2025-04-28 04:27

Vue3中的防抖和节流

防抖或者节流的作用：一是为了防止用户频繁操作；二是为了节约一定的服务器资源，减少资源浪费的情况。customRef函数使用customRef函数创建一个自定义的ref，并对其依赖项跟踪和更新触发进行显示控制customRef接收一个函数作为参数，这个函数接收两个函数作为参数track(通知vue需要追踪后续内容的变化)和trigger(通知vue重新解析模板)防抖函数(debounce):impo
喜欢打嗝·2025-04-28 04:57

vue3学习之防抖和节流

Vue3中的防抖（Debounce）和节流（Throttle）就是用来解决这类问题的两种常用技术。一、什么是防抖和节流？1.防抖（Debounce）什么是防抖？
鸡吃丸子·2025-04-28 04:25

vue3 嵌入unity 3D模型入门教程

实现场景在前端开发过程中，需要嵌入3D模型，目前所用的3d模型都是由unity3d编译而成的，直接嵌入就可以了。设计方案用iframe直接嵌入unity3d的编译包。unity3d编译之后，最终会生成js文件。首先，将unity3d文件，编译之后放入一个和public同级的文件夹，这里命名为model；其次，直接用iframe嵌入；查看嵌入的效果；最后，将文件打包，放到一个目录下面，需求就达到了。
资深前端之路·2025-04-28 03:21

下载和初步上手Vue3路由

一、安装路由bash#使用npm安装npminstallvue-router@4#或使用yarnyarnaddvue-router@4二、路由配置与暴露1.路由配置文件router/index.jsjavascriptimport{createRouter,createWebHistory}from'vue-router'//定义路由数组，每个对象代表一个路由配置constroutes=[{//路
lh_1254·2025-04-28 03:19

Vue程序下载

Vue是一个基于JavaScript（JS）实现的框架，想要使用它，就得先拿到Vue的js文件Vue官网Vue2：Vue.jsVue3：Vue.js-渐进式JavaScript框架|Vue.js下载并安装
lh_1254·2025-04-28 03:49

VUE3—无限级菜单渲染

场景：从后台api查询菜单数据，渲染到界面，比如后台管理系统的左侧的树形菜单，如果用v-for或者if去判断的话，如果层级很多的情况下，会造成代码冗余。所以这个时候可以使用组件的方式，通过组件内递归达到代码的简洁，也方便调用和修改解决办法：在项目components文件夹中创建文件夹menu，在menu文件夹下创建menuTree.vue文件。menuTree.vue{{item.name}}
远方的猫·2025-04-27 22:50

Vue3父子组件数据同步方法

在Vue3中，当子组件需要修改父组件传递的数据副本并同步更新时，可以通过以下步骤实现：方法1：使用v-model和计算属性（实时同步）父组件：vueimport{ref}from'vue';constparentData
BillKu·2025-04-27 22:19

Vue 2 vs Vue 3：核心语法与 API 对比详解

对于已经熟悉Vue2的开发者来说，理解Vue3在核心语法和API上的变化是过渡的关键。
尹劭东·2025-04-27 19:30

vue3 将文字或链接生成二维码 qrcode.vue

安装npminstall--saveqrcode.vue案例vue3+ts利用Popover气泡卡片点击后弹窗，或是修改为鼠标触动弹框都可以还可以写css样式改变二维码与卡片样式【Popover气泡卡片
outside-R·2025-04-27 18:53

Vue3 实现扫码枪监听与二维码解析

以下是一个基于Vue3的扫码枪监听与二维码解析的完整实现。通过监听键盘事件，识别扫码枪输入的内容，并对二维码数据进行解析和处理。
梦的晓析者·2025-04-27 18:21

vue3+ts文字或链接转为二维码图片

需求：扫描二维码下载app,后端已提供接口并请求定向到下载app功能，现需要将接口链接赋值到二维码图片，比如扫码二维码即为请求/app/download/v1.0.0接口并可实现下载功能，将图片赋值为/app/download/v1.0.0即可。实际实现即可翻译为：文字转为二维码图片1-安装qrcode库npmiqrcode2-新建QRCode组件import{defineProps,ref,on
小猿L·2025-04-27 17:50

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

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

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
上一页 17 18 19 20 21 22 23 24 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他