![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue学习
暴走的山交
已经步入社会的java程序员,希望前途一片光明,努力努力再努力!
展开
-
vue3+vite框架,修改代码 CTRL+S 后,代码在页面上不发生hmr
router的路径对应引入的component的名称不一致导致.检查下大小写吧。原创 2022-12-08 14:08:37 · 345 阅读 · 0 评论 -
vue中 .sync 和 v-model 的区别
自定义组件的 v-model 和 .sync 修饰符其实本质上都是vue的语法糖,用于实现父子组件的“数据”双向绑定.Vue中的 props 是单向向下绑定的,即:每次父组件更新时,子组件中的所有 props 都会刷新为最新的值。但是如果在子组件中修改 props ,Vue会向你发出一个警告、报错,这就形成了一个单向数据流。因此我们可以在父组件使用子组件的标签上声明一个监听事件,在子组件想要修改时使用 $emit 触发事件并传入新的值,让父组件进行修改。.sync修饰符 .sync 修饰符添加于 v 2.4转载 2022-12-05 10:02:55 · 175 阅读 · 0 评论 -
vue v-model与.sync详解
用过vue的小伙伴应该都知道,使用表单绑定值的时候,我们通常会用到一个 v-model 指令,它可以在表单以及元素上面创建双向数据绑定1、但是其实 v-model 是一个语法糖,它真的是实现是这样的:2、相信用 v-mode 绑定绑定表单,大家都非常熟悉,但是 v-model 还有一个作用,可以用于父子组件之间数据的双向绑定。 成功修改value的值3、.sync修饰符作用.sync修饰符可以实现子组件与父组件的双向绑定,并且可以实现子组件同步修改父组件的值。 不使用.sy转载 2022-12-05 09:52:03 · 317 阅读 · 0 评论 -
Array.reduce()方法 实现普通数组去重,对象数组去重,数组求和,统计次数,出现次数最多的元素,二维转一维
(累计器) 如果传入了initialValue,Accumulator的初始值就是initialValue,没传入就是数组的第一个值。转载:https://www.cnblogs.com/steamed-twisted-roll/p/10917405.html。(当前索引)如果传入了initialValue,索引从0开始,没传入从1开始。指定的初始值,初始值可以是数字,数组,对象。方法是对数组的遍历,返回一个单个返回值。转载 2022-11-25 17:30:38 · 354 阅读 · 0 评论 -
js 获取对象的动态属性
中括号语法, 例如 person [‘name’]其中, 第一种不能使用变量, 而第二种可以使用变量。点语法, 例如 person.name。js 有两种方式获取对象的属性。原创 2022-11-24 10:45:22 · 1591 阅读 · 0 评论 -
vue3:兄弟组件,跨组件传值,事件总线的通信方式(mitt / tiny-emitter)
在绝大多数情况下,不鼓励使用全局的事件总线在组件之间进行通信。虽然在短期内往往是最简单的解决方案,但从长期来看,它维护起来总是令人头疼。更多的直接去npm或者github上查阅即可,tiny-emitter的用法与mitt差不多也都是保持一致的,最后说明;按照vue2的习惯,组件卸载的时候,关闭监听的事件, 和vue2的写法上基本保持一致,页面如下。2. 找到vue项目中的utils文件夹,新建一个bus.js。3. 使用,我现在需要使用mitt进行兄弟组件之间的通信实现。子组件-child2。转载 2022-11-23 15:24:43 · 524 阅读 · 0 评论 -
vite2 打包报 Top-level await is not available in the configured target environment ...
在用vite2 + vue3 + elementplus开发时,vite2 打包报了一个错: Top-level await is not available in the configured target environment (“chrome87”, “edge88”, “es2019”, “firefox78”, “safari13.1”)转载 2022-11-10 16:10:20 · 4156 阅读 · 2 评论 -
vue3 语法糖 defineProps defineEmits defineExpose
现在只需在script标签中添加setup,组件只需引入不用注册,属性和方法也不用返回,也不用写setup函数,也不用写export default ,甚至是自定义指令也可以在我们的template中自动获得。使用setup组件自动注册:在 script setup 中,引入的组件可以直接使用,无需再通过components进行注册,并且无法指定当前组件的名字,它会自动以文件名为主,也就是不用再写name属性了。组件暴露出自己的属性,在父组件中可以拿到。//自定义函数,父组件可以触发。转载 2022-10-26 14:06:56 · 913 阅读 · 0 评论 -
visibility: hidden;与display:none;区别
* 设置visibility:hidden;该盒子消失,但是位置仍然保留(页面中也要占他本身大小的位置,) *//* 设置display:none;观察到该盒子消失,而且不占位置,*/属性指定一个元素应可见还是隐藏。属性设置一个元素应如何显示,转载 2022-10-21 13:29:50 · 166 阅读 · 0 评论 -
element-plus,el-calendar日历组件使用#date-cell插槽无效、不生效
这时候只需要将#date-cell改成#dateCell就可以了,修改之后插槽就能用了。不生效,插槽没有被检测到,打开官网的在线编辑器也是一样。使用elementplus的时候发现。日历组件,需要使用插槽自定义内容。最近在升级项目的时候用到了。转载 2022-10-20 17:47:47 · 747 阅读 · 0 评论 -
如何解决上层div元素将下层div元素盖住,但是下层div里的点击事件仍可以进行的问题?
现在我们需要实现一个div文本输入框,其中含有button按钮在下层,上层div覆盖住下层div元素,上层div中同样含有一个button按钮的效果图。我们应该如何做来使下层div里的button点击事件有效果呢?一般来讲,两个div元素叠加在一起,只有上层的点击事件才起效果,但有时我们想要实现下层元素点击事件起作用。在解决这个问题之前,让我们先了解与解决这个问题有关的一些知识点。阻止CSS里的 hover 和 active 状态的变化触发事件。阻止JavaScript点击动作触发的事件。转载 2022-10-13 10:05:10 · 3360 阅读 · 0 评论 -
element ui 中 调用同一个组件 写两种不同的css样式 如何使两种样式都生效互不影响 el-progress
实现 上方进度条其他样式都隐藏只留一个黄色三角形,见下方。但是因为需要修改框架内部css,所以需要深度选择器实现。vue3 项目中需要实现一个播放控件的样式,我用的是。进度条实现, 因为上方黄色三角形需要跟着进度条移动。但这时因为有两个进度条却需要设置两种不同的样式,想设置上面为透明,但是下方样式也更改了。就会直接更改全部进度条的样式。(设置css为透明)原创 2022-10-11 18:46:33 · 725 阅读 · 1 评论 -
多个div在同一行显示
原因:div为块级元素,默认占一行高度。解决方法1:两个div都添加样式。,设置宽高失效,div靠内容撑起)解决方法2:两个div都添加样式。(后面不在同行的div设置。原创 2022-09-27 16:48:57 · 4037 阅读 · 0 评论 -
git根据已有的项目 创建一个新的项目开发 (删除之前的提交记录,更改为新的远程地址)
现在要开发一个新的项目,需要用到之前已开发的项目框架,将不必要的代码删除后,需要提交到新的git项目中, 根据下面操作可以删除之前的提交记录并且提交到新的项目中,如果不删除之前的提交记录(commit)直接更改远端地址也可以, 但是这样就会有之前的commit,感觉很不好!通过以上几步就可以简单地把一个Git仓库的历史提交记录清除掉了。提交跟踪过的文件(Commit the changes)强制提交到远程master分支。重命名当前分支为master。删除master分支。原创 2022-09-21 17:18:21 · 1292 阅读 · 0 评论 -
el-table中 el-table-column 的label添加换行符 \n
然后还需要添加一个css然后才能实现。然后后面标题部分需要用。需要在前面加上冒号。原创 2022-07-26 10:41:26 · 1117 阅读 · 0 评论 -
JavaScript中数组Array.sort()排序方法详解
JavaScript中数组的sort()方法主要用于对数组的元素进行排序。二、代码实例1、对数字数组进行由小到大的顺序进行排序。2、对字符串数组执行不区分大小写的字母表排序。3、对包含对象的数组排序,要求根据对象中的年龄进行由大到小的顺序排列(数值型)4、对包含对象的数组排序,要求根据对象中的姓名不区分大小写进行由大到小的顺序排列(字符串型)三、拓展1、对数组元素随机排序转载:https://blog.csdn.net/YiYour/article/details/79388906?..转载 2022-07-11 16:50:39 · 1109 阅读 · 0 评论 -
js 将一个数组添加到另一个数组中
假如现在有两个数组我们想要的效果是:把array2数组元素添加到array1中,使得array1直接变成下面这个样子:如何快速实现呢?可能有小伙伴会想到使用push方法,我们来看看push效果是怎么样的:实际上push方法上会将该整个数组作为单个元素添加,而不是单独添加元素,因此最终得到的是一个数组内的数组,并不是我们想要的效果😥。估计有小伙伴想到了concat方法,concat确实可达到我们想要的效果,但它实际上并不直接附加到现有数组array1数组,而是创建并返回一个新数组,我们需要再把这个新.转载 2022-07-07 15:16:07 · 14501 阅读 · 0 评论 -
vue3 取出proxy中的值
JSON.parse(JSON.stringify(fileList.value))原创 2022-04-17 15:28:43 · 3321 阅读 · 0 评论 -
JavaScrip ---parseInt()与Math.round()四舍五入的值不一样
parseInt()直接舍去小数部分Math.round()四舍五入转载:https://blog.csdn.net/qq_43563538/article/details/105976843?转载 2022-01-08 09:01:05 · 242 阅读 · 0 评论 -
vue3之watch多个属性的监听(setup函数的使用)
watch 监听多个值用[ ]括起来, ,分割<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app" > <input type="text" name="" id="" vsalue="" v-model="myBrand" /转载 2021-12-27 20:34:47 · 4150 阅读 · 0 评论 -
echarts柱状图强制x轴显示文字
// x轴 xAxis: { type: 'category', // 类目轴 可通过 xAxis.data 设置类目数据 data: [], //强制x轴显示下所有文字 axisLabel: { interval: 0, }, },之前X轴名称显示不全,现在全能显示了...原创 2021-12-23 18:19:54 · 3115 阅读 · 2 评论 -
echarts 柱状图上方显示数值
//显示数值 itemStyle: { normal: { label: { show: true, //开启显示 position: 'top', //在上方显示 textStyle: { //数值样式 colo...原创 2021-12-23 18:17:18 · 14415 阅读 · 0 评论 -
el-date-picker 为时间组件添加限制范围
根据官网来学习element ui vue3官方文档:disabled-date="disabledDate"在setup()中添加方法disabledDate复制 disabledDate(time) { return disTime(time) },可以在disabledDate中直接写时间的范围也可以像我一样重新写一个方法来存储1.不能取2022年之前的时间我这个写的就是限制时间范围只能选择2022年及之后的时间,之前的时间不能选择复制原创 2021-12-22 18:21:38 · 2639 阅读 · 0 评论 -
element ui `2021-11-12` 用`-`分割时间 转换为 中国标准时间 Invalid prop: type check failed for prop “time“. Expecte
在element ui 的 el-date-picker时间组件中 如果要回传给组件一个时间需要将时间转换为中国标准时间回传否则会提示警告Invalid prop: type check failed for prop “time”. Expected Date, got String with value “2021-11-12”.所以应该将-格式的时间转换为中国标准时间(直接转换的不知道有没有)我用的是将时间先转换为时间戳然后再转换为中国标准时间主要:new Date(new Date("2原创 2021-12-22 18:01:02 · 433 阅读 · 0 评论 -
element ui 防止按钮重复提交
使用:disabled=”isDisabled” 来判断,isDisabled默认为false,当用户点击按钮后,将isDisabled置为true,当增加或修改完毕后,在将isDisabled置为false即可,不推荐使用操作ref的方式改变disabled的状态,当处于父子组件或相同ref值时会有错误产生;<el-button @click="onSubmit" :disabled="isDisabled">确 定</el-button>原文链接:https://blog.转载 2021-12-22 17:48:16 · 721 阅读 · 0 评论 -
vue前端向list中的对象添加元素并赋值
遍历集合,然后按照这个形式向list中的对象添加元素原创 2021-12-20 11:11:04 · 2535 阅读 · 0 评论 -
点击搜索按钮首先会导致整个页面刷新一遍解决方法
我的原因是因为在搜索按钮上添加了native-type="submit" 这一行代码去掉就好了原创 2021-12-20 10:51:59 · 560 阅读 · 0 评论 -
position 属性的常用的5种取值(转载)
日期:2020 年 6 月 22 日 position 属性 前言 说到 CSS 的 position 属性,大家都知道也都用过,但是要说它有几个取值以及这些值的不同,可能有部分同学会哑口无言,毕竟这不影响日常开发(手动狗头),身为一名有梦想的程序员,我们应该秉承刨根问底的钻研精神,不能浅尝辄止、不求甚解,万丈高楼平地起,基础才是万物之根,基础知识掌握了,后面的学起来也会更容易 废话不多说,正文开始 小序 position 属性的取值有:static | relative | absolute转载 2021-12-10 21:50:39 · 1485 阅读 · 0 评论 -
vue3中使用state.js文件,存储公共数据
在非大型单页面中存储公共数据vue3中,在非大型页面中,并不支持使用vuex,vue3又不支持非父子组件传值,那遇到需要在多个页面中使用的数据是应该怎么办呢?我们需要创建一个js文件,来代替vuex的作用先要在url文件中创建一个utils文件,从中创建一个state.js文件使用此代码,引入reactive模块import { reactive } from 'vue'在其中编写简单的state模式// 编写一个简单的store模式import { reactive } fro转载 2021-12-01 15:18:24 · 1561 阅读 · 0 评论 -
vue3组件之间传值踩坑 TypeError: Cannot read properties of undefined (reading ‘xxxxx‘)
vue3组件之间传值踩坑组件之间值的传递和方法的调用先后顺序错误我遇到的问题是 方法调用的时候值还没有传过去,然后方法调用的属性就为空,读取不到TypeError: Cannot read properties of undefined (reading 'xxxxx')现象是第一次调用取不到,再调用一次就取到了所以需要先让值传过去再执行方法,我的解决办法是:将调用的方法放到setTimeout()函数中,手动让方法延迟执行// 展示数据 const showData = (原创 2021-11-29 14:39:52 · 6300 阅读 · 1 评论 -
mybatis-puls 前后端接口如何传递 多种方法的编码方式
mybatis-plus-后端与前端接口get 方法前端传参 后端返回多条记录后端/**controller层 * 查询输水年月日 * @return R */ @ApiOperation(value = "查询输水年月日", notes = "查询输水年月日") @SysLog("查询输水年月日" ) @GetMapping("/yearMonthDayList" ) public R getYearMonthDayList(Page page) { return R.原创 2021-11-27 10:39:02 · 720 阅读 · 0 评论 -
前端向后端传多组数据 List<对象实体>
一种外层和内层都是List[]前端:dataList []List []list.xxx = xxxlist.xxx = xxxdataList.push(Lsit)const { data } = await insertList({ hisWaterDeliveryResultDays: state.dataList, })后端这种使用Dto作为参数HisWaterDeliveryResultDayDto DTO层private List<HisWaterDel原创 2021-11-27 10:31:49 · 11724 阅读 · 0 评论 -
Promise {<pending>} 的解决方法
用 then()接受 或者用 async await 修饰原创 2021-11-27 10:05:14 · 3487 阅读 · 0 评论 -
vue el-input 输入框 限制小数点后 只能有三位小数
oninput="if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+4)}"原创 2021-11-25 13:30:14 · 2249 阅读 · 0 评论 -
vue3中 子组件向父组件传值 使用emit使用方法
vue3中子组件向父组件传值分以下几步子组件:1、定义emits,emits的定义是与component、setup等这些属性是同级。例如emits此时是作为数组,它也可以接收一个对象2、方法中使用与之前的用法不同的是,现在需使用ctx.emit,其中ctx是setup中第二个参数,也就是上下文对象父组件:3、在父组件上定义同名方法接收4、父组件接收方法的参数为子组件传递的参数原文链接:https://blog.csdn.net/yun_shuo/article/details/1转载 2021-11-21 16:53:25 · 5263 阅读 · 0 评论 -
vue3.0 element 多选框全选按钮隐藏--- deep vue3的使用
添加css样式即可 ,但是要注意用deep深度选择器vue2.0的deep深度选择器是这样的/deep/.el-table__header-wrapper .el-checkbox { display: none; }而vue3.0则是这个样式 /* 禁用全选 */ :deep() { .el-table__header-wrapper .el-checkbox { display: none; } }...原创 2021-11-17 10:03:34 · 544 阅读 · 0 评论 -
vue项目组件库Avue表格组件avue-crud
vue项目一直在用的pc端后台管理系统的组件库是ElementUI,但是在最近的项目中使用了avue-crud这个组件,他是Avue这个库里面的表格组件。这是官网。 表格使用体验,相比于饿了么,堪称神器,他是基于elementUI封装的更好用的组件库。如果你写的是后台管理这一类项目,体验会很棒,我说的是有大量表格的时候,因为它把一个完整的增删改查全部封装了,棒呆。 进入官网会提示点赞,就会获取一套基于Avue的后台管理项目模板,这一类模板也挺多的开源,比如vue-admin-element,这是它的gith转载 2021-11-09 11:18:23 · 13040 阅读 · 0 评论 -
一次性讲明白Vue插槽
vue插槽slot一、前言vue官方文档中在"组件基础"内容中提到组件可以通过插槽分发内容,那插槽是怎么使用的呢?它要解决什么场景的问题呢?我们在构建页面过程中一般会把用的比较多的公共的部分抽取出来作为一个单独的组件,但是在实际使用这个组件的时候却又不能完全的满足需求,我希望在这个组件中添加一点东西,这时候我们就需要用到插槽来分发内容。注意:以下的所有内容是基于vue版本 2.6.0 起二、插槽是什么下面看一个例子写一个父组件: test.vue<template> &l转载 2021-09-24 16:49:43 · 542 阅读 · 0 评论