vue3随手记第62页

创建vue3数学符号选择器(vue3+elementPlus+ts)

本文包含两种效果：效果一：数学符号只能选择一次，选中的数学符号高亮效果二：相同的数学符号可以选择多次，当前选中的数学符号高亮首先创建math.ts定义常见数学符号数组:exportconstsymbols=[{id:1,value:'+',description:'加号'},{id:2,value:'-',description:'减号'},{id:3,value:'×',description:

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

Vue3路由缓存问题

问题场景点击菜单切换页面，由于所有子菜单用的同一个组件（只是渲染数据不同），所以组件不会重新渲染（复用），请求不会发送，数据也就不会更新产生原因路由只有参数变化时，会复用组件实例解决方案给router-view添加key，实现强制更新2.使用beforeRouteUpdate导航钩子（监听路由变化的函数）当路由变化时，将更新数据的函数放进去，只要路由发生变化就会调用函数更新数据方案对比对比两种方案

午安້໌ᮨ·2023-12-31 00:12

Vue3-30-路由-嵌套路由的基本使用

什么是嵌套路由嵌套路由：就是一个组件内部还希望展示其他的组件，使用嵌套的方式实现页面组件的渲染。就像根组件通过路由渲染普通组件一样，嵌套路由也是一样的道理。嵌套路由的相关关键配置1、标签声明被嵌套组件的渲染位置；2、路由配置表中使用children:[]来声明嵌套的子路由；3、子路由的path属性中不可以带/,否则无法匹配！4、嵌套路由可以无限嵌套。嵌套路由的语法格式{path:'/a',//父级

NorthCastle·2023-12-31 00:07

Vue3-29-路由-编程式导航的基本使用

补充一个知识点路由配置中的name属性：可以给你的路由指定name属性，称之为命名路由。这个name属性在编程式导航传参时有重要的作用。命名路由的写法如下：像指定path一样，直接指定一个name属性即可。{path:'/d',name:'dName',component:componentC}什么是编程式导航编程式导航是相对于标签的路由方式来讲的。的方式称之为声明式导航；编程式导航：就是在代码中

NorthCastle·2023-12-31 00:36

Vue3-31-路由-RouterView的name属性的作用

作用描述标签是用来渲染路由对应的组件的位置；默认情况下，一个路由是只对应一个组件的。但是，可以通过给指定name属性的方式，实现同时渲染多个组件的效果。这也叫做命名视图。注意点1、因为一个路由需要对应多个组件，所以在进行路由配置时需要使用components来代替component;2、在使用时指定name属性，不指定的，默认是default；3、components中使用key-value的形式

NorthCastle·2023-12-31 00:35

2020.4.7随手记及魔幻的2020一季度

今天发生了两件小事，挺有意思，随手记录如下。

老齐007·2023-12-30 22:14

CAMPUS 校园伙伴匹配系统完结啦

SUPER速配-伙伴匹配系统CAMPUS校园伙伴匹配系统项目介绍校园伙伴匹配（CAMPUS伙伴），一个前后端分离的用户匹配系统，前端使用Vite+Vue3+Vant4，后端使用SpringBoot+MyBatis-Plus

猫十二懿·2023-12-30 21:02

随手记

哄娃把自己给哄睡了，正要沉沉睡去，突然想起大宝不知道有没有盖被子。只好强迫自己醒来，一看，真没盖被子。盖好被子打算继续沉睡，又想起日更还没弄。哎…一边想着放弃，一边强迫自己醒来写。好吧，最终还是爬起来了。于是便有了这篇流水日记。（哈哈）还是扛不住睡神的召唤，我还是继续睡吧。晚安！

小雅_26a5·2023-12-30 21:14

复活卡让日更继续下去

为了让自己也记录下这个有意义的一天，随手记下一段简短的诗句来纪念这件事儿，没想到没满一百字还不算日更了，好吧️️️突然觉得日更也没有那么残酷

平行的逗号·2023-12-30 21:18

随手记

妈妈越时尚，孩子越自信；妈妈身材越好，孩子越骄傲；妈妈越有进取心，孩子越勤奋；妈妈越坚持自己，孩子越独立。

半夏微熏·2023-12-30 19:24

vue3项目中使用vite-plugin-svg-icons插件

png格式的图片可以合成精灵图，然后根据定位使用那么svg格式的图片，可以通过插件打包成svg地图，通过ID来使用，一次加载，动态使用，图片无需懒加载，参考官网插件安装yarnaddvite-plugin-svg-icons-D#ornpmivite-plugin-svg-icons-D#orpnpminstallvite-plugin-svg-icons-D在vite.config.ts文件中配

Eleven....·2023-12-30 18:23

vue3 v-model语法糖

count”和@input=“count=$event”xxx.sync语法糖完整写法:xxx=“msg”和@update:xxx=“msg=$event”现在：一个v-model指令搞定，不需要记忆两种语法vue3

Eleven....·2023-12-30 18:18

初识Sringboot3+vue3环境准备

环境准备后端环境准备下载JDK17https://www.oracle.com/java/technologies/downloads/#jdk17-windows安装就下一步下一步,选择安装路径配置环境环境JDK17+、IDEA2021+、maven3.5+、vscode后端基础：javaSE，javaWeb、JDBC、SMM框架（Spring+SpringMVC+MyBatis）、MyBati

QGS-CD·2023-12-30 17:26

vscode安装vue3环境

vscode官网（https://code.visualstudio.com/）下载安装vscode随便安装在哪个盘，安装完成后在插件中心安装VUE插件，搜索Chinese会出现中文插件，点击安装。安装完成后按下ctr+shift+p会出现搜索页面，搜索configuredisplaylanguage选择中文简体，重启vscode后就是中文显示了。然后再在插件中心搜索：volar（Vuelangu

小白想进阶·2023-12-30 16:18

在Vue3中实现前端导出Excel功能

本文主要介绍在Vue3中实现前端导出Excel功能。

专业研究祖传Bug编写术·2023-12-30 14:24

详解Vue3中的常见的监听事件submit、mouseenter和mouseleave

本文主要介绍Vue3中的常见的监听事件submit、mouseenter和mouseleave。

专业研究祖传Bug编写术·2023-12-30 14:20

详解Vue3中的事件监听方式

本文主要介绍Vue3中的事件监听方式。目录一、v-on指令二、使用@符号简写三、事件修饰符四、动态事件名五、常见的监听事件六、自定义事件在Vue3中，事件监听的方式与Vue2有一些不同。

专业研究祖传Bug编写术·2023-12-30 14:19

详解Vue3中的常见的监听事件click、input和change

本文主要介绍Vue3中的常见的监听事件click、input和change。

专业研究祖传Bug编写术·2023-12-30 14:19

在Vue3中实现发送网络请求功能

本文主要介绍在Vue3中实现发送网络请求功能。目录使用Axios实现使用fetch实现使用Axios实现在Vue3中，可以使用Axios来发送网络请求。

专业研究祖传Bug编写术·2023-12-30 14:15

VUE3实现点击按钮下载文件功能

VUE3实现点击按钮下载文件功能在写vue项目时，有个需求是点击表格中某一行的下载按钮，然后开始下载这一行对应的文件，效果如下：表格每行的最右侧的蓝色按钮就是点击下载，这里涉及到原生的JavaScript

栀椩·2023-12-30 14:40

【Vue3】Refused to frame ‘http://www.xxxxx.com/‘ because it violates the following Content Security

错误：在Vue内使用iframe标签然后引入了外部链接无法正常显示内容Refusedtoframe'http://xxxxxx/'becauseitviolatesthefollowingContentSecurityPolicydirective:"default-src'self'".Notethat'frame-src'wasnotexplicitlyset,so'default-src'i

春暖花开.,·2023-12-30 14:06

vue3中使用defineComponent封装hook实现模板复用

文章目录一、前言二、`useTemplate`实现三、最后一、前言最近在做Vue3项目的时候，在思考一个小问题，其实是每个人都做过的一个场景，很简单，看下方代码{[item.name}}今年已经{[item.age

小马甲丫·2023-12-30 14:51

Vue 2最终版本 v2.7.16 已发布

我们将见证一个时代的结束，从今以后Vue团队将全力以赴维护Vue3。让我们回顾一下Vue2的发展历程，以及最后一个版本的更新内容。Vue2的最后一个版本是一个具有里程碑意义的时刻。

南城FE·2023-12-30 12:59

Vue 发布 3.4 「灌篮高手」版本

本文翻译自AnnouncingVue3.4，作者：EvanYou，略有删改。今天我们很高兴地宣布Vue3.4灌篮高手版本发布！

南城FE·2023-12-30 12:25

之vue3后台管理中的大屏展示。

使用大屏展示的时候有很多种场景，众多场景都是为了实现大屏自适应。大屏，顾名思义，就是放在一个固定的屏幕上看的，即使你不做自适应，放在一个固定的屏幕上看也没啥问题，但是很多做大屏的是为了在PC端看，PC端屏幕又是参差不齐的，所以需要做自适应。方案一：使用transform的大小缩放来实现，我们先写一个缩放容器AutoScalContainer.vue，代码如下：/***自动缩放容器*使用transf

23朵毒蘑菇·2023-12-30 11:51

之二，vue3后台管理系统树形目录的实现。

一个完整的后台管理系统需要一个树形结构的目录，方便用户切换页面。因为使用的是element-plus的ui库，所以首选el-menu组件，点击查看文档。因为此组件不是树形结构的，所以需要封装成系统需要的树形结构组件。可以使用vue的递归组件。menu.vue代码如下import{defineComponent,ref,reactive,computed,onMounted,watch,toRef,

23朵毒蘑菇·2023-12-30 11:21

摸鱼摸出来的vue3+element-plus毒蘑菇后台管理：新标签页的实现。

在浏览器中，点击标签页右边的加号可以新加一个标签页，所以，在毒蘑菇后台管理（简称毒蘑菇儿）中也可以这样操作。点击标签页右边的+按钮就可以打开一个新标签页了，可以打开多个，互不冲突，在新标签页中可以搜索你想要打开的页面，点击后会将该标签页替换成你点击后的页面（跟浏览器操作一致）。点击正上方的搜索框或者alt+s同样也能打开新标签页。新标签页的页面权限需要在菜单权限数据源中配置，也可以内置几条数据固定

23朵毒蘑菇·2023-12-30 11:19

vue3常见知识点总结

vue3常见知识点一、认识vue3二、setup三、ref四、reactive五、reactive与ref的异同六、Vue2与Vue3的响应式七、计算属性与监视八、vue3的生命周期（与vue2比较）九

qy220824·2023-12-30 11:48

vue3中computed计算属性和watch监听的异同点

在Vue3中，computed和watch都是用于响应式地处理数据变化的工具，但它们有一些重要的异同点。异同点如下：计算属性(Computed):计算属性是基于它们的依赖进行缓存的。

咸虾米_·2023-12-30 11:46

vue3 element plus 自定义组件封装，多层双向绑定v-model

日常，我们可能对elementplus的组件进行进一步封装，而且可能是多层，那么要想实现双向绑定：显式:绑定属性，@绑定事件，事件中修改属性隐式v-model第一种无需多说，第二种简单示例，以Dialog组件示例直接使用Dialog.vue切换constvisible=ref(false)consthandleClick=()=>{visible.value=!visible.value;}一层封

无心使然云中漫步·2023-12-30 11:45

Electron Vue3 Typescript Vite使用typeorm操作SQLite

1，安装typeorm和sqlite3:npminstalltypeormnpminstallsqlite32,新建一个文件data-source.ts。import{DataSource}from'typeorm';import{User}from'../entity/User';import*aspathfrom'path';import{ItemData}from'../entity/Ite

靓仔建·2023-12-30 11:33

electron-builder 打包exe后白屏

项目用的是AnElectronapplicationwithVue3andTypeScript。Debug运行项目没问题，可以显示页面。

靓仔建·2023-12-30 11:00

vue3导入excel并解析excel数据渲染到表格中，纯前端实现。

需求用户将已有的excel上传到系统，并将excel数据同步到页面的表格中进行二次编辑，由于excel数据不是最终数据，只是批量的一个初始模板，后端不需要存储，所以该功能由前端独立完成。吐槽系统中文件上传下载预览三部曲走了一遍，万万没想到还要自己实现同步数据。实际反手各种资料开始查阅，终于找到了可以完美实现该需求的方法，来记录下我的实现方案。希望对有需要的小伙伴有帮助。注意以下为正文（重要内容），

亮晶晶的芋头·2023-12-30 11:41

使用swiper

贴上官网看官网的时候看到image.png于是屁颠颠去看在vue中使用Swiper6，按照例子一步步来，却发现一直出不来效果，最后看到上面这句话image.png害，一开头就强调了Swiper组件仅与vue3

我写的代码绝对没有问题·2023-12-30 10:32

日记‖随手记

这几天老是发呆，不知道是怎么了。[14：00]尽管说上大学了，但是跟老师打语音电话，还是慌的一批。上高中时，也都没那么紧张过。上大学得罪了老师的话，容易被穿小鞋，而且还没有办法。跟别的老师说还行，就是那个姓叶的班主任特别难说话，每次都要唯唯诺诺的跟她讲，实在是太难了。[22:26]每日分享人生得失看似随机，其实都是自己一手造成。与其为昨日的因自惩，不如为来日的果修行——《云中歌》桐华有时候我们认为

丛雨绫·2023-12-30 10:31

vite-ts-vue3笔记

vitenpmcreatevite@latestnpmrundev开始预览时使用模块是esmodule打包生产环境使用rollupwebpack基于nodevite基于原生module和rollupvite的基础配置根目录下的vite.config.jsimport{fileURLToPath,URL}from'node:url'import{defineConfig}from'vite'impo

苦逼的猿宝·2023-12-30 10:28

Vue3.2 自定义指令详解与实战

一、介绍在Vue3中，自定义指令为开发者提供了一种灵活的方式来扩展Vue的HTML模板语法，使其能够执行特定的DOM操作或组件逻辑。

晚风914·2023-12-30 09:58

Vue3父组件props数据更新后，子组件视图未及时响应更新

问题描述：在使用Vue3构建前端项目时，遇到了一个组件props数据更新后，子组件视图未及时响应更新的问题。

晚风914·2023-12-30 09:57

Vue3自定义指令与Composition API实现动态权限控制

Vue3作为新一代前端框架以其强大的性能优化、灵活且可复用的CompositionAPI以及对现代Web开发特性的深入支持，为一、项目背景与技术选型本次我们面临的是一项具有高度交互性和丰富业务逻辑的大型项目

晚风914·2023-12-30 09:54

vue3整合Element-Plus，极速上手。

条件分页查询：需求分析：form表单Button按钮Table表格Pagination分页页面布局：搜索表单：如果表单封装的数据较多，建议绑定到一个对象中。定义表单搜索接口：exportinterfaceSearchEmpModel{name:string,//姓名gender:string,//性别begin:string,//开始时间end:string,//结束时间date:string[]

烛.照103·2023-12-30 09:21

基于 Vue3 和 WebSocket 实现的简单网页聊天应用

首先附上项目介绍,后面详细解释技术细节1.chat-websocket一个基于Vue3和WebSocket的简易网络聊天室项目，包括服务端和客户端部分。

haostart_·2023-12-30 08:22

pinia--vue3中的状态管理

实际上，pinia就是Vuex的升级版，官网也说过，为了尊重原作者，所以取名pinia，而没有取名Vuex，所以大家可以直接将pinia比作为Vue3的Vuex。二、为什么要使用pinia？

张不大了·2023-12-30 07:49

Vue3 项目里面使用自己封装的 jsonp

由于vue-jsonp在vue3中测试不能用，有能用的包欢迎留言在网上找到一个有用的functionjsonp(setting){setting.data=setting.data||{}setting.key

_Rookie._·2023-12-30 06:41

vue3+ts+vite自定义组件上传npm流程

1.创建项目npmcreatevite这里踩坑点：运行vite生成的vue项目时报错“SyntaxError:Unexpectedtoken'??='at“是因为node版本过低电脑为windows11系统，我当时使用的版本node版本是14.21.3，如下图，后边安装了nvm版本管理，现在使用的node版本为16.20.1，运行项目正常2.写组件这里为个人组件内容breadcrumb/index

lyj168997·2023-12-30 06:26

electron项目模板：如何新建一个vue3+electron项目，并加入基础建设

整体思路1.使用npmcreatvite@latest创建一个vue3项目2.加入electron3.加入electron预加载脚本,并通过其进行electron和vue的交互a.在src同级目录建立preload

吃炸鸡的前端·2023-12-30 06:53

electron 项目第一篇 vite +vue3 搭建electron项目

vite+vue3搭建electron项目1使用vite创建vue3项目2安装electron依赖3嵌入electron3.1创建electron目录3.2配置electron插件3.3书写electron

倔强的钢蛋·2023-12-30 06:53

创建 vue3 + electron 项目

1.输入下面的代码，过程中输入y回车键等,第二步选择vuenpminitvite2.按顺序输入以下代码(readIt是我的文件名，改成对应的文件名即可)cdreadItnpminstallnpmrundev3.另起一个终端，cd到刚创建的文件中4.安装electron，我用的淘宝镜像安装的，没有可以把cnpm改成npm安装cnpmielectron-D查看package.json5.创建main.

我的账号昵称·2023-12-30 06:23

vue3+vite中使用vuex

1.第一种方式在main.ts中创建一个新的store实例import{createStore}from'vuex'//创建一个新的store实例conststore=createStore({state(){return{username:'张三'}},mutations:{changeName(state:any,us:string){state.username=us;}}})constap

程序员正茂·2023-12-30 05:46

vue3+vite组件中使用Cesium粒子系统

一、注意事项1.图片的引用路径必须从根目录（即index.html所在的目录）开始，如果使用相对路径，也要返回到根目录再转到对应的目录。//第一种，直接从根目录开始image:'src/assets/particles/BlowingSnow.png'//第二种，相对路径先返回到根目录，再转到对应目录image:'../../src/assets/particles/BlowingSnow.png

程序员正茂·2023-12-30 05:10

vue3+ts打开echarts的正确方式

实例项目使用vite5+vue3+ts，项目地址vite-vue3-charts，预览地址https://weizwz.com/vite-vue3-charts准备工作1.注册为百度地图开发者官网地址，

液态不合群·2023-12-30 01:55

推荐频道

vue3随手记