vue3知识收集

Vue3为了封装组件，我写了三天的 vue3 hook！学起来！

前言我以前很喜欢封装组件，什么东西不喜欢别人的，总喜欢自己搞搞，这让人很有成就感，虽然是重复造轮子，但是能从无聊的crud业务中暂时解脱出来，对我来说也算是一种休息，相信有很多人跟我一样有这个习惯。这种习惯在独立开发时无所谓，毕竟没人会关心你咋实现的，但是在跟人合作时就给别人造成了很大的困扰了，毕竟每个人封装的东西都是根据自己习惯来的，别人看着多少会有点不顺眼，而且自己封装的组件大概率也是没有写文
chenNorth。·2025-02-14 12:20

少数人知道的 10 个神奇 CSS 选择器

ReactHook深入浅出CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读在Web开发中，CSS扮演着至关重要的角色，但很多开发者并没有真正发掘它的全部潜力！
·2025-02-14 09:07

vue2与vue3的区别

文章目录Vue2和Vue3区别—源码深度解析一、底层监听逻辑区别二、深度解析源码对比1.Vue2的响应式系统2.Vue3的响应式系统3.源码对比示例三、Vue2进阶Vue3注意事项1.全局API的变化2
胡图蛋.·2025-02-14 07:18

vue3源码：reactive与ref深度对比，为什么要使用 ref

reactive的局限性：reactive函数会把传入的object作为proxy的target参数，而proxy只能代理对象，不能代理基本数据类型ref的实现原理：在类RefImpl的构造函数中执行了一个toReactive方法，传入了value，该方法把数据分成了两种类型：复杂数据类型：调用了reactive函数，即把value变为响应性的。简单数据类型：直接把value原样返回。下面进行核心
wxzYa·2025-02-14 06:09

Vue3中的ref与reactive：构建响应式数据的双刃剑

一、使用方式1.ref的使用import{ref}from'vue';//创建一个响应式的计数器constcount=ref(0);//修改值count.value++;//增加计数//在模板中直接绑定Countis:{{count.value}}2.reactive的使用import{reactive}from'vue';//创建一个响应式对象constuser=reactive({name:'
明日筑梦师·2025-02-14 05:03

数字科技3D全景展厅

项目效果：基于vue3+threejs展厅3D可视化项目介绍：数字科技3D全景展厅,实现展厅室内720度全景漫游观看，点击展厅内的展品弹出框，图片被放大显示，以及实现点击具体展品，实现飞行定位到该展品前观察
jnfy·2025-02-14 04:03

vite.config.js 的一些常用配置你知道吗

前言当我们进行前端开发项目的时候都需要一些构建工具，像Webpack、Rollup、Snowpack、Vite等构建工具，而在Vue3的官方文档中的创建应用例子使用了Vite，那么问题来了，为什么在Vue3
子伟-H5·2025-02-14 03:58

Vue3笔记_＜入门基础篇＞

目录Setup语法糖ref:定义一个数据的响应式reactive:定义一个对象类型的响应式数据toRef()toRefs()计算属性watchEffect函数生命周期Vue3获取DomPropsVue3
我的白银时代·2025-02-13 23:01

基于uniapp vue3 的滑动抢单组件

通过在onMounted获取movable-area与movable-view实例，计算出可滑动的距离效果图：代码：»Slidetograborderimport{ref,onMounted}from"vue";constsliderX=ref(0);//滑块X轴位置constmaxX=ref(0);//最大可滑动距离onMounted(()=>{getMaxX();//组件加载后计算最大可滑动距
printf_824·2025-02-13 19:34

【uni-app】Pinia 持久化

小程序端Pinia持久化说明：Pinia用法与Vue3项目完全一致，uni-app项目仅需解决持久化插件兼容性问题。
秀秀_heo·2025-02-13 18:32

20vue3实战-----使用echarts搭建各种图表

20vue3实战-----使用echarts搭建各种图表1.实现目标2.实现步骤2.1封装组件2.2使用组件1.实现目标如上,页面上有各种各样类型的图标。这时候需要用到echarts库作为辅助。
太阳与星辰·2025-02-13 15:37

记录一次vue3使用ejs文件配合vite打包的异常

打包后index.html内容异常，显示exportdefault"./assets/index-DxOHZ_2H.html"原因是因为工程项目想要使用ejs，结果配置assetsInclude:['/.ejs','/.html'],解决办法，去掉'*/.html'
·2025-02-13 11:55

