VUE学习记录第22页

登录逻辑前后端全流程(vue3 pinia nodejs)

简述输入用户名密码，post请求发给后端；如果登陆成功，后端用JWT创建并返回token，前端保存token（pinia&localstorage）。跳转任意页面之前，如果没有token（没登陆的情况）ORtoken过期的情况，都要跳转至login页面详细讲解（前端）点击登录后，后端返回token，前端存在pinia（仓库）中，同时localstorage保存（浏览器记录）。注意token是域名下

aPurpleBerry·2024-08-25 08:34

Vue.js 中的指令（Vue自定义指令）

Vue.js中的指令作用在Vue.js[1]中，指令是个非常重要的概念，它可以用来扩展Vue.js的功能，提供了丰富的指令来简化开发者的工作。

码农键盘上的梦·2024-08-25 06:28

前端实现截图（Vue）

以下是一个基本的实现步骤：1.安装html2canvas首先，你需要在项目中安装html2canvas：npminstallhtml2canvas2.创建截图功能在你的Vue组件中，你可以通过方法来实现截图功能

码农键盘上的梦·2024-08-25 06:57

047 v-if, v-else and v-else-if

示例index.htmlVueBasicsVueCourseGoalsMycoursegoalsAddGoalNogoalshavebeenaddedyet-pleasestartaddingsome!

黄健华Yeah·2024-08-25 04:12

vue3+vue-router4 路由守卫

