Vue3组件开发

vue大屏适配

.安装注：vue2使用[email protected]版本，vue3使用[email protected]版本[email protected].在
爱学习的啊强·2024-02-04 00:05

【vue3】使用自定义指令，实现el-dialog的拖拽功能。

实现el-dialog的拖拽功能说明这里指的是element-plus的el-dialog组件，一开始该组件并没有实现拖拽的功能，当然现在可以通过设置属性的方式实现拖拽。自带的拖拽功能非常严谨，拖拽时判断是否拖拽出窗口，如果出去了会阻止拖拽。如果自带的拖拽功能可以满足需求的话，可以跳过本文。通过自定义指令实现拖拽功能因为要自己操作dom（设置事件），所以感觉还是使用自定义指令更直接一些，而且对原生
梅花十三儿·2024-02-03 21:04

vue3中如何使用防抖和节流

1.封装在src/utils文件夹中新建文件handleDebounce.js，用于封装防抖和节流//防抖exportfunctiondebounce(fn,delay=200){//fn是需要防抖的函数，delay是延迟多少毫秒执行fnlettimer=null;returnfunction(){if(timer){clearTimeout(timer);}timer=setTimeout(()
℘团子এ·2024-02-03 20:45

vue3-逻辑复用

什么是组合式函数_无状态逻辑的函数_：它在接收一些输入后立刻返回所期望的输出。比如时间格式化的函数。有状态逻辑的函数:有状态逻辑负责管理会随时间而变化的状态。比如跟踪当前鼠标在页面中的位置。在Vue应用的概念中，“组合式函数”(Composables)是一个利用Vue的组合式API来封装和复用有状态逻辑的函数。一个简单的例子是跟踪当前鼠标在页面中的位置。在实际应用中，也可能是像触摸手势或与数据库的
王大可996·2024-02-03 20:14

Vue3的 组件事件

目录介绍触发与监听事件事件参数声明触发的事件事件校验总结介绍Vue3是Vue框架的最新版本，其中对组件事件进行了一些改进和优化。组件事件是Vue中一种常用的通信机制，用于在组件之间传递数据或触发动作。
跟Bug双向奔赴·2024-02-03 20:13

前端框架搭建——从零到一搭建一个高颜值Vue3后台管理系统(三)

上一篇我们集成项目所需要的插件，在整个main.ts里的结构都抽离到了各自相应的文件中，使整体main的结构看起来更加简介明了。今天我们讲下项目页面的布局布局分析分析我们页面的布局，主要是比较常见的左右结构布局，这在后台管理系统中是很常见的布局。当然也有其他的布局，在我们这次的项目里没有其它类型，但你可以自己添加，这里提供一种思路首先在页面提供component这个动态组件，我们设置不同类型的布局
聪明的竹子·2024-02-03 20:07

一篇文章认识Vue3

Vue3介绍Vue3于2022年2月7日星期一成为新的默认版本！Vue3性能更高，体积更小Vue3在经过一年的迭代后，越来越好用。
聪明的竹子·2024-02-03 20:37

Relation-graph关系图/流程图，VUE项目基础使用

一、Relation-graph是支持Vue2、Vue3、React的关系数据展示组件，支持通过【插槽】让使用者使用"普通HTML元素、Vue组件、React组件"来完全自定义图形元素，并提供实用的API
和世界不一样，那就不一样！·2024-02-03 20:07

前端-relation-graph实现关系数据展示（关系图/流程图）

relation-graph-ARelationshipGraphComponenthttps://www.relation-graph.com/3.选择relation-graph的理由4.项目中引用relation-graph4.1下载命令4.2在Vue2中使用4.3在Vue3
作业应急宝·2024-02-03 20:07

::v-deep和/deep/和＞＞＞ 区别

某个深层元素（eg:.el-input__inner）或其他深层样式时，需要使用/deep/，如.conBox/deep/.el-input__inner{padding:010px;}注意，/deep/在vue3.0
Musclewl·2024-02-03 19:51

Vue3学习记录（一）--- 组合式API之基础概念和变量声明

一、组合式API基础1、简介组合式API(CompositionAPI)是Vue3和Vue2的v2.7之后版本中的全新特性，是一系列API的的集合（响应式API、生命周期钩子、依赖注入等等），其风格是基于函数的组合
努力的小朱同学·2024-02-03 19:42

【Vue】3-1、Vue 3 简介

一、Vue3的优势Vue2OptionsAPI的缺陷：一个功能往往需要在不同的vue配置项中定义属性和方法，比较分散，需求简单还好，清晰明了；但是需求复杂之后，就会多出watch，computed，inject
QX_Java_Learner·2024-02-03 19:11