4年前端开发面试题，Vue方向，10道题，包括答案和释疑（1）

以下是针对4年前端经验（Vue方向）的10道高频面试题，涵盖核心原理、高级特性及优化策略，答案与解析结合Vue2主流版本（兼顾Vue3对比）：1.Vue2的响应式原理是什么？Vue3有何改进？
繁若华尘·2025-02-13 09:21

vue3中响应式数组操作的几种方法

在Vue3中如何优雅地操作响应式数组以保持性能并实现实时响应？
AI小美好·2025-02-13 09:20

npm插件开发-多组件(vue3+element-plus)

项目初始化首先，创建一个新的项目目录并初始化package.json文件：mkdirmulti-component-plugincdmulti-component-pluginnpminit-y2.安装依赖安装Vue3
悄悄地秃头·2025-02-13 03:35

基于Vue3的简易旋转音乐播放器

先看效果图：在音乐播放时，右下角的图标会不停旋转，暂停时恢复原位。完整代码import{ref,onMounted}from"vue";import{ElNotification}from"element-plus";importmusicfrom'@/assets/music/骆集益-回梦游仙.mp3'constaudio=ref(null);constisRotate=ref(false);c
fsj2009yx·2025-02-13 02:59

从零搭建Vue3工程化项目实战指南（2025新版）

一、为什么需要工程化？传统开发痛点：手动管理依赖版本缺乏统一构建流程代码规范难以统一项目结构混乱工程化优势：标准化开发流程自动化构建/测试生产环境优化可维护的代码结构二、环境准备（Windows/Mac通用）1.安装Node.js推荐使用nvm管理多版本：#安装nvmcurl-o-https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/instal
超浪的晨·2025-02-12 18:00

vue3: const一个function怎么写呢？

回答：在Vue3中，`ref`和`reactive`是两种常用的响应式数据定义方式。`ref`用于定义单个响应式对象或原始值，而`reactive`用于定义响应式对象。
fury_123·2025-02-12 13:56

Vue3快速上手

Vue3快速上手1.Vue3简介2020年9月18日，Vue.js发布3.0版本，代号：OnePiece（海贼王）耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者github上的
ConstMAO·2025-02-12 12:51

UniApp + Vue3开发中的坑：无法获取到dom元素的排查过程 无法直接修改style样式的坑

UniApp+Vue3开发中的坑：无法获取到dom元素的排查过程无法直接修改style样式的坑欢迎关注『开发必备』专栏，专注于解决你在开发过程中遇到的各种问题，帮你快速找到解决方案，节省大量调试时间。
代码简单说·2025-02-12 03:17

[vue3] Ref Reactive

【b站-【前端面试】Vue3ref与reactive区别】Ref：Ref用于创建一个响应式的基本数据类型，比如数字、字符串等。它将普通的数据变成响应式数据，可以监听数据的变化。
533_·2025-02-12 02:09

【前端】【面试】ref与reactive的区别

ref与reactive的区别笔记一、概述在Vue3的组合式API中，ref和reactive是两个非常重要的响应式工具，它们都用于创建响应式数据，但在使用方式、适用场景和内部实现上存在一些区别。
患得患失949·2025-02-12 01:03

vue3 在线预览word文件

