- 博客(28)
- 收藏
- 关注
RSS订阅原创 form表单验证快速定位到错误位置以及element-ui中日期选择器发现的小bug
在使用element-ui里面的form表单时，突然发现日期选择器报错了。这个时候将版本降到2.15.7。当验证不通过，审查元素时发现，会在未校验成功的表单el-form-item标签上加一个类名is-error，就可以从这下手在表单验证的validate方法中加入一下逻辑blockhttpshttps。...
2022-07-29 10:07:59
884
1
原创 react中query传参转成对象格式
在react中使用query问号传参时，这时我们在浏览器中调式获取的是字符串参数。这个时候我们就需要用工具函数对其进行处理。
2022-07-17 16:51:50
718
原创 封装一个轮播图组件
轮播图的实现大概有三个要求：1.点击底部圆圈，实现对应的图片切换；2.图片自动轮播；3.鼠标移入暂停，移出再次开启自动轮播实现的大致思路就是图片和按钮的数量是一样的，记录一下点击的哪个按钮，将对应的图片配合class实现展示，使用定时器每隔一定时间修改一下下标值，鼠标移入清除定时器，鼠标移出再次执行定时器。...
2022-07-12 22:03:33
442
原创 flex的一些理解
在真实的应用场景中，通常会遇到各种各样不同尺⼨和分辨率的设备，为了能在所有这些设备上正常的布局我们的应用界面，就需要响应式的界⾯设计方式来满⾜这种复杂的布局需求。flex 弹性盒模型的优势在于开发⼈员只需要声明布局应该具有的⾏为，⽽不需要给出具体的实现⽅式，浏览器负责完成实际布局，当布局涉及到不定宽度，分布对⻬的场景时，就要优先考虑弹性盒布局row：主轴方向为水平向右column：主轴方向为竖直向下row-reverse:主轴方向为水平向左column-reverse:主轴方向是竖直向上。flex-s
2022-07-09 09:43:06
326
原创 vue如何批量注册组件
如果有十个二十个组件需要使用，那么就要在install方法中注册十次二十次。这个时候我们就可以使用webpack的语法批量注册组件。
2022-06-24 21:24:49
1573
原创 Vue常用的修饰符有哪些有什么应用场景
在程序世界里，修饰符是用于限定类型以及类型成员的声明的一种符号在Vue中，修饰符处理了许多DOM事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理vue中修饰符分为以下五种：1.表单修饰符2.事件修饰符3.鼠标按键修饰符4.键值修饰符5.v-bind修饰符在我们填写表单的时候用得最多的是input标签，指令用得最多的是v-model关于表单的修饰符有如下：1.lazy2.trim3.number在我们填完信息，光标离开标签的时候，才会将值赋予
2022-06-16 21:38:49
652
原创 跨域的三种解决方案
跨域资源共享（CORS）是一种机制；当一个资源访问到另外一个资源(这个资源放在不同的域名或者不同的协议或者端口)，资源就会发起一个跨域的HTTP请求需要浏览器和服务器同时支持；反向代理隐藏真实的服务端，让浏览器依然是同源 通过伪造请求使得http请求为同源的，然后将同源的请求发送到反向代理服务器上，由反向代理服务器去请求真正的url，这样就绕过直接请求真正的url导致的跨域问题 在项目根目录下新建vue.config.js文件配置代码：三、jsonp利用 标签没有跨域限制的漏洞，
2022-06-07 20:10:29
449
原创 svg精灵图
一、svg精灵图利用svg的symbol元素，将每个icon包括在symbol中，通过use元素使用该symbol。1.使用svg精灵图简单理解使用步骤可以分为三步1.声明精灵图（类似于一个容器，他在页面中占位，所以用display：none隐藏）。2.svg标签改成symbol，就变为了精灵图的一个元件，在元件上声明id属性。3.根据id调用精灵图中的svg。 <!-- 1.声明精灵图 --> <svg style="display:none;">
2022-05-29 20:33:26
587
原创 修复开发工具报错：Error in render
记录一下今天遇到的问题，在请求接口后，在页面上渲染数据，能够完整渲染出整体页面，但是开发者工具就是一直报错大概意思就是模板在渲染的时候，读取数组中的某个对象属性的属性值时，这个对象不存在，简单来说就是多层表达式出现这种情况的原因就是：由于vue中存在异步调用，所以在vue的渲染机制中，异步数据先显示初始数据，再显示从后台带回来的数据，所以当vue首先执行的时候数据还是一个空数组，当选染完后，才加载异步数据。当渲染完成后，才加载异步数据所以在渲染时，出现的三层表达式在menus中取m
2022-05-22 15:31:35
1382
原创 上传头像base64格式
有时候我们在碰到长传头像这种功能，而后端需要的是base64格式的字符串，这个时候就需要我们基于 FileReader 把文件读取为 base64 的字符串。掌握好三步OK。1. 创建 FileReader 对象 const fr = new FileReader()2. 调用 readAsDataURL 函数，读取文件内容 fr.readAsDataURL(files[0])3. 监听 fr 的 onload 事件，通过 e.target.resu...
2022-05-20 23:36:21
492
原创 SPA和MPA
一、什么是SPA？SPA（single-page application）单页面应用，是一种网络应用程序或网站的模型，它通过动态重写当前页面来和用户交互，这种方法避免了页面之间切换从而打断用户体验。在单页面应用中，所有必要的代码（比如HTML，JavaScript，CSS）都是通过单个页面的加载而检索，或者根据用户操作动态装载适当的资源并添加到页面上。页面在任何时间点都不会重新加载。我们熟知的vue，react，angular都属于单页面应用。它的结构类似下图。二、MPAMPA（MulitPage-
2022-05-19 18:52:42
472
原创 浅拷贝和深拷贝
文章目录一、浅拷贝？二、深拷贝三、区别总结一、浅拷贝？浅拷贝，指的是创建新的数据，这个数据有着原始数据属性值的一份精确拷贝，如果属性是基本类型，拷贝的就是基本类型的值。如果属性是引用类型，拷贝的就是内存地址。即浅拷贝是拷贝一层，深层次的引用类型则共享内存地址。下面简单实现一个浅拷贝function shallowClone(obj) { const newObj = {}; for(let prop in obj) { if(obj.hasOwnProperty(p
2022-05-18 19:08:00
347
原创 vuex-map函数汇总
一、如何使用全局state● 直接使用： this.$store.state.xxx;● map辅助函数：computed: { // 省略其他计算属性 ...mapState(['xxx']), ...mapState({'新名字': 'xxx'})}二、如何使用modules中的state● 直接使用： this.$store.state.模块名.xxx;● map辅助函数：computed: { ...mapState('模块名', ['xxx'])
2022-05-15 19:59:43
414
原创 vue组件使用scoped实现组件的私有样式以及/deep/深度作用选择符
一、scoped默认组件style中定义的样式是全局的，在使用webpack打包时，存在相同名字覆盖的问题，为了解决多组样式名相同出现冲突的问题，此时就可以在style标签中加上scope属性。原理：在style中加上scoped属性，就会在此组件中的标签上加上一个随机生成以data-v开头的属性。而且必须是当前组件的元素或者子组件的根元素，才会有这个自定义的属性。二、/deep/深度作用符当父子组件都是用了scoped的情况下，如何在父组件中控制子组件的样式，这个时候就可以用到 /deep/
2022-05-14 19:18:57
639
原创 js防抖和节流
在进行窗口的操作或者输入框操作是，如果事件处理函数用的频率无限制，会加重浏览器和服务器的负担，此时我们就可以用防抖（debounce）和节流（throttle）的方式来减少调用评率，同时又不影响实际效果。一、防抖单位时间内，频繁触发一个事件，以最后一次触发为准//输入框事件 let timeID = null document.querySel.
2022-05-11 22:14:15
7475
1
原创 vue组件-插槽
vue中的插槽1.组件通过插槽转入自定义结构。2.用于组件的内容分发，通过slot标签，可以接收写在组件标签内的内容。3.vue提供组件插槽能力，允许开发者在封装组件时，把不确定的部分定义为插槽。默认插槽在定义组件的时候，在template中用slot来占个位。在使用时，将组件之间的内容来填位具名插槽当一个组件内有两处以上需要外部传入标签的地方，这个时候就用到了具名插槽。它的定义类似于默认插槽，在slot中添加一个name，<slot name = xxx> &l
2022-05-09 19:49:21
1321
原创 vue父子组件生命周期执行顺序
生命周期：一个组件从创建到销毁的整个过程就是生命周期。生命周期函数（钩子函数）：vue框架内置函数，随着组建的生命周期，自动按次序执行。beforeCreate:创建实例之前执行，元素和数据都是undefined。created:实力初始化完成后执行，可以访问数据或方法，不能操作DOM。可以做一些初始数据的获取，发送ajax。beforeMount:挂载前执行，虚拟DOM创建完成，即将开始渲染。Mounted:页面渲染完成后执行，可以对DOM进行操作。befor
2022-05-08 21:49:33
2367
原创 vue父子组件通信
一、父传子如果一个组件A在组件B中导入使用，我们称组件B为父组件，组件A为子组件。父组件B通过自定义属性传递内部的数据，子组件A通过props接收数据。首先定义一个父子组件父组件通过自定义属性传内部的数据子组件通过props接收数据 以此实现父传子的通信注意在vue中需要遵循单向数据流原则1.在父传子的前提下，父组件的数据发生变化子组件会自动更行。2.子组件内部不能直接修改父组件传递过来的数据（props是只可读的）二、子传父子传父是指：从子组件内部把数.
2022-05-06 17:40:59
116
原创 重绘和回流
重绘：当我们对元素盒子的修改引发其发生样式的变化，却并未影响其几何尺寸时（比如修改了颜色，背景色等），浏览器不需要重新计算元素的几何尺寸。直接为该元素绘制新的样式，这个过程叫做重绘。回流：当我们对元素盒子的修改引发其发生几何尺寸的变化（比如修改元素的高、宽、隐藏元素、页面一开始渲染、元素位置发生改变、添加或者删除DOM元素等），浏览器需要重新计算元素的几何属性，其他元素的几何属性和位置也会因此受到影响，然后再将重新计算的结果绘制出来，这个过程叫做回流。由此我们可以看出，重绘不一定导致回流，回流一定会
2022-05-05 21:34:58
150
原创 js中数据类型和存储区别
一、基本类型1.number：数值中最常见的整数类型格式为十进制，在数值类型中存在一个特殊的数值NaN，意为“这不是一个数值”，用于表示本来要返回数值的操作失败了（而不是抛出错误）。2.undefined：类型只用一个值，就是特殊值undefined。当使用var或者let声明了一个变量但没有初始化时，就相当于给变量赋予了undefined值。注意（包含undefined值的变量和未定义变量是有区别的）。let message; // 这个变量被声明了，只是值为 undefinedcons
2022-05-03 22:23:10
416
原创 JS数组的常用方法
一、操作方法数组基本操作可以归纳为增、删、改、查，需要留意的是那些方法会对原数组产生影响，哪些方法不会。下面对数组常用的操作方法做一个归纳。增push（） unshift （） splice（） concat（）前三种是对原数组产生影响的增添方法，第四种则不会对原数组产生影响。push（）方法接收任意数量的参数，并将它们添加到数组末尾，返回数组的最新长度。let colors = []; // 创建一个数组let count = colors.push("red", "green
2022-05-02 22:14:03
211
原创 Promise中then的返回值
首先，then的返回值也是一个promise对象，所以它可以用链式语法，但是它的的返回值是一个与调用它的并不是同一个对象。let p1 = new Promise(function(){})let p2 = p1.then((resolve,reject)=>{})console.log(p1 === p2)//false以上的代码可以说明p1.then()的结果是与p1不用的一个promise对象。p2的状态和值由以下规则来确定：1.如果p1的状态是pending，那么p2的状
2022-05-01 21:09:35
6138
1
原创 git和node.js常用的一些命令
git基础操作：1. git init 项目初始化;2. git add . 所有文件添加到暂存区;3. git commit -m "XXXX" 暂存区文件添加到本地仓库;4. git status -s 查看所有文件状...
2022-04-28 21:12:15
410
原创 数组去重的几种方式
方法1声明一个新数组newArr,使用forEach方法遍历arr,遍历的时候使用includes方法,判断newArr中是否有这个元素,如果没有就添加到这个数组中,实现数组去重的功能let arr = [1, 2, 3, 3, 4, 4, 5, 4, 3, 2, 1]let newArr = [] //声明一个新数组arr.forEach(item => { if (!newArr.includes(item)) { newArr.push(item) }})
2022-04-27 13:16:24
978
原创 关于JS中++前置、++后置的区别
对于一个变量来说，无论是++在前还是++在后，都是使变量在自身基础上+1。不同的是，如果让i++或者++i在参与运算的话，两者的值都不相同：i++是先运算，在执行+1（先返回，后自增）++i是先执行+1，后运算（先自增，后返回）let a = 1let b = a++ //先返回，后自增let c = ++a //先自增，后返回console.log(b, c) // 1 3例如 let a = 10 let b = 5
2022-04-26 22:54:19
2036
原创 如何用CSS画一个三角形
平时使用的盒子模型，默认情况下是一个矩形，实现也很简单<style> .border { width: 50px; height: 50px; border: 2px solid; border-color: #96ceb4 #ffeead #d9534f #ffad60; }</style><div class="border"></div>效果如下图所示：
2022-04-25 20:12:12
1287
原创 元素水平垂直居中的四种常见方式
1.子绝父相定位 + margin: auto2.子绝父相定位 + margin移动子元素自身高宽一半的值3.子绝父相定位 + transform4.flex弹性布局目录1.子绝父相定位 + margin: auto2.子绝父相定位 + margin移动子元素自身高宽一半的值3.子绝父相定位 + margin移动自身高宽的50%4.flex弹性布局1.子绝父相定位 + margin: auto父盒子设置相对定位,子盒子设置绝对定位,子盒子的上下左右定位值都为0,此时如
2022-04-23 21:30:21
1515
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人