- 博客(44)
- 收藏
- 关注
RSS订阅原创 React实践：React中使用antd anchor 锚点不跳转问题记录【已解决】
在一个高度大于屏幕可视高度的页面，使用锚点定位到指定位置
2022-10-17 16:19:38
2276
1
原创 Vue项目报错：Browserslist: caniuse-lite is outdated.进度卡死
在修改过代码后，重新启动项目，进度卡在69%不动弹报错Browserslist: caniuse-lite is outdated.原因：某组件不止一个根元素（Vue2.X）
2021-06-02 16:42:19
1020
原创 前端性能优化
个人学习总结：从html、css、js、网络请求等方面入手HTML浏览器渲染顺序使用link引入外部css(避免闪屏，提高用户体验)css放在head中（加快浏览器解析，html解析器和css解析器可以同时工作）style放在html文档底部，或者使用defer(要放在css文件后，因为JS可以操作dom和sss)body中间尽量不写style标签和script标签CSS提取公共样式避免多层嵌套选择器使用transform代替对left，top的操作压缩CSS文件的体积（加快网络
2021-06-01 21:28:09
144
原创 React实践报错：TypeError: date.clone is not a function， antd DatePicker报错
配置react 17.0.1antd 4.15.0想实现的效果用户点击“修改个人信息”按钮，原出生日期数据回显到antd组件DatePicker中。而出生日期字段birthDate是表单上所有数据userInfo的一个属性。报错信息报错代码showModal = () => { const { userInfo } = this.state; this.setState({ visibleInfo: true, }); // 设置100毫秒的
2021-04-16 11:03:10
4030
1
原创 React实践报错：TypeError: Cannot read property ‘setFieldsValue‘ of null
配置react 17.0.1antd 4.15.0想实现的效果用户点击”修改个人信息“按钮时，出现表单弹窗，弹窗中默认显示当前用户信息，需要表单回显（设置值）。报错代码showModal = () => { const { userInfo} = this.state this.setState({ visibleInfo: true, }); this.infoFormRef.current.setFieldsValue(userInfo);
2021-04-15 10:45:02
4915
2
原创 ES6学习笔记--数组与对象的解构
主要是es6数组与对象的解构使用方法案例。 // 对数组的解构 const beauty=['美女1','美女2','美女3','美女4'] let [beautyItem1,beautyItem2,beautyItem3,beautyItem4] = beauty console.log(beautyItem1) console.log(beautyItem2) console.log(beautyItem3) console.log(beautyI
2021-03-29 13:46:56
178
原创 ES6学习笔记--let、const变量声明及声明特性
let变量声明及声明特性声明格式let a;let b,c,d;let e = 100;let f = 521 , g = 'iloveyou', h = [];声明特性变量不能重复声明let具有块级作用域// 在{}作用域中才生效{ let num = 1}console.log(num)// 会报错不存在变量提升consol.log(song)let song = "suibian"// 以上结果会报错const 变量声明及 声明特性声明格式con
2021-03-29 13:45:03
243
原创 小程序 轮播图样式设置
swiper标签存在默认的宽度和高度100% * 150pximage标签也存在默认的高度和宽度320px * 240px设计图片和轮播图先看一下原图的尺寸数据 假设 750 * 340让图片的高度自适应 宽度为100%让swiper标签的高度与图片的告诉一样高swiper高度 / swiper宽度 = 图片高度 / 图片宽度swiper高度 = 图片高度 * swiper宽度 / 图片宽度swiper高度 = 340 * 100vw / 750100vw 为视口宽度图片的.
2021-03-24 09:40:56
816
2
原创 vue项目报错：node sass 5.0.0 is incompatible with ^4.0.0
找了好久 ，有的说是node-sass版本与sass-loader版本不兼容，就降了sass-loader版本，保守起见，降到了9.0.0。但是还是不行。最后才找到一篇文章，说是node的版本与node-sass的版本有兼容问题兼容问题参考以下图片，就一目了然了版本兼容地址...
2021-03-17 17:13:17
276
原创 vue 使用scss报错 TypeError: this.getOptions is not a function
要安装 node-sass 以及 sass-loadernpm install node-sassnpm intall sass-loader
2021-03-17 16:38:46
11033
1
原创 history对象
window对象给我们提供了一个history对象，与浏览器历史记录进行交互。该对象包含用户(在浏览器窗口中)访问过的URL。back() 可以后退功能forward() 前进功能go(参数) 前进后退功能 参数如果是1，前进1个页面，如果是**-1**，后退1个页面...
2021-03-04 09:27:32
169
1
原创 DOM navigator对象
navigator对象包含有关浏览器的信息，它有很多属性，最常用的是userAgent，该属性可以返回由客户机发送服务器的user-agent头部的值。navigator属性navigator属性及方法介绍地址举例用PC端打开京东模拟手机打开京东前端代码判断用户哪个终端打开页面，实现跳转，解决在PC端和手机端显示不同页面布局的一种方式。if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Andr
2021-03-04 09:13:47
221
原创 BOM location对象
location对象的属性location.href :获取或者设置整个URLlocation.host：返回主机名（域名）location.port：返回端口号，如果未写，返回空字符串location.pathname：返回路径location.search：返回参数location.hash：返回片段 #后面内容 常见于链接、锚点...
2021-02-26 08:50:28
181
原创 JS执行机制
JS支持同步和异步问题引出 <script> console.log(1); setTimeout(() => { console.log(3); }, 0); console.log(2); </script>以上代码执行结果是什么呢？答案是 1 2 3原理解释JS执行时分同步任务和异步任务同步任务：在主线程上执行，形成一个执行栈异步任务：通过回调函数实现，JS执行时相关回调函数会被放
2021-02-21 18:25:16
139
原创 JS倒计时--发送短信案例
代码<!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> &l
2021-02-21 17:55:32
353
原创 JS实现倒计时效果
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>倒计时效果</title> <style> div { wid
2021-02-21 17:09:06
1310
原创 事件高级（DOM）
注册事件（绑定事件）给元素添加事件，称为注册事件或者绑定事件注册事件有两种方式：传统方式和方法监听注册方式传统方式利用on开头的事件btn.onclick = function() {}特点：注册事件的唯一性同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数 <button>传统方式</button> <button>方法监听注册方式</button> <script> var
2021-02-21 14:02:39
256
原创 注册事件兼容性解决方案
兼容性处理的原则：首先照顾大多数浏览器，再处理特殊浏览器function addEventListener(element, eventName, fn) { // 判断当前浏览器是否支持 addEventListener 方法 if (element.addEventListener) { element.addEventListener(eventName, fn) // 第三个参数 默认是false }else if (element.attach
2021-02-20 15:13:42
205
原创 DOM文档对象模型（重点核心内容）
DOM （Document Object Model） 文档对象模型，是W3C组织推荐的处理可扩展标记语言的标准编程接口DOM树文档： 一个页面就是一个文档，DOM中使用document表示元素：页面中的所有标签都是元素，DOM中使用element表示节点：网页中所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示DOM把以上内容都看做是对象获取元素通过ID获取document.getElementById(‘id’)通过标签名document.getElement
2021-02-19 18:30:13
244
原创 js三种动态创建元素的区别
document.write()element.innerHTMLdocument.createElement()区别document.write 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘，简单知道即可，使用的很少。innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘，创建多个元素效率更高（采用数组形式拼接，而不是字符串形式拼接），结构稍微复杂createElement()创建多个元素效率比innerHTML字符串形式高，比innerHTML数.
2021-02-19 18:26:26
154
原创 html 阻止a标签链接跳转
阻止链接跳转需要添加javascript:void(0)或者javascript:; <a href="javascript:;"></a> <a href="javascript:void(0)"></a>
2021-02-19 16:36:47
958
原创 js创建节点、添加节点
创建节点：document.createElement("li")在后面添加节点：node.appendChild(child) node父级 child 子级在前面添加节点：node.insertBefore(child,指定元素) node父级 child 子级 <body> <ul> <li>123</li> </ul> <script> var ul = document.q
2021-02-18 22:22:44
4441
原创 纯JS实现checkbox全选和取消全选
思路：获取全选按钮及其他按钮组全选和取消全选 按钮组的选中状态同全选按钮设置一个flag变量,全选按钮的状态为flag 。点击一个按钮时遍历按钮组中所有的按钮状态，按钮组中有一个为未被选中状态，flag = false .反之 flag = true全部代码 <body> <div> <label for="">全选</label> <input type="checkbox" name="" id="ch
2021-02-18 18:57:42
916
原创 纯js案例 --鼠标移入表格某一行变色
CSS代码 table,td { border: 1px solid #ccc; } td { width: 100px; } .bg { background-color: pink; }HTML代码<table cellspacing = 0> <thead> <tr> <td>序号</td> <td&g
2021-02-18 16:03:17
792
原创 排他思想
适用场景：一组元素中的某个元素实现某种样式或行为思路：1. 所有元素全部清除样式（干掉其他人）2. 给当前元素设置样式（留下我自己）以上步骤，/ 不能颠倒顺序。/ <body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <
2021-02-18 15:44:31
207
原创 JS内置对象
定义内置对象：指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）Math数学对象Math数学对象不是一个构造函数，所以不需要new来调用，而是直接使用里面的属性和方法即可。Math.max() // 返回 -Infinity封装自己的Math对象 var myMath = { PI: 3.141592653, max: function() { var max = arguments[0]
2021-02-15 20:58:11
157
原创 实用函数封装——返回当前时间时分秒
function getTime() { var time = new Date() // 获得小时 var h = time.getHours() // 小于10数字前添加’0‘ h = h < 10 ? '0' + h : h var m = time.getMinutes() m = m < 10 ? '0' + m : m var s = time.getSeconds() s = s < 10 ? '0' + s : s return h + ':' + m
2021-02-12 21:43:37
681
原创 JS对象
JS数据类型String 字符串Number 数值Boolean 布尔值Null 空值Undefined 未定义以上五种属于基本数据类型，除此之外都是对象Object 对象对象属于一种复合的数据类型，在对象中可以保存多个不同数据类型的属性对象的分类内置对象由ES标准中定义的对象，在任何的ES的实现中都可以使用，比如：Math String Numver 等宿主对象由JS的运行环境提供的对象，目前来讲主要指由浏览器提供的对象。比如：BOM DOM自定义对象由开
2021-02-09 19:55:03
122
原创 JS作用域、预解析
概念Javascript作用域 就是代码名字（变量）在某个范围内起作用和效果 目的是为了提高程序的可靠性更重要的是减少命名冲突全局作用域：整个script标签，或者是一个单独的js文件局部作用域：在函数内部就是局部作用域，这个代码的名字只是在函数内部起作用和效果。变量的作用域定义全局变量：在全局作用域下声明的变量叫做全局变量(在函数外部定义的变量)全局变量在代码的任何位置都可以使用2.特殊情况下，在函数内不使用var声明的变量也是全局变量（不建议使用）局部变量：在局部作用域下
2021-02-06 19:56:39
166
原创 vue-router学习笔记
安装npm intall vue-router --save使用router/index.js文件中import Vue from 'vue'import VueRouter from 'vue-router'// 导入路由对象Vue.use(VueRouter) // 配置路由和组件之间的应用关系const routes = [ { path: '/home', component: Home }, { path: '/about', comp
2021-01-30 23:40:57
98
原创 vue 修改tab标签文字
方法一 created()函数在对应组件的created()中不好用，几个组件要写几次created () { document.title="首页" }方法二在router/index.js中好用！！！推荐！！！{path:'/home',component:Home,meta:{ title:'首页' }}// 文件下面进行路由导航设置router.beforeEach((to, from, next) => {// 从from 跳转到 tod
2021-01-30 22:41:31
1760
原创 vuex学习
vuex:专为Vue.js应用程序开发的状态管理模式。vue设置一个常量在其他地方使用// 定义const shareObj = { name:'why'}// 全局Vue.prototype.shareObj = shareObj// 使用console.log(this.shareObj.name)Vuex的使用场景在多个界面间的共享问题用户的登录状态、用户名称、头像、地理位置信息等等商品的收藏、购物车中物品等等。状态显示在视图上，视图上可以进行一些行为，行为可.
2021-01-27 19:14:35
181
原创 axios学习笔记
axios的基本使用默认是get请求，params是为get请求传参时使用axios({ url: '', params: { }}).then(res => { console.log(res)})axios发送并发请求axios.all()axios.all([axios( { url: '' }), axios({ url: '', params: {}})]).then(result => { console.log(re
2021-01-19 22:41:55
178
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人