一、使用mammoth插件安装插件pnpminstallmammoth--save-dev使用importmammothfrom"mammoth";import{ref}from"vue";consthtmlContent=ref("");consthandleFileUpload=async(event)=>{constfile=event.target.files[0];if(file){co
·2025-02-11 21:43

Vue3计算属性

比如说，我们有这样一个包含嵌套数组的对象：//jsconstauthor=reactive({name:'JohnDoe',books:['Vue2-AdvancedGuide','Vue3-BasicGuide
海绵宝龙·2025-02-11 18:05

Vue3 实现 勾选 + 列表拖拽 + 搜索列表

左侧勾选对应右侧显示右侧删除对应左侧取消勾选效果图:可选属性(共{{items.length}}个)全选{{item.label}}全选-->已选属性(共{{selectedItems.length}}个){{element.label}}置顶删除-->取消确认import{computed,ref,toRefs}from'vue'importdraggablefrom'vuedraggable'
A-sleep·2025-02-11 17:59

vue3+vite assets动态引入图片的几种方式，解决打包后图片路径错误不显示的问题

vite官方默认的配置，如果资源文件在assets文件夹打包后会把图片名加上hash值，但是直接通过:src="imgSrc"方式引入并不会在打包的时候解析，导致开发环境可以正常引入，打包后却不能显示的问题vue3
A-sleep·2025-02-11 17:29

vue3项目中使用lodash

1.安装lodashnpmilodash--save2.全局使用main.ts.......import_from'lodash'constapp=createApp(App)app.config.globalProperties.lodash=_;//设置全局变了3.界面使用......import{getCurrentInstance}from"vue"const{proxy}=getCurr
·2025-02-11 16:25

vue3+vite项目h5/web配置浏览器自适应适配（postcss-px-to-viewport-8-plugin）

注意，项目中不要写行内样式vue3+vite项目配置适配H5主要安装一下两个插件：amfe-flexible（主要用于动态设置根元素字体大小(rem)，以根据屏幕尺寸进行自适应布局）postcss-px-to-viewport
·2025-02-11 16:25

vue3+vite项目，elementPlus自定义主题

vue3+vite配置elementPlus主题需要安装一下两个插件：unplugin-vue-componentsunplugin-auto-import开始配置：第一步、安装插件pnpminstall-Dunplugin-vue-componentsunplugin-auto-import
·2025-02-11 16:54

monorepo代码管理框架

1.新建vue3-component文件夹2.运行pnpminit3.pnpmivuetypescript4.新建.npmrcshamefully-hoist=truelink-workspace-packages
Lanwarf-前端开发·2025-02-11 13:36

Vue全流程--Vue3组合一ref与reactive（实现响应式）

ref：定义基本类型的响应式数据先看ref使用的位置import{ref}from'vue'exportdefault{name:'App',setup(){//数据letname=ref('张三')letage=ref(18)//方法functionchangeInfo(){//name='李四'//age=48console.log(name,age)}//返回一个对象（常用）return{n
不清参·2025-02-11 12:30

Java全栈项目实战：在线课程评价系统开发

一、项目概述在线课程评价系统是一款基于SpringBoot+Vue3的全栈应用，面向高校师生提供课程评价、教学反馈、数据可视化分析等功能。
天天进步2015·2025-02-11 11:45

深挖vue3基本原理之四 —— 组合式 API

四、组合式API的底层实现机制和设计4.1组件实例上下文深度剖析interfaceComponentInternalInstance{uid:number//唯一标识符（组件树定位关键）type:ConcreteComponent//组件原始定义（函数/对象形式）parent:ComponentInternalInstance|null//父实例（跨层级通信基础）appContext:AppCon
ZhooooYuChEnG·2025-02-11 10:14

Vue2与Vue3的区别

Vue2和Vue3是Vue.js框架的两个主要版本。Vue3在Vue2的基础上做了很多重要的改进和新增的特性，使得开发者能够更加高效地开发应用。
呀啊~~·2025-02-11 10:14

vue3+vite使用Monaco-editor

安装Monaco-editornpminstallmonaco-editor安装VitePluginMonacoEditorvdesjs/vite-plugin-monaco-editor-Vite中文文档npminstall--save-devvite-plugin-monaco-editorvite.config.ts:import{defineConfig}from'vite';import
小杨爱编程·2025-02-11 06:05

vue3结合element-plus之如何优雅的使用表单组件

背景在日常开发中，我们会经常使用element-ui或者是antdesign或者是element-plus等组件库实现搜索功能这里就需要用到相关表单组件下面就以element-plus为例，我们实现一个搜索功能的组件，并且随着屏幕尺寸的变化，其布局也会跟随变化最终大致效果如下：这里就没有对布局进行过多的美化，旨在实现其功能前置知识储备对vue相关知识熟悉熟练使用element-plus对v-bin
小白小白从不日白·2025-02-11 05:30

vite + vue3 + uniapp 项目从零搭建

vite+vue3+uniapp项目从零搭建1、创建项目1.1、创建Vue3/vite版Uniapp项目1.2、安装依赖1.3、运行项目2、弹出用户隐私保护提示方法2.1、更新用户隐私保护指引和修改配置文件
W.Y.B.G·2025-02-11 05:59

vue3中v-model的原理

1.v-model的实现方式v-model在Vue.js中是一个语法糖，它实际上是:modelValue和@input事件的组合。具体来说，v-model做了以下几件事情：初始化绑定：当Vue实例创建时，它会解析模板中的v-model指令，并找到对应的表单元素。然后，它会将该表单元素的value属性与Vue实例中的某个数据属性（如data中的某个属性）进行绑定。这通常是通过Proxy来实现的，以实
zzzjnnn·2025-02-11 04:58

vue3.0 从入门到一往无前

文章目录安装及创建安装创建一.选项式与组合式选项式API组合式API区别：二、响应机制（ref、reactive）1.reactive:2.ref:3.isRef与isReactive4.toRef与toRefs三、组件通信四、路由vue-router五、状态管理store(pinia)安装创建定义及使用：六、生命周期七、内置组件TeleportSuspense八、Hooks为什么要封装Hooks
Ccfitch·2025-02-11 04:57

【Vue】在Vue3中使用Echarts的示例 两种方法

文章目录方法一template渲染部分js部分方法一实现效果方法二template部分jsorts部分方法二实现效果贴个地址~ApacheECharts官网地址ApacheECharts示例地址官网有的时候示例显示不出来，属于正常现象，多进几次就行开始使用前，记得先安装好echartnpminstallecharts--save以下代码我采用的都是vue文件内全部引入，是否按需引入看各自项目要求进
祁许·2025-02-11 04:55

Vue全流程--Vue3.0与Vue2.0响应式原理对比

中数据的响应式需要使用Vue.set这么一个api，修改数据需要使用Vue.delete这么一个api，删除数据数据代理这个当面的理解可以看看我前面文章Vue全流程--数据代理的理解以及在Vue中的应用-CSDN博客Vue3
不清参·2025-02-10 23:47

【Vue3】使用Vite构建工具构建Vue3项目

vite官网：Vite中文网什么是vite？——新一代前端构建工具。优势如下：开发环境中，无需打包操作，可快速的冷启动。轻量快速的热重载（HMR）。真正的按需编译，不再等待整个应用编译完成。传统构建与vite构建对比图一、利用cmd和vscode创建注意：使用npm前提是要先安装配置node1.查看npm版本npm-v2.进入工作目录，根据npm的版本执行指令#npm6.x
早睡早起长头发·2025-02-10 18:39

Vue 3.4 深度评测：全新 defineModel 解决了哪些痛点 ？

Vue3的发布带来了诸多重大改进，而Vue3.4版本更是引入了全新的`defineModel`特性。这个特性旨在解决一些在组件开发过程中常见的痛点问题，让我们一起来深度评测一下它到底解决了哪些痛点。
码上前端·2025-02-10 15:17

在 Vue 3 项目配置 rem

在Vue3中配置rem时，设计稿1920，如果你希望实现一个最小宽度为1024px的适配，意思是当屏幕宽度小于1024px时不再缩小字体大小，始终保持最小宽度的rem配置。
·2025-02-10 14:35

vue3+websocket+springboot、websocket消息通讯

websocket通信后端后端-配置类：packagecom.yupi.project.config;importorg.springframework.context.annotation.Configuration;importorg.springframework.web.socket.config.annotation.EnableWebSocket;importorg.springfra
AA大鹏·2025-02-10 12:52

为什么要用proxy代替defineProperty

文章目录vue3-为什么要用proxy代替defineProperty1.什么是Object。
16年上任的CTO·2025-02-09 20:31

11vue3实战-----封装缓存工具

11vue3实战-----封装缓存工具1.背景2.pinia的持久化思路3.以localStorage为例解决问题4.封装缓存工具1.背景在上一章节，实现登录功能时候，当账号密码正确，身份验证成功之后，
太阳与星辰·2025-02-09 19:56

VUE3 父组件传递给子组件的值 子组件怎么处理后使用

本地化处理（避免直接修改props)监听proxy数据的某个属性需要将监听值写成函数返回形式,vue3无法直接监听对象的某个属性变化import{ref,watch}from'vue'constprops
A-sleep·2025-02-09 15:59

vue3全局函数-用于全局使用getCurrentInstance

我们一般在vue3上挂在一些全局函数，都是基于globalPropertiesimport{createApp}from"vue";import"@/style.css";importAppfrom"@
·2025-02-09 14:58

Vue 3 30天精进之旅：Day 16 - 组合式API进阶

欢迎来到“Vue330天精进之旅”的第16天！今天我们将深入探讨组合式API的进阶用法，包括reactive和ref的细节，以及生命周期钩子的应用。
码上飞扬·2025-02-08 22:22
上一页 1 2 3 4 5 6 7 8 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他