vue3随手记第61页

vue3中使用 lodash 中防抖函数

1.引入lodashnpmi--savelodash2.导入lodash这里是全部导入引用里面的debounceimport{debounce}from"lodash";3.使用//调用鲁大师防抖函数code不能使用箭头函数，consta=debounce(code,600)functioncode(){console.log('@@@@@@@@@@@',);clearInterval(timer

成熟的麦芽糖·2023-12-31 22:49

实现一个可左右滑动操作的vue3组件

为了实现左右滑动能够切换页面，便有了做成组件的想法。代码实现监听touchstart，记录开始位置。监听touchmove，记录移动的位置，计算移动的方向，再把值设置给translateX（计算结果的值要能够跟随手指移动），加入锁定方向，是为禁止斜方向滑动。监听touchend，在这里判断是否触发change事件。import{ref}from"vue";constprops=defineProp

蚂蚁二娘·2023-12-31 21:31

宝塔部署node后使用pm2管理上传文件路径失效问题

node上传文件+vue3+elementPlus组件封装在本地或者以宝塔终端的形式允许上传后是没问题的，直接默认对multer直接写入路径就可以了constmulter=require('multer

奥特曼　·2023-12-31 21:26

解决vue3警告`markRaw` or using `shallowRef` instead of `ref`

1.在看到这个问题的时候，当前正在写的组件内使用的api错误了，然后把api换成了警告中的api发现还是不对，然后又把当前编辑的页面所有东西都注释了还是报警告，所以由此推断不是当前的页面api使用出的问题。2.然后找像了外层，外层就是路由，而且是动态路由这个提示就是报给动态路由的错误的3.解决：再使用动态路由添加component组件的时候不能直接使用引入的Layout组件，需要再Layout外层

BarryKerrigan·2023-12-31 21:55

vue3+element plus树穿梭框

HTML{{leftTit||'左侧栏'}}{{rightTit||'右侧栏'}}穿梭框控制逻辑import{ref,nextTick,defineExpose}from'vue'import{Right,Back}from'@element-plus/icons-vue';constprops=defineProps({nodeKey:String,fromData:Array,toData:A

BarryKerrigan·2023-12-31 21:25

Vue3 中的虚拟DOM、 h() 函数，渲染函数，渲染器知识点一网打尽！

在Vue3中，框架的渲染器会将渲染函数返回的虚拟DOM节点渲染成真实DOM节点，数据流动实例如下：虚拟

陈宜栋·2023-12-31 21:51

图片预览 element-plus 带页码

vue3、element-plus项目中，点击预览图片，并显示页码效果如图安装|ElementPlus{{imgCur}}/{{imgListArr.length}}//预览图片的数组constimgListArr

闲来无事垂钓·2023-12-31 21:46

在vue3中如何使用pinia

在Vue3中，可以使用Pinia来管理应用程序的状态。Pinia是一个基于Vue3的状态管理库，它提供了一种简单、直观的方式来组织和共享应用程序的状态。

开心点啦.·2023-12-31 21:44

距离预产期两周

回想从怀孕到现在一路走来，确实还是有挺多想记录下来的东西，就随手记一下吧！我怀孕这件事情来得比较意外，当时，我的大宝才八个月，还在吃母乳。那时候奶水就突然少了，大宝都不够吃。

安静的果酱·2023-12-31 20:09

Taro +vue3 中跳转页面如何带一个数组或者对象进入下一个页面解码或者编码

1.需求在我开发H5的过程中发现有些接口后端的接口提供不了或者其他的原因发现一些详情的页面我没有接口数据获取不到需要用到的是那种列表数据所以只能用跳转的方式实现这个功能.2.Taro.nagivate()跳转:Taro.navigateTo({url:`/pages/order-detail/index?info=${encodeURIComponent(JSON.stringify(info.v

一只小阿乐·2023-12-31 20:47

Loading 加载 Taro + vue3 自定义组件的封装和分页优化

1.需求当需要实现一个组件上拉加载的组件我们可以选择某些组件库的组件。但是有的组件没有这个组件，比如跟Taro框架配套的京东nut-ui组件库没有提供这个功能,2.Loading组件①封装=total&&tipFlag">没有更多数据了呢~正在加载中...import{ref,toRefs}from"vue";constprops=defineProps({page:Number,//接受页数to

一只小阿乐·2023-12-31 19:45

vue-cli创建带router的项目，并且引入Element UI

首先强调，创建vue-cli项目的前提是必须要安装node.js文件，否则无法安装，vue的版本过高会有一些问题，比如在win7的系统无法运行vue3，亲测第一步，找到你要创建项目的文件夹，按图示输入cmd

又铉·2023-12-31 19:52

Vue 2 将于 12 月 31 日到达生命周期终点

随着Vue3及其生态系统的成熟，团队决定继续前进，将我们的精力集中在最新的主要版本上

EternalChronosTime·2023-12-31 19:24

vue3-回顾之，状态管理神器大菠萝- pinia

1.使用piniapnpmipinia2.按照工程化目录创建storeimport{defineStore}from'pinia';interfacestu{name:string,age:number}constuserNumStore=defineStore('numStore',{//选项apiactions:{add(val:number){this.num=this.num+val}},

江南一舟110·2023-12-31 17:16

菜鸟学习vue3笔记-vue3 router回顾

1、路由routerpnpmivue-router2、创建使用环境1.src下创建router文件夹、里面创建index.ts文件//创建一个路由暴露出去//1.引入createRouterimport{createRouter,createWebHistory}from"vue-router";//importHomefrom'../components/Home.vue'//importGoo

江南一舟110·2023-12-31 17:15

菜鸟学习vue3笔记-vue hooks初体验

import{ref}from"vue";exportdefaultfunction(){leta1=ref(1);leta2=ref(5);letc=ref(0);functionadd(){a1.value++;a2.value++;}return{add,a1,a2,c,};}第一个数字{{a1}}第二个数字{{a2}}点击求和importuseNumfrom"@/hooks/useNum"

江南一舟110·2023-12-31 17:44

Vue3前端异步方法调用的执行顺序问题

在下面的节点单击事件方法中调用了getSheetNum()这个方法，由于这个方法每触发一次就向后台传参查询一次，所以每次执行顺序/**节点单击事件*/functionhandleNodeClick(data){letcascadeIds=data.cascadeIds.split("-");sheetNumbers.value=null;queryParams.value.domainName=n

wewowe1·2023-12-31 17:42

掌握 Vue 3：轻松注册插件的终极指南

在Vue3中注册插件通常是通过使用应用实例的app.use()方法完成的。以下是注册插件的基本步骤：1、首先，确保你有一个Vue应用

诸葛妙计·2023-12-31 16:39

Vue3 魔法：轻松删除响应式对象的属性

在Vue3中，要删除一个响应式对象的属性并保持响应性，我们需要使用Vue提供的reactive和toRefs函数来创建响应式对象，以

诸葛妙计·2023-12-31 16:39

Vue3 精通指南：如何在 setup 函数中巧妙利用 Vuex

在Vue3中，如果你使用了组合式API（CompositionAPI），你可以通过setup函数来设置组件的响应式状态和逻辑。

诸葛妙计·2023-12-31 16:38

vue3全网最全教程-----(4)

目录6.组件通信6.1.【props】6.2.【自定义事件】6.3.【mitt】6.4.【v-model】6.5.【$attrs】6.6.【refs、parent】6.7.【provide、inject】6.8.【pinia】6.9.【slot】1.默认插槽2.具名插槽3.作用域插槽7.其它API7.1.【shallowRef与shallowReactive】shallowRefshallowRe

前端贾公子·2023-12-31 15:04

vue3全网最全教程-----(2)

【watch】作用：监视数据的变化（和Vue2中的watch作用一致）特点：Vue3中的watch只能监视以下四种数据：ref定义的数据。reactive定义的数据。函数返回一个值（gett

前端贾公子·2023-12-31 15:34

vue3 key Attribute 的变化

keyAttribute为啥VUE3key的可以写在Tempalevue3中的key属性可以在模板中直接使用的原因是Vue3对模板编译进行了优化，使得模板中的静态节点可以被标记并跳过不必要的更新操作。

前端贾公子·2023-12-31 15:34

vue3全网最全教程-----(3)

目录4.路由4.1.【对路由的理解】4.2.【基本切换效果】4.3.【两个注意点】4.4.【路由器工作模式】4.5.【to的两种写法】4.6.【命名路由】4.7.【嵌套路由】4.8.【路由传参】query参数params参数4.9.【路由的props配置】4.10.【replace属性】4.11.【编程式导航】4.12.【重定向】5.pinia5.1【准备一个效果】5.2【搭建pinia环境】5.

前端贾公子·2023-12-31 15:58

vue3 专用 indexedDB 封装库，基于Promise告别回调地狱

IndexedDB的官网https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API这个大概是官网吧，原始是英文的，现在陆续是出中文版。有空的话还是多看看官网。简介IndexedDB是一种底层API，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象（blobs））。该API可以使用索引实现对数据的高性能搜索。简单的说就是—

自然框架·2023-12-31 13:09

vue3 父传子子传父

父传子importindex1from'./view/index.vue'import{ref}from'vue'letmoney=ref(1000000000000)#app{width:100vw;height:100vh;color:#000;padding:50px;box-sizing:border-box;}子组件1{{money}}元import{ref}from'vue'//por

只会安静敲代码的小周·2023-12-31 12:29

VUE3 之 click 事件

言归正传，今天我们来聊聊VUE3的click事件的相关知识。

追风人聊Java·2023-12-31 12:57

redis随手记

1、redis快的原因：一方面，是因为他是内存数据库，所有操作都在内存上完成，内存的访问速度本身就很快。另一方面是由于它的数据结构。2、redis数据类型：String、List、Hash、Set、SortedSet3、redis底层数据结构：简单动态字符串、双向链表、压缩列表、哈希表、跳表、整数数组4、数据结构的时间复杂度：哈希表O(1)，跳表O(logN)，双向链表O(N)，压缩列表O(N)，

垃圾程序媛·2023-12-31 11:43

【Vue3】黑马程序员 SpringBoot3+Vue3 大事件项目中 P92 抽屉样式 `:deep() Term expected` 报错的解决方法

这个报错其实不影响运行，但有些有强迫症的同学可能会很难受，以下是解决方法：报错代码：:deep(){.avatar{width:178px;height:178px;display:block;}.el-upload{border:1pxdashedvar(--el-border-color);border-radius:6px;cursor:pointer;position:relative;o

小秀_heo·2023-12-31 11:35

【Vue3】请求参数

1.x-www-form-urlencoded请求方式：POSTname=John&age=25exportconstuserRegisterService=(registerData)=>{//直接传入会是json格式//URLSearchParams将json格式转为x-www-form-urlencoded格式constparams=newURLSearchParams();for(letr

小秀_heo·2023-12-31 11:02

Vue3 源码解析（九）：setup 揭秘与 expose 的妙用

在前几篇文章中我们一起学习了Vue3中新颖的CompositionAPI，而今天笔者要带大家一起看一下Vue3中的另一个新鲜的写法——setup。

Originalee·2023-12-31 10:25

SpringBoot+SpringSecurity+MybatisPlus+Vue3小项目摘录(七)

文章目录路由处理（路由守卫）在router目录下新建一个permission.js文件需要在main.js中引用即可动态路由的实现如下图所示:实现步骤：在layout/index.vue中添加路由显示并在store/index.js文件中进行单页处理查看菜单表sys_menu的数据在view目录下新建对应的路径以及组件修改router/permission.js文件内容最后在router/inde

许锅锅啊·2023-12-31 08:56

SpringBoot+SpringSecurity+MybatisPlus+Vue3小项目摘录

文章目录SpringBoot+SpringSecurity+MybatisPlus后台框架搭建一、项目搭建准备基本的设置二、重要的代码标示：数据库相关建表语句sqlpom.xml依赖坐标文件application.yml文件安装好MybatisX插件通过插件生成代码按照序号依次点击即可最后看一下生成的项目结构编写控制器进行测试启动服务测试:通用结果集编写(自行扩展也是也可以的哈！！！)Vue的基础

许锅锅啊·2023-12-31 08:55

SpringBoot+SpringSecurity+MybatisPlus+Vue3小项目摘录(五)

文章目录获取用户角色权限信息实现用户角色权限的sql初始化语句5张数据表的如下：通过MybatisX插件将对应的模块的三层接口生成面向对象思想编程基类对象BaseEntity的创建编写时间对象CustomDateTimeSerializer进行解析处理（时间需要进行处理)最后在几个实体对象中先继承自BaseEntity，并将对象中的几个重复属性进行注释或者删除即可修改自定义登录逻辑中的获取权限信息

许锅锅啊·2023-12-31 08:25

SpringBoot+SpringSecurity+MybatisPlus+Vue3小项目摘录(四)

文章目录关联数据库实现登录在common包下新建自定义的用户登录实现类service层的变化:自定义异常进行统一处理【自定义异常】（新建子包exception处理器）在Security的配置类中添加如下代码：前端登录的测试：①、输入错误时②、输入正确时③、输入正确【但是账户未激活时】JWT认证过滤器实现前端中修改登录成功的跳转①、新建layout目录并新建index.vue【带有布局的首页】②、后

许锅锅啊·2023-12-31 08:25

SpringBoot+SpringSecurity+MybatisPlus+Vue3小项目摘录(二)

文章目录SpringSecurity框架引入以及几个常用工具类几个常用的工具类介绍jwt相关1）最常使用的JWT这种方案有一些缺点：JWT正好可以解决这些问题：可以看出JWT以不同颜色区分，两个小数点隔开，分为了三部分：也可以参考hutool.com中的工具类哦我之前已经封装过一些工具了类，在这里就直接拿来使用了JWT的工具类：String常用字符串操作的工具类:后台跨域处理的配置类:编写基本的请

许锅锅啊·2023-12-31 08:24

SpringBoot集成Vue3实现的系统(三)

学习目标：SpringBoot集成Vue3实现的系统(三)小内容完结篇提示：SpringBoot2与Vue3的小练习图文摘录(三)例如：三篇文章带你更熟悉掌握前后端分离的基本实现新闻模块化操作在后台的很多实际应用中都存在这很多的内容编辑的处理

许锅锅啊·2023-12-31 08:54

SpringBoot集成Vue3实现的系统(二)

学习目标：SpringBoot集成Vue3实现的系统(二)提示：SpringBoot2与Vue3的小练习图文摘录（二）例如：三篇文章带你更熟悉掌握前后端分离的基本实现用户信息的批量删除在表格中添加一列并设置其

许锅锅啊·2023-12-31 08:53

SpringBoot集成Vue3实现的系统(一)

学习目标：SpringBoot2+Vue3+MP图文摘录（一）提示：SpringBoot2与Vue3的小练习图文摘录高能提示：三篇文章带你更熟悉掌握前后端分离的基本实现一、vue的基本环境搭建新建项目vue3

许锅锅啊·2023-12-31 08:53

SpringBoot+SpringSecurity+MybatisPlus+Vue3小项目摘录(六)

文章目录后台主界面搭建页面可以直接参考elementPlus中的布局容器实现编写index.vuehtml代码css样式代码预览效果如下:每个vue视图中的内容都是相同的在lauout/index.vue中进行引入组件tabs/index.vue组件的内容如下:footer/index.vue组件的内容如下:左侧动态权限菜单的实现1、登录成功之后在后台动态的查询该用户的权限信息修改LoginSuc

许锅锅啊·2023-12-31 08:17

vue3引入百度地图（两种方法）

首先要有百度开放平台并进行注册，不懂看这里###第一种方法地图引入流程安装vue-baidu-map-3x插件参考官网地址：快速上手|vue-baidu-map-3xnpminstallvue-baidu-map-3x--save在public/index.html文件中引入创建vue文件，编写如下元素布局{{address}}message.success('定位成功已切换到'+e.addres

@tg6666666666666·2023-12-31 07:09

Vue3使用WangEditor编辑器

WangEditor的基本使用，图片上传功能没详细讲解，只是做个记录。Componets下定义WangEditor.vue文件import{defineProps,computed,shallowRef,defineEmits}from'vue'import{Editor,Toolbar}from'@wangeditor/editor-for-vue'importCookiesfrom'js-co

会编码的派大星·2023-12-31 07:49

[Vue warn]: injection “Symbol(router)“ not found.

[Vuewarn]:injection“Symbol(router)”notfound.当前问题vue3，使用路由的时候报错main.ts:8[Vuewarn]:injection“Symbol(router

.徐十三.·2023-12-31 07:43

vue3 ts 使用 Ant Design Vue 全局引入 icons

import{createApp}from'vue'importAppfrom'./App.vue'importrouterfrom'./router'importstorefrom'./store'importAntdfrom'ant-design-vue'//导入所有图标库import*asIconsfrom"@ant-design/icons-vue";importtype{Componen

该用户已成仙·2023-12-31 06:01

vite 创建vue3项目（vue-router、vuex、scss、环境变量、selint、stylelint、normalize.css）

目录一.创建基础vue项目二.安装vue-router三.设置路径别名@四.vuex五.SCSS六.环境变量七.eslint八.stylelint九.normalize.css一.创建基础vue项目npminitvite----templatevue选择vue->vue-ts进入目录运行npmruninstall与npmrundev便可运行二.安装vue-routernpminstallvue-r

该用户已成仙·2023-12-31 06:30

复盘2018 展望2019

一、2018年的得与失1.收获①学会思考这一年72%的天数里，早起自省、思考1h左右，并随手记录在读书笔记中，思考清楚后整理成文章发布到网上，已经成文55篇，加上未整理的部分，估计共有15万字左右。

刘国涛耐火·2023-12-31 05:12

node: /lib64/libm.so.6: version `GLIBC_2.27‘ not found

node:/lib64/libm.so.6:version`GLIBC_2.27‘notfound1.背景说明2.原因3.解决方法4.打包镜像5.参考1.背景说明为了适配vue3，发布前端项目的jenkins

山巅·2023-12-31 05:05

Vue3中实现聊天室界面滚动条默认滑动到最底部

1、背景：实现一个类似于chatGpt的聊天界面，左侧具有创建会话以及聊天记录列表界面，如图：2、需求：用户单击左侧聊天记录列表，以及新发送消息，右侧会话历史滚动条需要实时保持在聊天记录最底部,并且当用户滚动滚动条时，取消滚动到底部的效果（避免页面抖动），当用户再次将滚动条滚动到底部时，再次触发滚动到底部效果//通过class绑定会话容器.height{height:800px;}3、只需要封装方

₍•ʚ•₎呀呀·2023-12-31 01:26

推荐频道

vue3随手记