![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端学习
看视频学习,自己毕设搞一下 记录
zhazhali_fenqi
这个作者很懒,什么都没留下…
展开
-
业务实现:vue2延迟监听
在实现一个业务功能的时候,当时有一个问题,就是我的保存原始数据的变量后面跟绑定的变量一直是一样的,也就是说他会随着原始数据的变化而变化。问题是,在初始渲染的时候会有三次监听到改变,也就是我们并没有操作表单,在初始渲染的时候就会有三次表单值的改变被监听到,那么按钮就会从禁用转变为可以使用,但是这种时候我们并没有操作表单。在这个过程中,我也尝试了监听的方法,如果使用监听我们不用序列化,也不用遍历比较每一个表单内容,只需要监听对象值是否改变,然后把更新按钮禁用或者使用就行。由此已经实现表单内容更新时候的比较。原创 2023-03-21 10:18:41 · 737 阅读 · 1 评论 -
跨域的部分理解
ajax 请求受同源策略影响,不允许进行跨域请求,而 script 标签 src 属性中的链 接却可以访问跨域的 js 脚本,利用这个特性,服务端不再返回 JSON 格式的数据,而是 返回一段调用某个函数的 js 代码,在 src 中进行了调用,这样实现了跨域。同源策略,是浏览器对 JavaScript 实施的安全限制,只要协议、域名、端口有任何一个不同,都被当作是不同的域。跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的。跨域原理,即是通过各种方式,避开浏览器的安全限制。原创 2022-12-14 21:17:37 · 557 阅读 · 0 评论 -
react 实习小记
而shouldComponentUpdate可以让我们退出某些组件的更新,因为每次都需要根据新的状态,对比dom树,看哪里需要更新,如果我们知道有些用户界面不会改变,那么就不用去对比弄清楚它是否应该重新渲染,我们可以通过shouldComponentUpdate方法返回去false,让组件保持当前状态不变。在Redux中使用Action的时候,Action文件里尽量保持Action文件的纯净,传入什么数据就返回什么数据,最妤把请求的数据和Action方法分离开,以保持Action的纯净。...原创 2022-07-15 14:44:07 · 445 阅读 · 0 评论 -
vue3.0 实现旋转木马
做的比较丑 最后图片本来打算用vue-carousel-3d这个组件的,但是这个组件一直报源码错误,修改了半天也没有解决使用了swiper组件html部分代码 <div class="swiper-container swiper1" style="height: 650px;width: 1500px"> <div class="swiper-wrapper"> <div class="swiper-slide">原创 2022-05-06 15:45:20 · 2267 阅读 · 0 评论 -
vue3.0 实现条件查询 and or
用and或者or连接起来的条件查询。比如,国别:中国 and 使用频段:255 点击查询或者 国别:中国 or 使用频段:255 点击查询类似于这种查询,首先在这我实现的是精准查询。利用的是set集合,思想是第一个条件先把数组转换成set集合,然后通过filter过滤,然后判断每次的连接词 是 and还是or,如果是or直接过滤 然后转换成set集合的数据,并且和之前的set集合进行合并。因为我们都知道set的特性,可以保证里面数据的唯一性,所以我们可以利用集合的交和并来实现and 和 or的查询。原创 2022-04-21 15:54:49 · 2102 阅读 · 0 评论 -
websocket连接url,获取进度条数据
当连接一个url的时候,我们就按照传统的方式写就可以了 initWebSocket: function () { if ("WebSocket" in window){ let url ='ws://'+ this.baseUrl.split('//')[1] +'/TotalEmergeProgressWebsocket' console.log(url) ///TableEmergeProgressWebsocket1 两个进度条原创 2022-04-11 15:05:18 · 2420 阅读 · 0 评论 -
vue 购物车案例
最近在写vue的相关项目 所以找一些小例子练习一下 把一个js的购物车改成vue了css部分是直接引入的插件效果图如下1.<template><div class="head"> <meta charset="UTF-8"> <title>我的购物车-品优购</title> <meta name="description" content="品优购JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑原创 2022-03-15 15:35:42 · 2227 阅读 · 1 评论 -
mockoon 模拟API 获取假数据并显示
Mockoon 被官方称为:一款在本地运行模拟API最简单、最快的解决方案。https://mockoon.com/#download选择相应的版本进行下载我选择的是windows版本 (第一个的installer)4.设置请求头5.环境设置6.修改请求的状态7.点击运行,并且打开相应的网页,找到网络接口,就可以放到代码里面使用,在body里面可以写入数据进行请求。...原创 2021-09-23 14:10:30 · 795 阅读 · 0 评论 -
过滤敏感词案例
<!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-width, initial-scale=1.0"> <title>Do原创 2022-01-20 18:53:19 · 110 阅读 · 0 评论 -
验证用户名案例
<!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-width, initial-scale=1.0"> <title>Do原创 2022-01-20 18:38:19 · 217 阅读 · 0 评论 -
手风琴案例
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>手风琴</title> <style> ul { list-style: none; } * { margin: 0; padding: 0; } div { width: 1200原创 2022-01-14 19:48:14 · 322 阅读 · 0 评论 -
电梯导航案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do原创 2022-01-14 17:37:04 · 831 阅读 · 0 评论 -
返回顶部案例
<!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-width, initial-scale=1.0"> <title>Do原创 2022-01-13 10:04:12 · 108 阅读 · 0 评论 -
仿京东放大镜案例
运行结果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>京东放大镜</title></head><body> <div原创 2022-01-12 21:09:23 · 158 阅读 · 0 评论 -
offset与style区别
原创 2022-01-12 20:26:52 · 153 阅读 · 0 评论 -
自动检测移动端并跳转
<!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-width, initial-scale=1.0"> <title>Do原创 2022-01-12 19:58:02 · 251 阅读 · 0 评论 -
验证码的定时器
运行效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>练习 - 网页时钟</title> <style> body { padding:原创 2022-01-12 19:33:07 · 200 阅读 · 0 评论 -
5秒之后跳转案例
<!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-width, initial-scale=1.0" /> <title>Docu原创 2022-01-12 19:17:56 · 200 阅读 · 0 评论 -
倒计时案例
运行截图<!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-width, initial-scale=1.0" /> <title&g原创 2022-01-12 18:26:34 · 93 阅读 · 0 评论 -
购物车案例
运行截图:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title&原创 2022-01-12 16:47:16 · 160 阅读 · 0 评论 -
跟随鼠标的小天使
<!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-width, initial-scale=1.0"> <title>Do原创 2022-01-12 09:48:06 · 133 阅读 · 0 评论 -
表单的动态增加和删除
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document&.原创 2022-01-12 00:19:46 · 527 阅读 · 0 评论 -
微博发布案例
需求1:检测用户输入字数1. 注册input事件2. 将文本的内容的长度赋值给对应的数值3. 表单的maxlength属性可以直接限制在200个数之间需求2: 输入不能为空点击button之后判断判断如果内容为空,则提示不能输入为空, 并且直接return 不能为空防止输入无意义空格, 使用字符串.trim()去掉首尾空格console.log(’ str’)console.log(’ str '.trim())并将表单的value值设置为空字符串同时下面红色为设置为0;需求3:原创 2022-01-11 21:54:09 · 514 阅读 · 1 评论 -
鼠标移动到那下拉菜单
位置自己调一下<body> <ul class="nav"> <li> <a href='#'>微博</a> <ul> <li> <a href="">私信</a> </li> <li> <a href=""&g原创 2022-01-11 18:26:31 · 99 阅读 · 0 评论 -
tab栏切换
运行结果<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" /> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } ul { list-style: none; } .w原创 2022-01-11 11:53:37 · 83 阅读 · 0 评论 -
表单全选取消案例
可运行。<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } table { border-collapse: collapse; border-spaci原创 2022-01-11 10:16:29 · 125 阅读 · 0 评论