- 博客(32)
- 收藏
- 关注
RSS订阅
原创 【element-ui】form表单手机号、车牌号、带小数点的数字校验规则
element ui中form表单手机号，车牌号，带小数点的数字校验规则
2022-11-26 12:18:32
945
原创 【vue】多层级组件传值（通讯）方式
$listeners和$attrs$listeners是将三级组件的事件和参数传递给一二级组件$attrs可以将一级组件的数据直接在三级组件中使用，比较优雅的一个传值方式，不用像props那么繁琐在一级组件中引入二级组件，并将data和message传递给二级组件；getLevel3Messgae是三级组件中的事件<template> <!-- 一级组件 --> <div class="level-1"> <!-- 二级组件 --&g
2022-05-08 11:27:49
3266
原创 【数据结构和算法】算法题解析
一些算法题解析1.将一个数组旋转k步2.判断字符串是否括号匹配1.将一个数组旋转k步输入一个数组[1,2,3,4,5,6,7], k = 3, 即旋转k步, 输出[5,6,7,1,2,3,4]如：旋转第一步，输出[7,1,2,3,4,5,6]旋转第二步，输出[6,7,1,2,3,4,5]旋转第三步，输出[5,6,7,1,2,3,4]思路一，把末尾的元素挨个pop，然后unshift到数组前面,这个算法的时间复杂度是O(n^2),空间复杂度是O(1)这里时间复杂度为什么会是O(n ^
2022-04-12 13:00:24
1397
原创 【数据结构和算法】算法复杂度
什么是复杂度？程序执行时需要的计算量和内存空间；复杂度是数量级，不是具体的数字；数量级：数量没在一个级别上，比如我有1000块，马爸爸有1000亿，那我和马爸爸在存款上就没在同一个数量级。但我身高172，马爸爸168，那我们身高差不多就在一个数量级一般针对一个具体的算法，而不是一个完整的系统时间复杂度由图中可以看到,随着问题规模n(数据量)越大，时间复杂度也会呈现不同的变化趋势，如O(1)的时间复杂度,随着数据量变大,它的时间复杂度是不变的，也就是说不管数据量是多大，它都只
2022-04-11 11:41:42
363
原创 【面试】前端面试题整理
文章目录一、HTML相关面试题1. 如何理解HTML语义化？2. 块元素和内联元素二、CSS相关面试题1.盒模型宽度的计算2.margin纵向重叠问题3.margin的负值问题4.BFC的理解和应用5.如何实现双飞翼布局和圣杯布局，这俩布局的目的是什么？6.absolute和relative分别依据什么定位？7.垂直居中对齐的实现方式8.line-height如何继承？三、js面试题1.typeof能判断哪些类型？一、HTML相关面试题1. 如何理解HTML语义化？HTML语义化可以提高代码可读性
2022-04-11 08:44:50
1188
原创 【vue】vue中使用百度地图在页面加载完成或点击marker后获取距离
现在有这样两个需求：1，使用百度地图，在页面加载完成后渲染出两个点之间的距离。2，在点击marker后渲染出两个点之间的距离看到第一个需求的时候，首先第一反应想到的就是监听百度地图的加载完成事件，但实际操作之后发现自己想简单了。获取距离需要调用百度地图的服务API，但是地图加载完成事件只是监听百度地图的加载完成，所以这时候是监听不到异步获取的距离的。但问题总要解决啊，解决方法如下：this.addrList是后端返回的list;this.distList是保存获取到的所有距离的数组m
2022-01-05 13:04:16
2399
原创 【vue】vue中使用swiper插件，swiper-slide绑定的点击事件无效
在vue中使用swiper插件，当我循环swiper-slide并添加点击事件时，发现点击事件并没有生效，查阅官方文档后，解决方法如下：addrList是循环的列表，swiper.realIndex是当前swiperSlide的index，用当前slider的index去匹配循环的列表的slider，就可以拿到循环列表的当前项。export default { data() { return { addrList: [], swiperOptions: {
2022-01-03 13:11:40
3274
原创 【prettier】通过prettier自动格式化代码不生效
问题描述：vscode通过prettier自动格式化代码的时候不生效，而且只有这一个项目不生效，其它项目都可以 原因分析：点击vscode右下角的Prettier，发现报错，翻译过来就是项目中配置的prettier版本太低。[“ERROR” - 上午9:41:40] Your project is configured to use an outdated version of prettier that cannot be used by this extension. Upgrade t
2021-12-17 10:04:05
4011
原创 【vue】前端调取多个后端服务器地址获取数据
项目场景：今天收到这么一个需求，需要我去请求不同的服务器来获取数据，在网上搜了相关的方法，感觉都太复杂，我用下边这个方案也可以解决，并且暂时还没遇到坑，如果遇到坑会及时更新。解决方案：其实思路很简单，通过请求拦截器来判断路由，根据不同的路由去请求不同的后台地址import axios from "axios";const server = axios.create({ baseURL: "http://192.168.3.128:8080",});server.interceptor
2021-12-17 08:51:35
2818
3
原创 【javascript】设计模式
文章目录一、什么是设计？设计的一些准则二、五大设计原则SOLID1.单一职责原则 S（single）*2.开放封闭原则 O（open）*3.里氏置换原则 L（Barbara Liskov）4.接口独立原则 I（interface）5.依赖倒置原则 D（Dependence）总结一、什么是设计？设计,就是按照一种思路或者标准来实现功能,伴随着需求增加,设计的作用才能体现出来设计模式,设计和模式可以分开来读:设计，按照一种思路或者标准来实现功能。模式，实现这类功能的一个模板设计的一些准则.
2021-12-16 16:50:49
798
原创 【vue】用户登录及token验证登录状态
文章目录一、存储token二、处理路由1.修改router/index.js2.修改main.js三、设置axios拦截器总结提示：以下是本篇文章正文内容，下面案例可供参考一、存储token通过登录接口获取到token并保存methods: { async onSubmit() { try { const res = await login(this.data); if (res.data.code === 200) {
2021-12-14 12:12:25
1492
原创 【node】node创建服务器+mysql存储数据极简demo
文章目录前言一、用node创建一个简易服务器1.初始化项目2.引入nodemon3.创建服务器4.createServer回调中的req和res二、node中使用mysql1.引入mysql2.封装mysql文件3.在www.js中使用executeSql函数4.获取post请求中主体的数据三、跨域问题总结前言这是一个特别简单且特别容易理解的一个简易demo，可以让帮你打通前后端之间的壁垒，如果想读懂代码，可能需要一定的es6基础，node基础有没有都行。提示：以下是本篇文章正文内容，下面案例可供
2021-12-13 10:55:06
1079
1
原创 【vue】通过百度地图实现鼠标绘制多边形打点功能
文章目录前言一、封装loadBaiDuDrawMap二、在页面中调用loadBaiDuDrawMap总结前言今天接到这么一个需求：打开地图后，地图上显示提前预设好的区域。实现方法：1，通过高德或百度地图的鼠标绘制功能可以实现2，先在地图上将区域选好并保存，显示时可以根据保存的区域来渲染。3，但百度地图的鼠标绘制功能更强大完善，使用起来也简单一些，所以最后决定使用百度地图将代码原封不动的复制到你的项目之后可实现的功能：1，保存选中多边形的经纬度，多个多边形以二位数组形式保存；2，清除上.
2021-12-09 16:02:53
2141
2
原创 【vue】高德地图及插件在vue中的基本使用
文章目录一、vue中使用高德地图二、使用高德插件一、vue中使用高德地图1,将这一段代码复制到vue项目public目录下的index.html文件中,然后把url中key后边的参数修改为你自己申请的key。 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=d4332e5adb8b584442266763d20b978c" >&l.
2021-12-08 15:48:38
2300
原创 【vue】keep-alive清除缓存最简单暴力的方法
项目场景：场景一：使用vue开发移动端，有ABC三个页面，点击A跳转到B，点B跳转到C；点C返回B，点B返回A。场景二：场景一实现之后，会出现这样一个问题：先从A跳转到B，B页面会被缓存下来，当再从D跳转到B时，B页面并不会更新。解决方案：场景一可能会出下这个问题：从A-B-C正常，但当从B返回A时，会报错，这是因为从B返回A时，传递的参数并不是从A到B的参数，所以需要将B组件或页面缓存起来，就可以解决这个问题，缓存可以用vue’中的keep-alive标签，使用方法如下：1，
2021-12-07 14:12:24
8037
1
原创 【javascript】深拷贝
文章目录一、为什么需要深拷贝？二、实现深拷贝总结一、为什么需要深拷贝？js中的对象都会存储在堆内存中，而栈内存中保存的只是这个对象指向堆内存的地址；当拷贝这个对象时，实际拷贝的是栈内存中的地址，但拷贝后的对象实际指向的还是保存在堆内存中的原对象；这时候修改拷贝后的对象，原对象也会被修改，所以就需要深拷贝来解决这个问题。二、实现深拷贝代码如下（示例）：function deepClone(obj) { // 先判断obj是否是基本类型或null，如果是，则返回 if (typeof o
2021-12-02 10:21:53
591
原创 【vue】对比两个对象的差异并在页面标记
如上demo，当text的内容发生变化时，会将变化标记变红，代码如下：HTML页面，给元素动态绑定ref <div id="app" class="flex"> <div class="container flex"> <!-- 上一个版本内容 --> <div class="container-left flex"> <h3>上一个版本</h3> .
2021-09-24 13:24:12
2317
原创 在vue父组件中调用方法并传值给子组件碰到的渲染问题
今天碰到这样一个问题，爷组件传值给父组件，父组件在传值给子组件，但是子组件并没有渲染出来，仔细排查后发现是父子组件生命周期的问题，下边贴上代码：// 爷爷组件<father :value="value"/>export default { data() { return { value:null } }, created() { console.log("grandpa created") } mounted() { console.log("gran
2021-05-28 22:09:10
968
2
原创 【vue】动态组件、异步组件的理解及使用场景
文章目录一、动态组件的使用二、异步组件的使用总结一、动态组件的使用动态组件，顾名思义，可以让组件根据需求动态显示，一般用于需要根据数据动态渲染的场景或类似tab切换栏，即组件类型不确定。使用起来也特别简单，示例代码如下：<template> <div> <button @click="changeComponent">showComponents</button> <!-- 只需要给component标签动态绑定一个i.
2021-05-16 18:15:06
1229
原创 【javascript】js中遍历数组的方法
文章目录一、forEach二、every三、some总结一、forEachforEach会遍历数组中的所有值，并忽略回调函数的返回值，也就是forEach没有返回值arr = [1, 2, 3, "a", "b", "c"];arr.forEach((item) => { console.log(item);});二、everyevery会一直遍历子项，直到回调函数返回falsearr = [1, 2, 3, "a", "b", "c"];arr1 = [1, 2,
2021-04-14 09:06:26
502
原创 【javascript】Object.defineProperty()方法以及get和set的使用
Object.definProperty()方法用来给一个对象添加新属性,或者修改已有属性举个例子：const obj = { a: 3,};Object.defineProperty(obj, "a", { value: 4, writable: true, // 是否可以修改属性的值 configurable: true, // 配置项是否可以修改,就是说writable和enumerable是否能够修改 enumerable: true, // 是否可以枚举,就是说在遍历
2021-04-11 16:31:26
4013
4
原创 【javascript】作用域的理解（LHS，RHS查询）
作用域是什么？一，理解作用域任何javascript代码片段在执行前都要进行编译，先看一个例子吧：// 先思考一下这行代码是如何被编译的？var a = 33// 估计大部分人看到这行代码,会说首先声明一个变量a,然后给它赋值33// 但实际上并没有这么简单首先要先知道js在解析var a = 33这行代码的时候都有哪些东西参与了。引擎：从头到尾负责整个js程序的编译及执行过程编译器：负责语法分析及代码生成作用域：简单点说就是存储变量的仓库，引擎和编译器通过（LHS,RHS）查询
2021-04-10 10:42:04
216
1
原创 【vue】$nextTick、mixin的理解及使用
文章目录一，$nextTick二，mixin总结一，$nextTick<template> <div> <ul ref="ul"> <li v-for="(i, index) in list" :key="index">{{ i }}</li> </ul> <button @click="addItem">添加</button> </div><
2021-04-06 17:39:50
364
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人