Vue3 第4页

深入理解Vue3里的defineModel

随着vue3.4版本的发布，defineModel也正式转正了。它可以简化实现父子组件之间的双向绑定，也是目前官方推荐的双向绑定实现方式。

百思不得小李·2025-06-19 19:24

独立AI开发者——技术路线与盈利模式规划

1.技术路线规划1.1前端(Vue+JS)：选用Vue3(配合Vite/Pinia)构建SPA，利用现成的对话组件库加速开发。

onceco·2025-06-19 19:23

Vue动画_从Vue2到Vue3

Vue动画全解析：从Vue2到Vue3的进阶指南在现代Web应用中，动画效果是提升用户体验的重要手段。

layman0528·2025-06-19 15:18

WebWorker 深入解析

别慌，听我慢慢道来想象你在开发一个Vue3应用，页面需要处理一个超级复杂的计算任务，比如实时分析一堆数据，或者生成一个炫酷的图像滤镜。

菜喵007·2025-06-19 13:36

WebWorker实现获取视频缩略图、大数组排序和 CSV数据解析

WebWorker使用示例（Vue3+TypeScript+Setup语法糖）本文展示WebWorker在前端开发中的实际应用场景。

菜喵007·2025-06-19 13:36

vue3监听与计算

Ⅰsetup(){}函数下监听和计算{{sum}}import{watch,computed,ref}from'vue'exportdefault{setup(){constnum=ref(2)watch(num,(newValue,oldValue)=>{console.log(newValue,oldValue)})watch(变量名,(newVal,oldVal)=>{}) //立即

湫化椿雨·2025-06-19 13:34

vue3 el-checkbox 筛选勾选项

在Vue3中，如果你想要筛选一个数组中使用了el-checkbox组件的所有勾选项，你可以通过绑定v-model到每个el-checkbox并使用计算属性（computedproperties）或方法来处理这些勾选项

海天胜景·2025-06-19 13:33

vue3 平均值计算

在Vue3中计算平均值，你可以使用JavaScript的基本运算功能。这里我将演示几种常见的方法来实现这个目的。假设你有一个数组，你想要计算其所有元素的平均值。

海天胜景·2025-06-19 13:33

IndexedDB 实现断点续传、分片上传

IndexedDB断点续传本文基于Vue3、TypeScript和Setup语法糖，实现文件断点续传功能，支持网络中断或浏览器关闭后从上次上传位置继续上传，并在浏览器重新打开时通过用户确认自动续传。

菜喵007·2025-06-19 12:01

使用JavaScript实现复制文本功能：从原生JS到Vue3

本文将详细介绍如何使用原生JavaScript和Vue3实现复制功能，并提供一个完整的示例。为什么需要复制功能？在AI对话应用中，用户经常需要复制机器人的回复内容以便在其他地方使用。

Pu_Nine_9·2025-06-19 05:14

Vue 3 路由跳转全面指南(Composition API + ＜script setup＞)

深度集成，提供了以下重要功能：页面无刷新跳转：保持应用状态的同时切换视图嵌套路由：构建复杂的页面布局结构路由守卫：控制导航权限和逻辑动态路由：根据需求加载路由配置滚动行为控制：提升用户体验本教程将使用Vue3

Pu_Nine_9·2025-06-19 05:44

vue3组合式API与vue2选项API

Vue3主推的是组合式API，相对于Vue2的选项API，有以下几个不同点：使用方式：vue2应用的核心架构是基于引入一个单一的vue实例，而在vue3中即便不通过新建一个vue实例也可以创建组件实例。

XXXX_康康吖·2025-06-19 05:43

Vue: 选项式与组合式API详解

随着Vue3的发布，组合式API的引入为开发者提供了全新的代码组织方式。本文将探讨Vue的两种API风格：选项式API和组合式API，并将从基本概念、代码结构、优缺点等方面进行详细对比。

小智IT·2025-06-19 05:43

Vue的组合式API和选项式API

什么是组合式api：组合式api的组件编辑方式是Vue2.7以及Vue3以上的版本提出的全新概念，是一系列API的集合，使我们可以使用函数而不是声明选项的方式书写Vue组件。

3_Trick·2025-06-19 05:41

Vue3 + TypeScript + Element Plus + el-input 输入框列表按回车聚焦到下一行

应用效果：从第一行输入1，按回车，聚焦到第二行输入2，按回车，聚焦到第三行……一、通过元素id，聚焦到下一行的输入框关键技术点：1、动态设置元素id属性为：:id="`input-apply-amount-${(optionasIReagentOption).id}`"2、设置回车监听：@keyup.enter.native="onEnterPressDown((optionasIReagentO

BillKu·2025-06-19 03:58

Vue3 + TypeScript：从环境搭建到组件通信的完整前端开发教程

在前端开发领域，Vue3与TypeScript的组合备受青睐。Vue3带来高效灵活的开发体验，TypeScript则提供强大的类型安全和可维护性。

魏大帅。·2025-06-19 02:55

Vue3 + TypeScript 生命周期钩子使用错误解析 onMounted is called when there is no active component instance to be

[Vuewarn]:onMountediscalledwhenthereisnoactivecomponentinstancetobeassociatedwith.LifecycleinjectionAPIscanonlybeusedduringexecutionofsetup().Ifyouareusingasyncsetup(),makesuretoregisterlifecyclehooks

BillKu·2025-06-19 02:52

Vue3 + TypeScript 本地存储 localStorage 的用法

1、字符串直接操作//存储表格列宽localStorage.setItem(`${tableName.value}_${prop}_colWidth`,newWidth.toString());//获取表格列宽letstorageColWidth=localStorage.getItem(`${tableName.value}_${prop}_colWidth`);//删除本地存储的列宽数据loc

BillKu·2025-06-19 02:52

Layui-Vue 开源项目教程

Layui-Vue开源项目教程layui-vuelayui-vue是一套Vue3.0的桌面端组件库项目地址:https://gitcode.com/gh_mirrors/la/layui-vue项目介绍

童福沛·2025-06-19 00:34

Vue3 渲染函数 API（五）

h()h函数用于创建并返回一个虚拟节点（VNode）h(tag,//HTML标签名、组件对象或异步组件函数data,//一个包含组件的props/attrs/domProps/on等的对象children//子虚拟节点(VNodes)，由h()构建而成，//也可以使用字符串来生成“文本虚拟节点”)import{h,createApp}from'vue'constMyComponent={rende

**之火·2025-06-18 22:54

《vue3基础知识》学习笔记Day34-（Period2）进阶 API

渲染函数APIh()创建虚拟DOM节点(vnode)。第一个参数既可以是一个字符串(用于原生元素)也可以是一个Vue组件定义。第二个参数是要传递的prop，第三个参数是子节点。当创建一个组件的vnode时，子节点必须以插槽函数进行传递。如果组件只有默认槽，可以使用单个插槽函数进行传递。否则，必须以插槽函数的对象形式来传递。为了方便阅读，当子节点不是插槽对象时，可以省略prop参数。import{h

sameen1900·2025-06-18 22:54

详细分析Canvas基本知识（以Vue3为基础）

目录1.基本知识2.Demo2.1填充矩形和描边矩形2.2清空矩形区域2.3绘制直线和路径2.4绘制圆形2.5绘制图像2.6多个形状组合3.彩蛋1.基本知识以下是关于Canvas的基本知识和对应API的详细分析，以表格形式呈现，并附上多个可以直接执行的Demo示例Canvas是一个HTML元素，允许使用JavaScript动态绘制图形和动画Canvas提供了一组API，使开发者可以直接在浏览器中进

码农研究僧·2025-06-18 20:40

鹏程万里------VUE3 xlsx导入excel读取数据

首先是html部分{{form.file_path}}{{'选择excel'}}然后是js部分constupload=async(file:any)=>{//constpath=awaitfileUpload(file)//if(false){//ElMessage.error()//return//}//form.file_path=path//console.warn(form.file_pa

苏西守护者·2025-06-18 20:08

vue3的生命周期

Vue3的生命周期与Vue2类似，但在CompositionAPI中提供了新的方式来使用生命周期钩子。

没资格抱怨·2025-06-18 19:04

Vue 3 Diff 算法过程及基本实现方式

Vue3的Diff算法Vue3使用的是一种高效的DOMDiff算法，主要用于在虚拟DOM树发生变化时，计算最小的操作以更新真实DOM。相比Vue2，Vue3的Diff算法做了很多优化。

椒盐大肥猫·2025-06-18 19:34

vue3 模板编译过程

Vue3的模板编译过程将您在Vue单文件组件（.vue文件）或模板字符串中写的声明式模板转换成JavaScript渲染函数。

椒盐大肥猫·2025-06-18 19:33

Vue3 内置组件使用指南：提升开发效率的实用技巧

Vue3提供了一系列强大的内置组件，能够帮助开发者高效处理动态组件、内容分发、过渡动画等常见场景。本文将结合代码示例，讲解6个核心内置组件的实战用法。

产品经理跪着改需求·2025-06-18 19:03

【前端】Vue3 生命周期钩子详解

欢迎来到[爱学习的小羊]的博客！希望你能在这里发现有趣的内容和丰富的知识。同时，期待你分享自己的观点和见解，让我们一起开启精彩的交流旅程！>首页：爱学习的小羊–热爱AI、热爱Python的天选打工人，活到老学到老！！！导航-常用开发工具：包含代码补全工具,Vscode-AI工具,IDERorPycharm-AI工具,如何使用Cursor等更多教程…-VScode-AI插件：集成13个种AI模型（G

爱学习的小羊啊·2025-06-18 19:03

Vue 3 生命周期钩子详解

Vue3虽然引入了CompositionAPI，但依然保留了选项式API中的生命周期概念，只是部分钩子名称有所变化。

图灵科竞社资讯组·2025-06-18 19:02

Vue3核心技术之虚拟DOM

在Vue3中，**虚拟DOM（VirtualDOM）**是核心技术之一，它通过在内存中创建轻量级的DOM表示，优化了UI渲染的性能。1.什么是虚拟DOM？

guokanglun·2025-06-18 18:01

Vue3-高级特性

一、Vue中自定义指令1.认识自定义指令在Vue的模板语法中我们学习过各种各样的指令：v-show、v-for、v-model等等，除了使用这些指令之外，Vue也允许我们来自定义自己的指令。注意：在Vue中，代码的复用和抽象主要还是通过组件；通常在某些情况下，你需要对DOM元素进行底层操作，这个时候就会用到自定义指令；自定义指令分为两种:自定义局部指令：组件中通过directives选项，只能在当

DustinWangq·2025-06-18 18:00

Vue3开发从入门到精通

Vue3开发从入门到精通学习目录第一部分：Vue3概述第1章：Vue3简介什么是Vue3Vue3的历史和发展Vue3的主要特点和优势Vue3的应用场景第2章：Vue3的演进过程从Vue1到Vue3的演进

莲华君·2025-06-18 18:29

Vue3组合式API深度解析：模式、实践与架构级应用

一、组合式API设计哲学1.1响应式编程演进1.2组合式特性对比表特性选项式API组合式API优势分析代码组织按选项分块逻辑聚合高内聚低耦合类型推导有限支持完整TS支持开发体验提升60%逻辑复用Mixins混入自定义Hook降低复杂度50%生命周期固定钩子动态注册灵活度提升80%响应式追踪隐式追踪显式声明可维护性增强70%二、核心响应式机制剖析2.1响应式系统实现//简化的响应式核心实现class

桂月二二·2025-06-18 18:59

溜达哥·2025-06-18 18:59

Vue 面试核心知识点详解

Vue3.x改用ProxyAPI，直接代理整个对象，解决了Vue2中数组索引修改、对象属性增删无法监听的缺陷，性能更高且支持动态新增属性。

前端小崔·2025-06-18 18:56

el-select+el-tree实现树形分组+多选+搜索的选择器

注意父组件用的vue3语法，子组件用的vue2的语法封装treeList子组件，直接上代码exportdefault{name:'TreeSelect',props:{//v-model绑定value:

₍•ʚ•₎呀呀·2025-06-18 16:44

vue3中element-plus修改el-tooltip的宽度

注意选中的样式是:deep(.el-popper.is-dark){max-width:30%!important;}也有可能不需要后面的.is-dark，看情况而定，总之不是.el-tooltip修改el-tooltip的显示高度参考：前端字数太多使用el-table设置show-overflow-tooltip显示不下，闪烁不显示_某页面的el-table统一开启show-over-toolt

selfsuer·2025-06-18 15:42

vue3 el-select+el-tree实现下拉树形选择

主要功能：多选，移除标签，清空标签，模糊搜索，禁用，全选，清空全选清空import'element-plus/dist/index.css'import{getFileTypeTree}from'@/api/Customer/index'exportdefault{name:'App',data(){return{noticeTypeId:[],//最后获取的选择idtreeProps:{valu

控糖__he·2025-06-18 15:10

vue3+element-plus el-date-picker日期组件再次封装（DatePicker与DateTimePicker合并根据type值来显示并自定义常规快捷方式）

1、最终效果2、TDatePicker参数配置1、简介：基于ElementUIDatePickerDateTimePicker组件的二次封装，取决于type值代码示例：2、t-date-picker（Attributes）继承DatePickerDateTimePicker的Attributes参数说明类型默认值v-model绑定值[String,Date,Array]-plusTime日期范围是

wocwin·2025-06-18 15:10

Vue3 Pinia Store 生命周期管理

在Vue3的Pinia中，defineStore定义的store本身没有onUnmounted生命周期钩子。

BillKu·2025-06-18 15:39

Spring Boot + MyBatis + Redis Vue3 Docker + Kubernetes + Nginx

1.1毕设项目需求分析（附需求文档片段）一、项目全景与技术选型1.1毕设项目需求分析（附需求文档片段）1.1.1项目背景本项目为高校教务管理系统，旨在解决传统纸质化管理模式效率低、数据分散的问题。系统需支持课程管理、成绩录入、选课排课、学籍查询等功能，同时满足多角色权限控制（教师、学生、管理员）。1.1.2核心需求1.**用户管理模块**-[x]用户注册/登录（支持JWT鉴权）-[x]角色权限分配

·2025-06-18 12:13

Vue3监听滚轮加ctrl键控制放大缩小

constscale=ref(1);//初始缩放级别constzoomSpeed=0.1;//缩放速度constzoomableElement=ref(null);consthandleWheel1=event=>{if(event.ctrlKey){//阻止默认的页面滚动行为event.preventDefault();//判断滚轮方向：向上放大，向下缩小if(event.deltaY=2){r

Study_Live_Sun·2025-06-18 09:20

新手如何在阿里云服务器上部署第一个自己的SpringBoot+Vue项目

新手部署SpringBoot+Vue3前后端分离项目到阿里云服务器1服务器准备1.1购买服务器ECS服务器阿里云官网：地址练手的话选择产品->云服务器ECS即可。

StrivePeng·2025-06-18 06:34

Vue3前端 .NET 后端接口【前后端分离】

Vue3前端.NET后端接口【前后端分离】觉得不错就点个赞吧文章目录Vue3前端.NET后端接口【前后端分离】觉得不错就点个赞吧1.前端创建Vue3项目2.后端.NET创建ASP.NETCoreWebApi

Awzh Circulate·2025-06-18 05:28

pnpm-vue3-ts：裁剪 / 上传裁剪 / 头像-商品图片处理-图片编辑 / vue-cropper

一、简介Vue-Cropper是一个基于Vue.js的轻量级图片裁剪组件，专为前端项目中的图片裁剪需求设计。它提供了丰富的功能和灵活的配置选项，支持多种图片格式输入和输出，适用于头像裁剪、商品图片处理、图片编辑等场景。二、使用场景用户头像上传：允许用户裁剪并上传符合要求的头像。商品图片处理：电商平台中，用户可裁剪商品主图或详情图。图片编辑工具：集成到图片编辑器中，提供基础裁剪功能。三、集成vue-

快雪时晴-初晴融雪·2025-06-18 04:22

Vue3的Vapor模式有哪些优缺点？

Vue3的Vapor模式作为一项颠覆性技术，具有以下优缺点：优点极致性能消除虚拟DOM开销：直接操作真实DOM，省去虚拟DOM的对比和渲染过程，在高频更新场景（如实时图表、游戏UI）中性能提升显著，甚至接近原生

涔溪·2025-06-17 23:18

[vue vue-router]vue3路由获取请求参数

在使用vue路由的时候，比如有一个tab栏，点击tab栏不同的tab切换。在配置二级路由时，不把id写死，作为路由参数站位routes:[{path:'/',component:Layout,children:[{path:'',component:Home},{//此处我们把id作为一个可变id配置path:'/category/:id',component:Category}]},{path:

·2025-06-17 23:46

vue3实现websocket连接

2025.03.23今天我学习了用vue3实现websocket长连接，代码如下：WebSocketExampleCurrentMessage:{{message}}import{ref,onMounted

AI小奶龙·2025-06-17 22:14

vue3使用scale属性来实现大屏自适应铺满整个屏幕

importdebouncefrom"lodash/debounce";import{computed,reactive}from"vue";letthat=reactive({width:1920,height:1080,scaleX:null,scaleY:null,});letstyleObject=computed(()=>{letobj={transform:`scale(${that.

月伤59·2025-06-17 18:47

vue3-seamless-scroll无缝滚动组件使用

Vue3.0无缝滚动组件，支持Vite2.0，支持服务端打包官网地址：https://github.com/xfy520/vue3-seamless-scrollnpm地址：vue3-seamless-scroll-npm1