【Vue】3-2、组合式 API

最后return，才能在模板中使用*4、可以通过setup语法糖简化代码*/setup(){//console.log('setupfunction',this)//数据constmsg='HelloVue3
QX_Java_Learner·2024-02-03 19:11

【Vue】3-3、Vue 3.3 新特性 & Pinia

一、Vue3.3新特性1、defineOptions有之前，如果要定义props，emits可以轻而易举地添加一个与setup平级的属性但是用了后，就没法这么干了，setup属性已经没有了，自然没法添加与其平级的属性为了解决这一问题
QX_Java_Learner·2024-02-03 19:11

Vue3学习记录（二）--- 组合式API之计算属性和侦听器

一、计算属性1、简介计算属性computed()，用于根据依赖的响应式变量的变化，进行自动的计算，并返回计算后的结果。当依赖的响应式变量发生变化时，computed()会自动进行重新计算，并返回最新的计算结果。如果依赖的响应式变量没有发生变化，则computed()会将计算的结果进行缓存，后续再调用时，将会返回缓存的计算结果，而不会重新计算。2、使用基础用法：computed()方法期望接收一个g
努力的小朱同学·2024-02-03 19:08

【vue3.0】26.0 某东到家（ 廿六）——不同设备适配和项目上线

不同设备适配目前是针对普通手机的屏幕尺寸设计，如果需要适配比如平板电脑，等比例放大，需要进行设备配置。修改public\index.html只需要在title后面增加如下代码：//设备屏幕的宽度varwidth=document.documentElement.clientWidth||document.body.clientWidthvarratio=width/375varfontSize=1
bobokaka·2024-02-03 18:15

vue3.0项目启动“npm run dev”报错：error when starting dev server:Error: Cannot find module ‘node:path‘ .....

vue3.0项目，必须安装node版本等于或者大于15.0.0版本；#安装依赖npminstall--registry=https://registry.npmmirror.com#启动服务npmrundev
至尊宝♬·2024-02-03 17:45

初识vue3

文章目录1.Vue3的好处2.create-vue搭建vue3项目3.项目目录和关键文件4.组合式API-setup选项5.组合式API-reactive和ref函数①reactive②ref()6.组合式
W`hite·2024-02-03 15:54

#10外部网页跳转vue3+SpringMVC解码GBK编码的参数

目录1、背景2、失败尝试之iconv-lite2.1、安装和使用2.2、遇到的问题2.3、解决方案(vite-plugin-node-polyfills)2.4、测试3、成功尝试3.1、前端参数读取方式3.2、后端解码1、背景外部jsp页面中编码方式为GBK，跳转到vue页面时如果使用decodeURIComponent或者decodeURI均不可成功解码，因为这两个方法解码时使用的是UTF-8。
wbzybfa·2024-02-03 15:28

Vue3入门到实战笔记02

9.watch作用：监视数据的变化（和Vue2中的watch作用一致）特点：Vue3中的watch只能监视以下四种数据：ref定义的数据。reactive定义的数据。
jxncxgx·2024-02-03 14:30

Vue3入门到实战笔记01

基于Vite创建Vue3工程一、创建Vue3工程npmcreatevite@latest按照提示创建项目cdvue3study进入所创建的项目目录npminstall安装项目需要的依赖包npmrundev
jxncxgx·2024-02-03 14:00

Vite与Vue-cli的区别和特点

目录前言1.如何使用Vite和Vue-cli创建vue3.0项目2.Vite与Vue-cli的特点3.Vite与Vue-cli之间的区别总结前言Vite是创建vue3.0时的一个基本项目脚手架和开发服务器的构建工具
程序员--韩同学·2024-02-03 12:40

七.Vue3.x中使用Axios请求远程真实Api接口数据

https://github.com/axios/axios1、安装npminstallaxios--save或者yarnaddaxios或者cnpminstallaxios--save2、引入使用importAxiosfrom"axios";axios.get('/user?ID=12345').then(function(response){//handlesuccessconsole.log
小柠有点萌·2024-02-03 11:45

Electron+Vue3+Vite的产品级模板项目

1.electron-vue3-template基于Vue3+Electron+TypeScript的客户端程序模板，使用Vite和ElectronForge构建和打包。
china_jeffery·2024-02-03 10:52

vue3 markdown编辑器推荐（maven-editor & vditor & tiptap ）

最近项目需要用到markdown编辑器，使用了三种maven-editor(http://www.mavoneditor.com/?spm=a2c6h.12873639.article-detail.9.aaad62affAKmTV)vditor(https://b3log.org/vditor/demo/index.html?utm_source=ld246.com)tiptap(https:/
yggjdle·2024-02-03 10:33

Element Plus修改表格行、单元格样式

(Vue3)consttableData=[{name:"clz",age:21,job:"Coder",},{name:"czh",age:21,job:"Coder",},{name:"赤蓝紫",age
梅花十三儿·2024-02-03 10:59

【Vue3】vue组件生命周期总结

vue3官网生命周期生命周期vue组件实例的生命周期一般是从创建、挂载到卸载销毁；在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。图示：图片来自于vue3官网。
ZSK6·2024-02-03 09:03

【vue3】vue3源码探索之旅：compiler-core（一）

简言compiler-core包是vue3源码代码编译的核心代码包，且与平台无关，这个包主要功能是将代码解析成ast、然后转换成codegenNode对象、再编译生成可执行代码（render渲染函数）。
ZSK6·2024-02-03 09:33

【Vue3】组件props的使用

简言Props是一种特别的attributes，你需要在组件上声明注册，然后才能识别成props,而不是普通的attributes。本篇主要讲解props的用法，以及传递后的porps值如何保持其响应性。Propsprops声明如果一个prop的名字很长，应使用camelCase形式，因为它们是合法的JavaScript标识符，可以直接在模板的表达式中使用，也可以避免在作为属性key名时必须加上引
ZSK6·2024-02-03 09:03

【Vue3】源码探索之旅：compiler-core之parseChildren函数（二）

简言parseChildren函数是在baseParse函数中作为createRoot函数的子节点参数传入的，今天来探索下parseChildren函数。parseChildren在compiler-core/src/parse.ts文件内。parseChildren这个函数就是用来解析模板字符串内容的，里面有个while循环以栈的形式不断读取模板字符串进行解析，直到解析完毕，然后进行空白处理并返
ZSK6·2024-02-03 09:26

vue3 vuedraggable draggable element must have an item slot

vue3+vite看官网使用这种{{element.name}}实战可看这篇
Roottt_·2024-02-03 09:54

从零开始使用Konva，画图并绑定节点。

实战可行，vue3+vite+ts实现实现电子地图，左侧列表可拖拽绑定地图可绑定点设备坐标安装npminstallkonva插件引入importKonvafrom'konva'importKonvafrom'konva'import
Roottt_·2024-02-03 09:53

vue-3d-loader vue实现3d模型展示（vue2）

官方文档:快速上手|Vue3dloader(king2088.github.io)（注意：看清版本vue3跟2使用版本不同）1.下载npmivue3[email protected].引入1.全局引入importvue3dLoaderfrom"vue
只玩辅助啊·2024-02-03 09:08

vue-3d-loader

VueJSandthreeJS3dviewer是对vue-3d-model的改进，降低Threejs使用难度#默认安装"vue-3d-loader":"^1.3.4",只支持vue2npmivue-3d-loader#vue3
dragonzoebai·2024-02-03 09:04

vue3.0 Composition API上手体验

vue3.0CompositionAPI上手体验vue3.0对比vue2.0优势vue3.0相比vue2.0性能提升了近50%，框架内部做了大量性能优化，包括：虚拟dom，编译模板，Proxy的新数据监听
廊坊吴彦祖·2024-02-03 08:57

Vue3.0（一）：Vue的引入-options api-模板语法

Vue的引入方式CDN方式进行引入将以下script标签引入即可Document//使用Vueconstapp=Vue.createApp({template:`hello`,});//挂载app.mount("#app");本地引入可以将CDN中地址中的代码，拷贝到一个vue.js文件中之后引入该js文件即可命令式编程和声明式编程的区别以上案例是实现了一个计数器的功能左边是Vue实现右边是原生实
前端大菜鸟_·2024-02-03 08:55

Vue3中ref和reactive的用法和区别

目录两者的区别：原理角度对比：使⽤角度对⽐：用法实例：实例：Vue2中我们通常将响应式数据放在data中，再Vue3中提供了组合式API的写法，即数据和方法写在一起，便于维护。
浮生若梦777·2024-02-03 08:14

nvm-windows的安装和配置

下载安装nvm-setup.zip用于切换node版本，旧项目用的是14版本，vue3需要的node版本要高些,所以运行vue3项目前需要用nvm切换node的版本先。
www666_·2024-02-03 07:04

vite+vue3发布自己的npm组件+工具函数

记录一下个人最近一次发布npm组件的过程：一、创建组件和工具函数执行命令创建一个空项目：npmcreatevite创建过程稍微有些慢，不知何故？其中选择vue,个人暂时使用的JS。在src目录下面创建一个文件package存放组件和公共的JS方法案例中table是放组件的，utils是放方法的。table组件里面的主要内容就是个人业务组件，随便写点结果：{{MyValue}}测试按钮import{
well2049·2024-02-03 07:34

npm WARN deprecated [email protected]: Please upgrade to version 7 or higher

当使用npm下载vue3-lazy时出现一下错误时的解决方案报错：[email protected]:Pleaseupgradetoversion7orhigher尝试使用过一下命令更新
黎明寄波澜*·2024-02-03 06:30

vue3 微信扫码登录及获取个人信息实现的三种方法

一、流程：微信提供的扫码方式有两种,分别是:跳转二维码扫描页面内嵌式二维码根据文档我们可以知道关于扫码授权的模式整体流程为:1.第三方发起微信授权登录请求，微信用户允许授权第三方应用后，微信会拉起应用或重定向到第三方网站，并且带上授权临时票据code参数；2.通过code参数加上AppID和AppSecret等，通过API换取access_token；3.通过access_token进行接口调用，
@卓越俊逸_角立杰出@·2024-02-03 06:15

Vue3+TS+Vite+Pinia学习总结

VUE3介绍vue2和vue3之间的区别因为需要遍历data对象上所有属性，所以如果data对象属性结构嵌套很深，就会存在性能问题。
天生我材必有用_吴用·2024-02-03 06:07

【Vue3+Vite】Vue3视图渲染技术 快速学习 第二期

文章目录一、模版语法1.1插值表达式和文本渲染1.1.1插值表达式语法1.1.2文本渲染语法1.2Attribute属性渲染1.3事件的绑定二、响应式基础2.1响应式需求案例2.2响应式实现关键字ref2.3响应式实现关键字reactive2.4扩展响应式关键字toRefs和toRef三、条件和列表渲染3.1条件渲染3.2列表渲染四、双向绑定五、数据监听器一、模版语法Vue使用一种基于HTML的模
道格维克·2024-02-03 06:16

vue3+vite+vue-router4.x实现动态添加路由

实现内容：1.根据后台返回的菜单，前端实现动态添加路由；2.解决刷新页面时，路由消失/页面空白的问题；第一步：请求后台，返回菜单数据【内容如下】//后台返回的菜单数据this.menuList=[{id:1,path:'/home',name:'首页',icon:true,children:[],component:'/home/home'},{id:12,path:'/pinia',name:'
listener_life·2024-02-03 06:46

【Vue3+Vite】路由机制router 快速学习 第四期

文章目录路由简介路由是什么路由的作用一、路由入门案例1.创建项目导入路由依赖2.准备页面和组件3.准备路由配置4.main.js引入router配置二、路由重定向三、编程式路由(useRouter)四、路由传参(useRoute)五、路由守卫总结路由简介路由是什么路由就是根据不同的URL地址展示不同的内容或页面。页面切换路由的作用单页应用程序（SPA）中，路由可以实现不同视图之间的无刷新切换，提升
道格维克·2024-02-03 06:43

Vue3快速上手

一、创建Vue3.0工程1.使用vue-cli创建官方文档：https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create##查看@vue
吃一口你的梦。·2024-02-03 05:53

vue3项目中数字滚动效果

前言：目前大多数新的vue项目都采用了vue3去写，在最近的项目中，需要展示数字滚动的效果，我就想到了之前用多的vue-count-to数字滚动插件，发现这个插件只使用于vue2项目，在vue3项目中并不试用
张不大了·2024-02-03 05:17

利用VUE3生成二维码（两种方式）

vue有两种生成二维码的方式，qrcode、vue-qr（有icon）1、qrcodenpm``install``--saveqrcodejs2//所需页面导入importQRCodefrom'qrcodejs2'import{onMounted,ref}from'vueimportQRCodefrom'qrcodejs2'constqrCodeUrl=ref(null)constcreatQrC
小猫瘦瘦·2024-02-03 04:21

VUE3+TS使用OpenSeadragon学习之旅，实现多图片切换效果

1.官方网站：OpenSeadragon2.使用npm下载插件：npminstallopenseadragon3.在index.html文件引入资源4.组件使用（一张图片显示效果）1.引入OpenSeadragonimportOpenSeadragonfrom"openseadragon"2.存放图片的标签3.初始化实例constviewer=OpenSeadragon({id:"opensead
小猫瘦瘦·2024-02-03 04:51

vue3项目创建权限问题解决以及淘宝镜像过期解决

设备是：MacBook并非Windows环境近期使用vite创建vue3项目，发现要么一直卡着要么失败。用命令行创建也是一直卡着。
伊昂呀·2024-02-02 23:00
上一页 15 16 17 18 19 20 21 22 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他