![](https://img-blog.csdnimg.cn/direct/1edb6db2f17d48838003bd8016f84ef8.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
文章平均质量分 67
一些vue笔记
小白探索世界欧耶!~
一名平平无奇的女大学生!
于2023年~痛失学生优惠特权 :(
展开
-
从0到1搭建一个组件库
最近我开启了一个新项目,基于echarts进行二次封装,希望能为Vue3项目量身打造一套高效、易用的图表组件库,取名为 v-echarts。目前雏形已经搭建完成,先把整个搭建过程做一个记录。后续再持续迭代、完善该图表组件库。笔者在搭建自己的组件库时,趁着项目当前足够空白,专门切出了一个 demo 分支,存下来当做模板以备不时之需。可以切换到 demo 分支,查看比较干净的项目代码。原创 2024-07-25 16:36:39 · 876 阅读 · 1 评论 -
Vue3 对比 Vue2
Vue2.x 项目架构对于 Weex(移动端跨平台方案)和 myvue(小程序上使用)等渲染到不同平台(跨平台渲染)不太友好,因为 Vue 2.x 的核心是为 Web 平台设计的,不同平台有不同的运行时环境和渲染机制,而 Vue 2.x 的核心库并没有直接支持这些差异。Vue3.X 推出了自定义渲染API(也称为运行时核心或),允许开发者编写与平台无关的 Vue 代码,并通过不同的渲染器将这些代码转换为特定平台可以理解的格式,解决了该问题。下面,我们先来看看Vue2和Vue3的入口文件写法有哪些不同。原创 2024-07-20 19:37:48 · 1205 阅读 · 0 评论 -
Vue页面内容未保存时离开页面做弹框提示
一、背景一、背景目标:如果当前页面中有正在编辑中的内容,那么此时切换组件、跳转路由、关闭标签页、刷新页面,都会有离开确认提示,防止用户因误触导致填写的内容白费。后台管理系统中有许多需要填写的表单,弹窗方式的表单一般都会关掉或提交,而单页个面的表单,有时候会忘记暂存或提交,直接离开页面,导致千辛万苦填写的内容全部置空,这是非常不友好的!!!于是,需要实现一个功能:如果当前页面中存在编辑中的内容,那么离开页面之前,要弹窗提示用户是否确认离开。二、实现。原创 2024-06-14 14:10:23 · 891 阅读 · 1 评论 -
系统权限控制基础知识
当需要调整用户的权限时,管理员只需修改用户的角色分配,而无需逐个修改用户的许可权,从而大大简化了权限管理过程。RBAC(Role-BasedAccess Control),是基于角色的访问控制,是一种安全策略,它通过在用户和权限之间引入角色概念,来实现对资源的访问控制。许可权通常由角色来赋予,即角色具有一组许可权,用户通过继承角色的许可权来获得对目标和操作的访问权限。RBAC1解决了这个问题,创建完经理角色并配置好权限后,主管角色的权限继承经理角色的权限,并且支持针对性删减主管权限。原创 2024-05-09 16:07:35 · 1073 阅读 · 0 评论 -
系统权限控制插件封装-实现系统权限控制插件化
静态路由通常是那些不需要权限即可访问的页面,如登录页、404页面等。动态路由则是根据用户角色和权限来动态生成的路由。3、路由匹配与生成调用后端接口获取侧边栏树形结构数据。前端通过递归遍历后端返回的树形结构数据,并与前端配置的路由进行匹配。原创 2024-05-09 15:58:59 · 937 阅读 · 1 评论 -
Vue3自定义指令封装-按钮权限控制v-permission、hasPermissions
背景:平常所接触到的系统权限控制,大部分都是菜单、路由级别的控制,但后台管理系统中,很多操作都是与职责和角色挂钩的,同样一个列表,不同人的操作列并不都一样,有些页面存在一些含有重要数据的组件,也会进行相应的权限控制,仅让领导层能看到。:根据用户的权限不同,对不同的按钮进行权限控制,对同一组数据,不同的用户是否可以增删改查。对某些用户来说是只读浏览数据,对某些用户来说是可编辑的数据。除了按钮,比如页面中的某个字段,某个div,某个组件要求根据当前用户的权限进行控制时,都可以称为按钮级权限。原创 2024-05-09 14:11:12 · 2495 阅读 · 0 评论 -
修改el-table中某一行样式,解决修改样式无效的问题
列表展示项目信息,其中,根据后端接口字段返回的项目状态task_status,延期项目底色换成浅黄色,预警项目底色换成粉红色。① 在公共样式文件里面写好样式②在js文件里面写个样式对应的map③在vue文件中导入公共样式文件和js文件④在el-table中动态绑定row-class-name⑤在methods中写动态获取样式名的方法。原创 2024-04-22 14:35:35 · 640 阅读 · 4 评论 -
Vue组件封装重要知识点
通常,父组件通过props向下传递数据给子组件,而子组件则通过事件$emit向上发送消息给父组件.有时,我们可能希望子组件能直接修改某些由父组件传递下来的props,而不需要显式地触发一个事件来通知父组件更新这些值。场景:当前,有一个多处使用的弹窗,里面的左半部分是动态变化的,右半部分是统一的,我们需要动态配置左边,所以可以把左边区域的整块内容挖空,在使用到dialog的地方通过插槽去配置。父组件会通过props向下传数据给子组件,当子组件有事情要告诉父组件时,会通过$emit事件告诉父组件。原创 2024-04-01 15:10:11 · 1334 阅读 · 0 评论 -
Vue3学习笔记
2020年9月18日,Vue.js发布3.0版本,代号:One Piece(海贼王)2 年多开发, 100+位贡献者, 2600+次提交, 600+次 PR、30+个RFCVue3 支持 vue2 的大多数特性可以更好的支持 Typescripthook本质是一个函数,使用 Vue3 的组合 API 封装的可复用的功能函数。类似于vue2.x中的mixin。自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。原创 2024-03-23 10:06:13 · 783 阅读 · 0 评论 -
Vue中通过v-for循环列表,绑定不同的点击事件和选项
【代码】Vue中通过v-for循环列表,绑定不同的点击事件和选项。原创 2024-03-18 18:44:23 · 792 阅读 · 0 评论 -
Vue自动生成二维码并可下载二维码
遇到一个需求,需要前端自行生成用户的个人名片分享二维码,并提供二维码下载功能。在网上找到很多解决方案,最终吭哧吭哧做完了,把它整理记录一下,方便后续学习使用!嘿嘿O(∩_∩)O~首先,先记录一下我的实验版本,因为怕把项目搞砸,所以我就自己create一个单独的小demo来实验,等功能实现了再搬过去用。系不系很机智!!!在这里,二维码的大小是自适应的。原创 2023-09-13 12:31:09 · 1054 阅读 · 7 评论 -
Vue组件封装方案对比——v-if方式与内置component方式
先单独封装好各种类型的表单控件小组件,再通过来动态渲染,保证高度的组件复用性和扩展性,并避开v-if判断;对配置的数据结构进行调整使其更扁平化,降低使用门槛并提高开发效率。 高复用性:通过单独封装各种类型的表单控件小组件,实现了高度的组件复用 灵活性:通过封装各种表单控件小组件,可以确保每个组件都具备较高的可重用性和可扩展性。同时,使用可以根据配置动态渲染不同的组件,提供了更大的灵活性 易于维护:每一种特定的表单控件都有独立原创 2024-03-16 14:38:13 · 1366 阅读 · 0 评论 -
Vue动态绑定样式
虽然经常使用动态绑定样式的方法,但有时候突然要用,一瞬间还是会有点困惑,决定记录一下,方便混乱的时候查阅。原创 2024-03-05 11:23:29 · 372 阅读 · 0 评论 -
Vue CLI学习笔记
Vue CLI是Vue.js的官方命令行工具,它是一个基于Vue.js进行快速开发的完整系统。通过Vue CLI,开发者可以快速搭建和开发Vue.js项目,提供了一整套完整的项目脚手架,包括项目初始化、开发服务器、构建工具等。是一个交互式的项目脚手架,通过简单的命令行界面,开发者可以快速创建一个新的Vue.js项目,并且会自动配置好项目的基本结构和依赖,让开发者可以直接开始编写代码。原创 2024-02-07 19:37:36 · 1207 阅读 · 0 评论 -
Vue中用watch一次监听两个值的变化
在Vue中,watch 本身不能监听多个变量。但我们可以通过返回具有计算属性的对象然后监听该对象,从而实现一次性“监听多个变量”。这样,我们就实现了再watch中一次性监听两个值的变化。想要一次性监听更多个值也可以这么操作。原创 2024-01-03 10:35:54 · 3737 阅读 · 2 评论 -
Vue项目优化-组件配置化、插件使用
Vue中可以根据需要去加载插件,一些自己写的插件在多个项目中都是需要用到的,通过把它们插件化,可以实现在需要用到的项目中便捷地复用,实现热拔插。原创 2023-12-29 11:25:23 · 464 阅读 · 0 评论 -
踩了Vue2运行机制的坑-响应式原理
在定义data/computed的时候,就先对A的所有属性进行枚举,需要用到后端data里的哪一层就枚举几层,于是就没问题了!原创 2023-12-29 10:25:14 · 1275 阅读 · 0 评论 -
vue中用v-html根据后端返回结果设置样式
一、问题一、问题1=====》今日遇到一个需求,是一个表格列返回状态status,并拥有多种不同颜色。2=====》平日里见到的基本都是返回01234......前端用插槽放进去,根据数字去判断显示字段以及设置不同样式,今天看到的是后端直接返回一个字符串,像这样:3=====》因此这一次我们不再需要根据字段去判断,而是直接写样式就行。=====》于是乎,我用了v-html把它放了进去,并直接在style下面写class相应的样式。原创 2023-12-18 14:51:34 · 1300 阅读 · 5 评论 -
Vue组件封装基础知识
将兄弟组件需要共享的数据存储在vuex中,通过dispatch一个action来改变这个状态的值,并通过getter获取这个状态的值,从而实现兄弟组件之间的通信。通过共同的父组件来传递数据:如果两个组件拥有一个共同的父组件,那么可以在父组件中定义一个数据,并使用props将数据传递给这两个子组件。额外的,每次父级组件发生变更时,子组件中所有的 prop 都将会刷新为最新的值。4.组件的封装要考虑文档和测试,要提供清晰的文档说明组件的功能和使用方法,并且进行充分的测试,确保组件的质量和稳定性。原创 2023-12-14 16:35:02 · 1892 阅读 · 1 评论 -
前端常用的条件限制方法小笔记
【代码】前端常用的条件限制方法小笔记。原创 2023-07-28 14:17:12 · 1392 阅读 · 0 评论 -
【附源码】商品库存管理系统设计与实现(Vue+SpringBoot+MySQL)
本系统采用前后端完全分离的开发方式,前端使用Vue框架搭配elementUI组件库进行页面的搭建和功能实现,后端选用SpringBoot框架和MySQL数据库实现数据的存储和业务的开发,并采用简洁美观的UI界面以网页来呈现,最终进行了全面的系统测试和优化,保证系统功能的完善性和准确性。本系统旨在实现对相关基础数据、商品数量和出入库等行为的有效控制,以提高数据安全性和稳定性,并缩短业务流程处理时间,简化工作流程,帮助企业达到降本增效的目的,提高自身在当今不断变化的商业环境中的竞争力。事已至此,点个星星☆吧!原创 2023-07-24 14:28:09 · 2808 阅读 · 0 评论 -
Vue3动态显示隐藏组件
Vue2用v-if或者v-show就直接完事了,可是vue3却没反应,需要设置强制重新渲染。原创 2023-03-17 16:29:47 · 2707 阅读 · 6 评论 -
Vue3路由传参
vue3路由和vue2差别不是很大,不过在传参形式上略有改变。在Vue3中使用路由必须引入 useRouter 和 useRoute同Vue2一样,query使用path跳转,params用name跳转在注册路由的时候规定必须要传入的参数对于必须要有参数的情况,可以在路由中配置。比如:页面复用,需要通过key来区分,则需要用到这个方法在跳转后的页面中使用参数,也跟vue2有一定的区别,不管是query还是params,都装在router.currentRoute.value里面,我们需要去取。原创 2023-02-17 14:12:38 · 3488 阅读 · 0 评论 -
Vue3插槽的使用
最近在做Vue3的项目,与Vue2还是有一定的区别的,首先是插槽。与vue2不同,原来的 slot 属性可以定义在任何元素上,现在v-slot只能是template 元素上。总结一点:v-slot:换成了#1.跟v-on和v-bind一样,v-slot也有缩写,即把参数之前的所有内容 (v-slot:) 替换为字符#。例如v-slot:title可以被重写为#title:,无具名插槽的用#default2.作用域插槽slot-scope="props"换成了#defa原创 2023-02-17 13:49:39 · 304 阅读 · 0 评论 -
vue树形表格的做法
【代码】vue树形表格的做法。原创 2022-11-28 10:45:38 · 889 阅读 · 0 评论 -
moment.js时间操作
moment.js时间操作。计算时间间隔,获取日期,格式化时间,生成时间列表。原创 2022-09-28 10:20:25 · 1701 阅读 · 0 评论 -
vue+element UI动态增减表单
写在前面:因为最近有个需求,需要新增联系人,而联系人数量并不确定,需要根据需要添加表单,一个联系人对应一个表单。 思路:①写个div,把表单放在里面,旁边放2个按钮,添加和删除,且只有1个元素的时候不能显示删除按钮 ②先用一个空的list,结合v-for来显示div,每次新增,就push一个新的空元素,点击删除,则splice一个元素 ③,如果是点击“编辑按钮”,那么就要把list先初始化为已有数组 具体实现代码如下:原创 2022-11-13 16:44:04 · 3139 阅读 · 0 评论 -
解决elementui 的省市区级联选择器数据不回显问题
上周写了一个省市区三级联动的地址选择组件,今天测试发现了一个大问题,那就是我可以正常提交地址是没错,可是当我后端返回了数据,我要点击编辑的时候,它并不会自动就给我绑定上去。就这样愉快地解决问题啦!从此点击编辑,相对应的地址数据会回显。vue实现省市区三级联动地址选择组件。原创 2022-11-10 23:56:53 · 5355 阅读 · 3 评论 -
jwt鉴权登录实现步骤(JWT工具类+拦截器+前端配置)——前后端鉴权方案和使用
1、第一次登录的时候,前端调后端的登陆接口,发送用户名和密码2、后端收到请求,验证用户名和密码,验证成功,就给前端返回一个token3、前端拿到token,将token存储到localStorage和vuex中,并跳转路由页面4、前端每次跳转路由,就判断 localStroage 中有无 token ,没有就跳转到登录页面,有则跳转到对应路由页面5、每次调后端接口,都要在请求头中加token。原创 2022-11-06 00:02:16 · 2754 阅读 · 1 评论 -
vue实现省市区三级联动地址选择组件(附address文件)
昨天收到一个新的需求,需要选择地址,因此就要做一个省市区三级联动的组件来使用,在网上找了一些资源,然后进行了尝试,没想到就这么成功了!要记录一下方便后续使用。效果如下:下面就记录一下代码叭!原创 2022-11-04 10:45:22 · 11875 阅读 · 21 评论 -
Vue Treeselect树形下拉框的使用
1、绑值, :value=“form.astdeptId”,主要绑的就是id或者code,通过id或code找到对应的label回显。3、append-to-body="true"这个最好加上,可能会遇到下拉的弹窗打不开或者只有一点点高的情况。,0,等,因为会出现unknown,并且当选择了值以后,会出现选中的值后面会拼上unknown。treeselect 绑定的值需要与options输出的id相对应,若是空值,请不要给空。4、normalizer就是把我们自己的后端返的数据格式按树插件需要的格式转换。原创 2022-11-02 16:27:16 · 7331 阅读 · 0 评论 -
解决el-tree渲染不出后端数据的问题
今天踩了el-tree的坑!花了好多时间找不到原因,最后终于解决了!我想让后端返回的categoryName字段取代label,所以就这么写。形式,要展示的名字的字段是不是label,不是的话要在代码里设置这个,写上defaultProps来对应之后,问题解决!首先看一下接口返回的。原创 2022-10-31 14:57:09 · 2103 阅读 · 2 评论 -
vue中axios的二次封装——vue 封装axios详细步骤
通常我们的项目会越做越大,页面也会越来越多,如果页面非常的少,直接用axios也没有什么大的影响,那页面组件多了起来,上百个接口呢,这个时候后端改了接口,多加了一个参数什么的呢?那就只有找到那个页面,进去修改,整个过程很繁琐,不易于项目的维护和迭代。这个时候如果我们统一的区管理接口,需要修改某一个接口的时候直接在api里修改对应的请求,是不是很方便呢?因为我们用的最多的还是get post请求,我们就可以针对封装。原创 2022-10-25 10:39:29 · 22327 阅读 · 11 评论 -
解决Vue刷新后页面数据丢失的问题(sessionStorage和localStorage的用法)
其二,使用sessionStorage可以保证打开页面时sessionStorage的数据为空,而如果是localStorage则会读取上一次打开页面的数据。办法三:在父页面向后台请求远程数据,并且在页面刷新前将vuex的数据先保存至sessionStorage(以防请求数据量过大页面加载时拿不到返回的数据)state - 数据【存项目共享状态,是响应式的,store的数据改变,所有依赖此状态的组件会更新】,相当于全局变量,页面刷新的时候vuex里的数据会重新初始化,导致数据丢失。【页面关闭就没有了】原创 2022-10-14 10:55:34 · 6626 阅读 · 0 评论 -
Vue生命周期小记
vue生命周期的理解原创 2022-10-14 10:15:16 · 513 阅读 · 0 评论 -
Required String parameter ‘xxx‘ is not present 错误解决
我和后端调接口,发现我传的参数和后端那边的是一样的,可是一直报错说参数不存在,CSDN找了好久,发现是我把headers写错了,虽然接口文档写的是。data也需要设置一下stringfy!最后的最后,成功了!拜托了不要再踩坑了!原创 2022-09-20 09:51:21 · 6580 阅读 · 0 评论 -
TypeError: this.$message is not a function报错情况解决
文件目录下,这个文件一般都是负责整个项目的全局配置属性,然后同样的。也可以全局配置,经常用的时候可以这么干。小白频频踩坑,emo住了...文件,这个文件一般在。原创 2022-09-20 09:35:47 · 4161 阅读 · 1 评论 -
vue中this.$router.push()路由传值和获取的两种常见方法
传递的参数是对象或数组今天接到了比较大的需求,由于这个公司的接口调用方法和上一段实习那家公司的写法很不一样,我花了很多时间在摸索,“踏出第一步总是最困难的”,果然没错,第一个很费劲,但完成之后有了思路,下面的任务也就完成得更顺利了一些。简单记录一下吧!1.首先要配置一下接口【api.js】2.在使用的地方先引入方法【跳转到的页面】3.调用的时候要注意是传什么类型的参数,不然请求不回想要的数据【切记切记看一下接口文档】4.配置跳转路由,并传出参数(注意类型)原创 2022-09-15 22:01:49 · 32449 阅读 · 1 评论 -
Vue修改表单数据
今天拿好闺蜜的作业用vue来实现,也浅记一下,后续有相似的地方想不起来可以用一用。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-widt.原创 2022-03-27 16:01:18 · 4663 阅读 · 0 评论 -
Vue实现Tabs页面切换(原生)——改进版
昨晚先大约做了一下基本的要求,今天早上花了点时间实现选择左右上下显示的功能,仍然是比较简单的语句,我发现原来用模板来写如此简单!复制粘贴改一改就好了。但还是要记录一下代码,后续实习期间需要用到可以翻出来看看。记录一下主要代码1.Top<template> <div> <h1>{{ msg }}</h1> <button class="first" :class="{'ActiveBtn':isActive==...原创 2022-03-27 11:45:17 · 2773 阅读 · 0 评论