router/index.ts:import{createRouter,createWebHistory}from'vue-router'constrouter=createRouter({history

徐同保·2024-08-25 02:30

vue数据同步（sync修饰符）

一、描述本文描述的数据同步，是基于父子组件进行传递的参数实现。实现的内容是：子组件里面选择框，选择的对象可以传递给父组件，但一般涉及到子传父，可能会考虑使用$emit然后通过在父组件身上绑定一个自定义方法，通过子组件去emit触发这个事件，传递参数,但是这里不使用这种，新学了一种，数据同步的方式，也就是在子组件选择的数据，可以同步在父组件中。二、使用sync修饰符例子：比如在父组件有一个子组件：子

～蓝桉·2024-08-25 02:30

linux使用nginx部署springboot + vue分离项目

第一步，打包后端项目maven打包springboot项目为jar文件，上传到服务器，然后运行此jar，具体操作参考：centos部署jar包_centosjar静态资源文件-CSDN博客第二步，安装nginx具体操作自行查找，相关命令：启动：/usr/local/nginx/sbin/nginx重新加载配置：/usr/local/nginx/sbin/nginx-sreload第三步，打包前端项

Miki_souls·2024-08-25 01:25

vue3框架腾讯地图v1版项目-MultiMarker点标记自定义样式和图片的写法

vue3框架腾讯地图v1版项目-MultiMarker点标记自定义样式和图片的写法一.项目\环境\需求介绍该项目原为vue3+高德地图项目,由于公司原因,打算换成腾讯地图,在原有项目基础功能上进行调整更改

麻瓜呀·2024-08-25 01:23

@vue/cli安装成功后，运行vue -V报：不是内部或外部命令

最近要新建一个项目，就准备使用vue的官方脚手架搭建，于是安装：npminstall-g@vue/cli安装成功了，验证一下是否安装成功，于是：vue-V但是报错：‘vue’不是内部或外部命令。。。。

我好菜呐·2024-08-24 21:00

UniApp Vue3版如何实现微信小程序样式穿透

很多伙伴在写vue3的时候，都使用了组合式api。而在修改微信小程序的样式的时候，遇到不生效问题，H5却很听话。其实uniapp有个参数配置，需要开启小程序的样式穿透才行。

antlers777_·2024-08-24 21:59

Vue.js学习笔记（六）element表单校验规则

文章目录前言一、表单验证的作用是什么？二、如何使用？1.普通字段2.对象3.对象数组4.自定义校验规则总结前言记录不同情况下的表单字段校验情况。一、表单验证的作用是什么？在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误。二、如何使用？Form组件提供了表单验证的功能，只需要通过rules属性传入约定的验证规则，并将Form-Item的prop属性设置为需校验的字段名即可。一个字段可以有多个

你看我像是会的样子吗？·2024-08-24 21:29

vue3-巧用指令

不知道大家在工作中用上vue3了没有，vue3好是好，但是有部分插件并没有更新到3.0的，比如我比较喜欢的自定义滚动条overlayscrollbars，vue3直接使用overlayscrollbars-vue

qfxietian·2024-08-24 20:58

Vue实现表格数据的增删改查

整体效果图：一、创建表格数据效果图：el-table组件：表格组件二、查询功能效果图：el-from组件：提供表单验证功能el-from-item组件：用来展示表单项标签，和el-from组件搭配使用el-button组件：不同颜色的操作按钮//el-from表单组件：提供表单验证功能//：是v-bind的缩写//inline行内表单模式垂直方向上空间受限且表单简单，可以一行内放置表单//mode

爱笑小太阳_mm·2024-08-24 20:27

vue3+ElementPlus之CSS深度访问选择器

vue3+ElementPlus之CSS深度访问-deep前言一、demo环境二、问题1-重置elementpluscss无效三、问题2-引入icon无效1、element-plusIcon需要另外安装

Bennett_G·2024-08-24 20:57

Element Plus的deep穿透

ElementPlus的deep穿透主要用于解决在Vue3项目中使用ElementPlus组件库时，样式设置不生效的问题。

HWL5679·2024-08-24 20:27

vue3 使用element-plus动态渲染Icon图标

今天使用vue3+vite重构项目的时候，构建侧边栏的时候需要动态渲染图标之前的写法是这样就可以写一个数组，动态的绑定class但是在vue3中不能这样使用官方给出的实例是这样的但是这样动态渲染就不行了

山野见·2024-08-24 20:56

vue3使用elementui-plus时使用深度选择器穿透影响原样式

一、原样式：下拉框选择时，右边存在一个下拉的箭头符号，那么在许多场景下我们不需要显示，这个时候就可以通过开发者工具进行定位，选中该元素，可以看到，影响的样式是：.el-iconsvg二、深度穿透修改原样式我们修改原样式，增加display:none即可不显示该符号，此时有两种方案，一种是取消style里面的scoped属性，这样会影响全局样式，导致所有的下拉框都没有这个符号了，这并不是我想要的，所

lytcreate.·2024-08-24 20:26

Vue vue/cli3 与 vue/cli4 v-for 和 v-if 一起使用冲突

问题描述异常信息：[vue/no-use-v-if-with-v-for]The'this.

csdn_aspnet·2024-08-24 20:56

【PostgreSQL教程】PostgreSQL 高级篇之触发器

博主介绍：✌全网粉丝20W+，CSDN博客专家、Java领域优质创作者，掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌技术范围：SpringBoot、SpringCloud、Vue

No8g攻城狮·2024-08-24 20:25

开源免费的仪表盘设计工具DashBoard

开源地址：DashBoard:基于Vue+ElementUI+G2Plot+Echarts的仪表盘设计器，使用简单，完全免费，代码开源。https://gitee.com/gcpaas/Da

易道合之逍遥峰·2024-08-24 17:09

Vue3的hooks实战演练

1.没使用钩子前：各种数据和方法都交织一起，组件易维护，代码复用性差，可读性差工资总计：{{sum}}工资求和狗的照片：获取狗的照片import{ref,reactive}from'vue';importaxiosfrom'axios'letsum

J不A秃V头A·2024-08-24 15:27

【博学谷学习记录】超强总结，用心分享|测试工程师必备技能总结：测试用例设计

测试用例设计软件测试设计方法：等价类（五星）边界值（五星）判定表（五星）场景法（流程图）（五星）错误推测法（二星）1.等价类划分法（五星）——复习知识作用：从穷举测试中解放出来，找到具有共同特性的测试输入子集。概念：代表性的测试输入集分类：有效等价类（满足需求）无效等价类（不满足需求）设计测试用例的步骤：需求分析划分等价类设计测试用例典型应用场景：具有典型输入框的场景2.边界值（五星）作用：对等价

小乖乖0419·2024-08-24 14:21

黄金票据 --- kerberos学习记录

文章目录Kerberos协议是怎么工作的一、黄金票据利用条件利用步骤Kerberos协议是怎么工作的这里首先要搞懂几个概念：认证服务器（AuthenticationServer，AS）：负责首次身份验证和颁发TGT（TicketGrantingTicket）给用户。用户通过AS向Kerberos服务器发送身份验证请求，并在验证通过后获取TGT。授权票证颁发服务器（TicketGrantingSer

B1ackMa9ic·2024-08-24 13:14

vue3项目使用signalr（长链接/服务端推送到客户端）

需求项目中需要服务端主动向客户端发送通知消息后端是.net6的webapi项目，前端是vue3全家桶项目，前后端分离这里使用signalR来实现，官网：ASP.NETCoreSignalR概述|MicrosoftLearn

woflyoycm·2024-08-24 13:10

Vue 打包部署，自动清理缓存

在Vue开发中遇到打包部署之后总是要手动清除浏览器缓存数据的问题，此问题可以用下方式：1、package.json文件中有一个管理版本号属性：version，在我们每次打包部署之前修改当前版本号2、在入口文件

A_ugust__·2024-08-24 12:40

探秘Vue 3：watchEffect与watch选项的差异

前端开发工程师、技术日更博主、已过CET6阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》蓝桥云课签约作者、上架课程《Vue.js

阿珊和她的猫·2024-08-24 12:09

vue项目，自动清除浏览器缓存

pages.json中的version版本号，每次打包部署前，改变version二：在main.js中判断version，本地存的version和本次的version比较，如果不同，就强制清除缓存constVUE_APP_VERSION

孙芝琳_629·2024-08-24 12:08

vue前端更新后需要清空缓存

场景：前端vue3网站项目使用wepack打包后进行部署，但是用户浏览器访问网站时加载了缓存，导致没有及时更新。

woflyoycm·2024-08-24 12:06

npm阿里云制品仓库

的版本npmlogin目前有问题verbosewebloginnotsupported,tryingcouch，暂时没试验到解决方案推送项目我用https://github.com/hilongjw/vue-lazyload

愤怒的苹果ext·2024-08-24 12:06

微信小程序uniapp+vue3+ts+pinia的环境搭建

一.创建uniapp项目通过vue-cli创建npxdegitdcloudio/uni-preset-vue#vite-tsmy-vue3-project二.安装依赖：1.pnpmi2.运行项目：将package.json

Outcir·2024-08-24 12:36

vue2 - 详细实现用户收货地址识别解析“姓名/手机号/省市区/街道/乡镇村庄“关键字，用户复制粘贴一段含有姓名电话/详细地址的文字文本信息，vue3自动识别拆分并填入到对应表单字段中，详细示例代码

效果图在vue2、nuxt2项目开发中，实现手机H5移动端网页/电脑PC端网站，“快递地址解析拆分姓名/电话/省市区地址/详细街道乡镇村庄”，提取文本内容中的手机号名称详细位置信息填充到指定表单或data

街尾杂货店&·2024-08-24 11:05

uniapp [全端兼容] - 最新详细实现发送emoji表情包及自定义图片图标小表情功能，支持文字与表情混合显示或光标处插表情，安卓苹果手机显示无差异，类似QQ微信聊天框弹出左右滑动选择表情发送显示

在uni-app全平台兼容（H5网页网站、支付宝/微信小程序、安卓App、苹果App、nvue）项目开发中，详解完成“uniApp表情包emoji”，支持自定义表情包替换或移除，uniapp自定义图片/

王佳斌·2024-08-24 11:05

JointJs 在 Vue 中的使用探索（一）: Hello JointJS

文章目录前言根本问题探索过程安装jointjs测试@joint/coredemo代码jointjs@joint/core前言最近需要用到JointJs做一些东西，但是官方文档的@joint/core跑下来后发现并不太好使，空白一片…（这是个误会…）所以开了个贴给自己做个笔记，也给需要用到的人一个参考根本问题@joint/core是可以正常使用的，猜测是我没有放到onMounted()里探索过程安装

Lovely Ruby·2024-08-24 11:04

【vue】【audio】audio标签播放样式改写

{{audio.currentTime|realFormatSecond}}/{{audio.maxTime|realFormatSecond}}exportdefault{props:{data:{type:Object,default(){return{};},},},data(){return{isPlay:false,//播放暂停按钮sliderTime:0,silderNone:0,au

mooonyuan·2024-08-24 11:34

vue-quill-editor富文本使用

一、准备css文件用于自定义富文本样式(我的放到了assets/css/quillEditor).ql-snow.ql-picker{height:none!important;}/*行高*/.ql-picker-options{line-height:1.5;}/*标题*/.ql-snow.ql-picker.ql-header.ql-picker-label::before,.ql-snow.

等....·2024-08-24 11:31

uniapp+vue3的双向渐变

在App.vue中/*每个页面公共css*/@import'common/style/common-style.scss'在common-style.scss中//全局双向渐变.pageColor{background

总萌大人·2024-08-24 11:59

【vue】编辑器段落对应材料同步滚动交互

场景需求编辑器段落对应显示材料编辑器滚动时，材料同步滚动编辑器段落无数据时，材料不显示实现方法编辑器与材料组件左右布局获取编辑器高度，材料高度与编辑器高度一致禁用材料组件的滚动事件获取编辑器段落距离顶部的位置，对应材料的顶部高度与段落一致监听编辑器滚动高度，对应材料组件同步滚动当段落为空时，材料不显示当段落比材料短的时候，对应材料进行下移，避免材料重叠html代码//编辑器中段落代码这是第一段这是

mooonyuan·2024-08-24 11:59

使用Vue 2 + Element UI搭建后台管理系统框架实战教程

Vue2作为一个成熟的前端框架，以其轻量级和高效著称，而ElementUI则是一套专为桌面端设计的Vue2组件库，它提供了丰富的UI元素和组件，大大简化了后台管理系统的开发过程。

不知名靓仔·2024-08-24 10:26

Vue使用openlayers加载天地图

Vue使用openlayers加载天地图https://www.jb51.net/javascript/315236epf.htm

zsd_666·2024-08-24 10:54

【avue+vue2+elementui】删除、rules、页面跳转、列表数据过长、日期dayjs

这里写目录标题一、删除二、rules1.格式2.`trigger:"blur"`和`trigger:"change"`区分三、页面跳转四、列表数据过长截断五、日期dayjs一、删除API/***删除.*@param{*}data*@returns返参*/exportconstdeleteOrder=(data)=>{returnrequest({url:'/api/Order/deleteOrde

傻傻有内涵的我·2024-08-24 09:51

【avue+vue2】avue-token,iframe,postmessage,3d按钮权限显隐，avue列表数据过长省略和tooltip，选择框不要勾选

目录一、avue字典+token二、3diframe三、postmessage四、3d按钮权限五、avue列表数据过长省略+tooltip六、选择框不要勾选（avue）一、avue字典+token{label

傻傻有内涵的我·2024-08-24 09:21

VUE3配置sass、less全局变量

less配置流程和sass一致，把文中的scss换成less即可，less中变量定义为：@params-name安装sasssass-loader定义样式全局变量在style/variable.scss创建一个variable.scss文件,并定义全局变量$common-color:red项目中引入全局变量$在style/variable.scss创建一个variable.scss文件，并在vit

m0_50156032·2024-08-24 09:49

knowLedge-无关系组件间方法的调用(创建新的 Vue 实例来作为事件总线（Event Bus）方法实现)

1.前言在vue中两个组件无关系(非父子，兄弟即非直接关系)，要实现一个组件对另一个组件方法调用以及数据通信。vue本身没有直接提供非关系组件间通信的内置机制。

哟哟耶耶·2024-08-24 09:47

vue3使用canvas画动态虚线和普通虚线

1、使用ref封装虚线方法constdrawDashed=(x:any,y:any,x1:any,y1:any,color:any,width:any,canvas:any)=>{constctx=canvas.value.getContext("2d");ctx.lineWidth=width;ctx.strokeStyle=color;ctx.beginPath();ctx.setLineDa

Abao·2024-08-24 09:46

前端审查_Nginx

项目如何部署上线前端如何构建生产环境代码vueCli/vite/cra/umi等都是运行build脚本npmrunbuildbuild如何定义打包生产环境代码配置vueCli在配置文件vue.config.js

苦逼的猿宝·2024-08-24 08:11

Qt+vue开发桌面应用程序（二）Vue部分介绍

上一章介绍了Qt+vue开发桌面应用程序（一）Qt部分介绍，本文介绍Vue部分一、原理介绍主要是引入Qt5里面qwebchannel.js文件，再定义交互类和Qt5交互二、代码实现在Vue项目中的public

丁爸·2024-08-24 07:00

流程图编辑框架LogicFlow-vue-ts和js

LogicFlow官网https://site.logic-flow.cn/LogicFlow是一款流程图编辑框架，提供了一系列流程图交互、编辑所必需的功能和灵活的节点自定义、插件等拓展机制。LogicFlow支持前端研发自定义开发各种逻辑编排场景，如流程图、ER图、BPMN流程等。在工作审批配置、机器人逻辑编排、无代码平台流程配置都有较好的应用。效果图将此项目导入自己现有项目中：在自己现有项目中

懒员员·2024-08-24 06:29

vue组件封装——公用基础table组件

ui框架用的element-ui；vue版本为vue2（2.5.17）baseTable组件table+pagination{{scope.row[column.prop]}}exportdefault

h_jQuery·2024-08-24 06:27

Vue3学习——Node环境安装（一）

在进行Vue项目开发时，必须先安装Node.js。Node.js是一个基于ChromeV8引擎的JavaScript运行环境。

rain_love_snow·2024-08-24 06:57

推荐频道

VUE学习记录