- 博客(406)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 2023-06-22 使用事件委托来为所有子节点绑定事件,e.target和this的区别,vue获取DOM节点的常见方法
文章目录1.使用事件委托为子节点绑定事件2.e.target和this的区别3.vue中如何获取DOM节点?方法一:通过事件源来获取当前点击的节点方法二:通过ref来获取当前点击的节点方法三:使用自定义指令来获取当前点击的节点1.使用事件委托为子节点绑定事件 1 2 3 4 5
2023-06-22 12:13:16
693
原创 2023-04-14 使用纯JS实现一个2048小游戏
一.实现思路1.2048的逻辑2.移动操作的过程中会有三种情况二.代码部分:分为初始化部分和移动部分1.初始化部分1.1.生成第一个方块:1.2.生成第二个方块:2.移动过程部分:三.实现代码1.HTML部分2.CSS部分3.JS部分3.1.game对象的属性3.2.game对象的start方法3.3.game对象的randomNum方法3.4.game对象的dataView方法3.5.game对象的isGameOver方法3.6.game对象中设置移动的方法(以左移动为例
2023-04-14 21:36:33
1721
1
原创 2023-04-01 解决使用sort()方法对数字数组排序失效的问题,sort()方法的参数:比较函数,如何根据对象属性,将对象构成的数组进行排序?
文章目录0.回顾sort()的用法示例一:对字符数组进行排序示例二:对数字数组进行排序1.sort()无法对由两位数以上的数组元素构成的数组进行合理排序示例出现原因和解决方法2.sort()的参数——比较函数示例:使用比较函数将数字数组进行正确排序比较函数的参数比较函数不能对混搭(字符+数字)数组进行排序3.对于由对象构成的数组,如何排序?需求解决方法:使用比较函数改进一:此时只能针对age属性进行排序,把age也替换成形参,写法如下改进二:让比较函数可以使用 属性值是数字型字
2023-04-01 10:26:55
1658
原创 2023-03-24 什么是服务器渲染?什么是预渲染?服务器渲染和预渲染的区别是什么?
文章目录0.客户端渲染什么是客户端渲染?客户端渲染的优缺点是什么?优点缺点客户端渲染的使用场景是什么?1.服务器渲染什么是服务器渲染?服务器渲染的优缺点是什么?优点缺点服务端渲染的使用场景是什么?2.预渲染什么是预渲染?预渲染的优缺点是什么?优点缺点预渲染的使用场景是什么?3.服务端渲染和预渲染的异同相同点不同点预渲染和服务器渲染的流程比较预渲染的流程服务器渲染的流程总结4.参考博文0.客户端渲染什么是客户端渲染?客户端渲染(CSR)又称为前端渲染,
2023-03-24 18:51:48
437
原创 2023-03-22【总结：常见性能优化（三）】对于vue项目你有哪些常见的优化的方案?—— 在基础的Web技术层面对Vue项目进行优化
文章目录三.基础Web基础优化1.使用gzip压缩网页大小什么是gzip?在express中开启gzip压缩2.使用浏览器缓存来提高页面加载速度3.使用CDN从服务器中获取数据4.使用谷歌浏览器的Performance面板来查找性能瓶颈5.参考博文三.基础Web基础优化1.使用gzip压缩网页大小什么是gzip?gzip是GNUzip的缩写,用于UNIX系统文件的压缩,在http协议上的gzip编码是一种用来改进web应用程序性能的技术web服务器(比如阿帕奇,nginx)和客户
2023-03-22 18:58:01
103
原创 2023-03-21【总结：常见性能优化（二）】对于vue项目你有哪些常见的优化的方案?—— 在Webpack层面对Vue项目进行优化
文章目录二.在Webpack层面对Vue项目进行优化1.使用webpack对图片进行压缩vue项目中的图片处理如何使用image-webpack-loader压缩图片?2.减少ES6转成ES5的冗余代码为什么会出现冗余代码?解决冗余代码的方法原理插件3.提取公共代码为什么要提取公共代码?配置插件4.使用模板预编译5.提取组件的CSS6.优化SourceMap打包后用于线上环境的代码出现bug时不好定位和调试解决方法:sourceMap解决不好调试代码的问题7.构建结果输出
2023-03-21 10:59:57
247
原创 2023-03-20 【总结：常见性能优化（一）】对于vue项目你有哪些常见的优化的方案?—— 在Vue代码层面对Vue项目进行优化
文章目录零.前言一.在Vue代码层面对Vue项目进行优化1.分场景使用v-if和v-show面试题:v-if和v-show的区别?使用场景2.分场景使用computed和watch面试题:computed和watch的区别?使用场景3.为v-for添加数组的item作为key值,并避免同时使用v-if面试题:v-for为什么要添加key?面试题:v-for为什么要使用数组的item作为key而不是index?面试题:v-for和v-if的优先级哪个更高?4.仅仅用于数据展示的组件不
2023-03-20 19:51:07
280
原创 2023-03-11 摄影构图小技巧汇总:点构图,线构图,面构图
文章目录1.点构图1.1.中心点示例1.2.九宫格示例1示例2注意事项:三分点构图可能导致画面不平衡,可以通过在相对三分点放入另一元素平衡画面2.线构图2.1.对称线构图示例1:水平对称示例2水平对称示例3:垂直对称示例4:垂直对称2.2.三分线构图示例1示例2注意事项1:水平三分线构图需要留意强调的部分注意事项2:垂直三分线构图要注意人像,特别是人物朝向2.3.对角线构图示例2.4.曲线构图示例1示例22.5.引导线构图示例1示例2注意事项:引导的主体
2023-03-11 11:18:56
269
原创 2023-02-18 什么是chatGPT？如何使用chatGPT?chatGPT可以胜任人类当前哪些工作?.什么是openAI?chatGPT的使用示例
chatGPT本质上是一个应用在对话场景中的语言模型,它是基于GPT3.5(Generative Pre-trained Transformer,是指一种深度学习模型),通过人类反馈的强化学习微调而来,它能够回答用户的后续问题,理解自然语言,像人类一样回答问题,与人类进行自然语言交互2.如何使用chatGPT?方式一:微信搜索公众号或小程序"chatGPT"即可使用方式二:CSDN搜索栏:https://so.csdn.net/so/search?t=chat3.chatGPT可以胜任人类当前哪
2023-02-18 09:36:24
1852
原创 2023-02-07 vue中的高级修饰符sync超级语法糖背后的核心代码
文章目录介绍出现背景sync的一个使用场景介绍出现背景sync的一个使用场景element-ui 的dialog对话框示例代码中:https://element.eleme.cn/#/zh-CN/component/dialog 这是一段信息
2023-02-07 10:00:30
94
原创 2023-02-06 【踩坑】解决flex布局下ul的子元素不能水平居中的问题:改用div
问题描述在做商品列表时,发现div下的所有商品(ul)已经按照flex+换行成功布局,但是ul中的两个子元素:img图片标签和span文本标签不能正常居中显示在这里插入图片描述在这里插入图片描述问题解决使用div,不用ul
2023-02-06 19:26:51
816
原创 2022-02-05 window,html,body和document的区别,BOM和DOM相关知识点
1.window,html,body和document的定义htmlbodywindowdocument2.window,html,body和document的区别3.document.body 和 document.documentElement的区别4.document.body.clientWidth、document.documentElement.clientWidth和window.innerWidth的区别示例结论5.复习:BOM和DOMBOM(Browser Objec
2023-02-05 21:22:02
275
原创 2023-01-26 JS设计模式-单例模式:单例模式的原理和实现,懒汉模式和饿汉模式,单例模式实现登录框
1.什么是单例模式?介绍单例模式是最简单的设计模式之一,属于创建型模式,单例模式提供了一种创建对象的最佳方式特点-单例模式的类(单例类)只有一个实例对象这个单例对象必须由单例类创建单例类对外提供一个访问这个单例的全局访问点结构单例类:包含一个实例且能自行创建这个实例的类访问类:使用单例的类2.如何实现一个单例模式?思路通过单例模式的特点:一个类只有一个实例,先判断实例存在与否,若存在,则直接返回若不存在,则创建了再返回*在JS中单例作为一个命名空间提供者,从全局命名空
2023-01-26 13:45:29
971
原创 2023-01-05 对vue生命周期的理解,父组件和子组件生命周期钩子执行顺序,第一次页面加载会触发哪几个钩子,vue获取数据在一般在哪个周期函数
总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。创建前/后： 在beforeCreated阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，el还没有。载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.messa
2023-01-05 07:15:00
258
原创 2023-01-04 Echarts学习笔记(三) Echarts的实际应用场景:在网页中插入Echarts的折线图,饼状图和柱状图
零.准备和说明1.最终页面效果2.资源地址一.网页布局1.网页结构分析2.其他准备3.完整代码index.htmlcss/index.scss4.效果5.知识点5.1.伪类选择器:after 选择器,:before和content属性示例counter-increment函数5.2.z-index属性示例:图片设置 z-index: -1, 会显示在文字之后5.3.动画animate和关键帧@keyframe示例animation的属性值:动画执行时间 延迟时间 执行关键
2023-01-04 11:26:11
1127
原创 2023-01-03 Echarts学习笔记(二) 常见Option配置项介绍:xAxis,yAxis,series,grid,toolbox,legend,tooltip,title,color等
Echarts的基础配置1.color:调色盘颜色列表2.title:标题组件2.1.设置图表的标题2.2.同时主标题和副标题(了解)3.tooltip:提示框组件触发类型4.legend:图例组件5.toolbox:工具箱组件5.1.saveAsImage:可以另存为图片等功能,即下载按钮5.2.dataZoom:区域缩放5.3.dataView:数据视图,转化为本文格式5.4.restore:还原5.5.综上,以上都是feature的方法6.grid:网格配置7.xAxis
2023-01-03 19:06:00
813
原创 2023-01-02 Echarts学习笔记(一) 基础概念和应用示例:折线图
ECharts.js是 百度出品的一个开源 Javascript 数据可视化库一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。1.常见使用场景折线图、柱状图、散点图、饼图、K线图2.使用Echarts的基本步骤引入echarts 插件文件到html页面中准备一个具
2023-01-02 21:21:07
208
原创 2023-01-01 Promise常见机试题和答案,主要考察:执行顺序,值透传,错误处理,返回值,链式调用
Promise 构造函数是同步执行的,then方法是异步执行的var p = new Promise((resolve, reject) => { console.log(1) resolve(3) console.log(2)})p.then(res => { console.log(res)})console.log(4)//输出结果:1 2 4 3new 一个Promise示例后,立即执行executor函数,它是同步的,一直遇到resolve函数,把它
2023-01-01 14:16:03
495
2
原创 2022-12-31 Promise源码实现
1.实现一个简单的 promise2.实现一个Promise类3.实现then方法4.对上面已完成的Promise构造函数和then方法进行测试5.then方法返回的是一个Promise对象时该如何处理?6.修改then方法7.更新后的版本8.promise 的 then 函数实际上是注册一个微任务，then 函数中的参数函数并不会同步执行。9.解决这个问题:将 onFulfilled、onRejected 的执行放在下一个事件循环中
2022-12-31 18:38:59
712
1
原创 2022-12-30 Promise是构造函数,then()和catch()是绑定在原型上的方法,then的第二个参数和catch的区别,基于Promise处理AJAX请求
文章目录1.验证:Promise的本质是一个构造函数2.Promise的原型上绑定的属性和方法2.1.Promise的原型上绑定的属性constructor指向new Promise出来的实例2.2.Promise的原型上绑定的方法then语法说明示例当executor函数抛出错误或者返回一个拒绝的Promise时,then将返回一个拒绝的Promise2.3.Promise的原型上绑定的方法catch语法概括描述示例3.then的第二个参数和catch有什么区别?
2022-12-30 18:15:47
265
原创 2022-12-29 [整理]flex弹性布局
0.前言1.设置flex布局后的父子元素2.容器(父元素)的属性3.项目(子元素)的属性4.示例一:flex布局实现flex容器中子元素的水平垂直居中5.示例二:flex:1实现子元素平分flex容器宽度6.示例三:换行,多行布局7.示例四:flex-grow,flex-shrink和flex-basis属性的使用7.1.flex-grow的使用7.2.flex-shrink的使用7.3.flex-basis与width和min-width,max-width的区别7.4 flex-b
2022-12-29 18:58:50
549
原创 2022-12-27 使用lodash库实现两个非空对象的深拷贝并输出这两个对象的并集
解决方案使用lodash库中的merge函数引入lodash库(在线地址)使用merge函数 console.log(_.merge(a, b));
2022-12-27 18:30:23
361
原创 2022-12-26 JS实现数组的交集,并集和补集
var newArr = arr1.concat(arr2.filter(val => { return !(arr1.indexOf(val) > -1);}));
2022-12-26 21:47:55
244
原创 2022-12-24 三阶魔方完整教程和口诀速记,二级魔方教程
step1:黄色小花+白色十字略step2:复原白色底面即复原四个角块,公式:RUR’U’step3:中间层即复原四个侧面的棱块,左侧公式:U’L’UL UFU’F’右侧公式:URU’R’ U’F’UF UFU’F’step4:顶部十字公式:FRU R’U’F’情况一:中心直线,直接使用公式情况二:直角,摆成九点钟,再使用公式,变成情况一情况三:既不是中心直线也不是直角,用一次公式,变成情况二step5:复原黄色顶面即复原四个黄色角块,小鱼公式:LUL’U
2022-12-24 13:52:03
2467
原创 2022-12-20 事件流,事件委托,事件冒泡,事件捕获,阻止冒泡,一个DOM同时绑定事件冒泡和事件捕获,DOM0级事件,DOM2级事件,使用事件委托解决新增节点没有绑定上事件的问题
文章目录1.事件流2.事件冒泡3.事件捕获4.阻止冒泡5.事件委托6.DOM0级事件和DOM2级事件7.一个DOM同时绑定事件冒泡和事件捕获会输出什么?8.使用事件委托解决新增节点没有绑定上事件问题1.事件流JS事件:用于HTML和JavaScript之间的交互事件流:事件传播的过程DOM中完整的事件流包括三个阶段:事件捕获阶段,目标阶段,事件冒泡阶段(注意中间的目标阶段不要记成事件委托阶段)事件通过捕获到达目标元素,这个时候就是目标阶段,从目标节点元素将事件上传到根节点的构成阶段
2022-12-20 18:55:44
146
原创 2022-12-19 [汇总] 字符串方法,数组方法,数组遍历,数组去重,判断数据类型是数组还是对象,forEach的return,v-for的key使用数组的索引index,数组中出现最多的字符
文章目录一.数组方法和数组遍历1.unshift/shift,pop/push方法2.some和every方法3.slice和splice方法3.1.数组arr.slice(start,end)方法不会改变原数组而是返回一个子数组3.2.数组arr.splice(index, n, item1,...itemx)方法会改变原数组语法[重要] splice方法可以删除，添加，替换4.concat方法5.使用forEach和for..in遍历数组二.字符串方法1.substr和subst
2022-12-19 19:48:17
408
原创 2022-12-13 什么是语法糖?JS中常见的语法糖有哪些?
语法糖(syntactic sugar)是指编程语言中可以更容易的表达一个操作的语法,使操作变得更加清晰方便,更符合编程习惯通俗理解就是一种便捷写法,去掉不用也不影响语言的表达,因为处理程序本身就会把语法糖构建转换成更加基础的构件
2022-12-13 14:31:43
579
原创 2022-12-12 如何判断一个变量是一个对象还是一个数组?
2.instanceOfinstanceof运算符返回一个布尔值，表示对象是否为某个构造函数的实例var obj = {name: "zhangsan"};var arr = [1, 2, 3];console.log(arr instanceof Array); //trueconsole.log(arr instanceof Object); //true(万物皆对象)console.log(obj instanceof Array); //falseconsole.log(obj in
2022-12-12 15:44:27
332
原创 2022-12-11 isPrototypeOf、instanceof、hasOwnProperty的用法和示例
1.instanceof运算符用法一:instanceof返回一个布尔值,表示对象是否为某个构造函数是的实例function Person() { this.age = 18};var p = new Person();console.log(p instanceof Person);//true;instanceof左边是实例对象，右边是构造函数它会检查右边构造函数的原型对象是否在左边对象的原型链上,即console.log(Person.prototype.isPrototypeOf(p))
2022-12-11 10:38:39
113
原创 2022-12-10 in运算符的用法
用法一:.检测第一个运算数是否是第二个运算数(对象)的属性名 var obj = { x: 1, y: 2 }; console.log("x" in obj, "y" in obj, "z" in obj); //true true false用法二:检测第一个运算数是否为第二个运算数(数组)的索引var arr = [1, 2, [3, 4], 5];console.log(1 in arr, 2 in
2022-12-10 22:18:39
56
原创 2022-11-21 vue3有哪些新增特性?
一.vue3快速上手1.vue3带来了什么?性能的提升源码的升级更好地支持Typescript新的特性特性1.Composition API(组合API)特性2.新的内置组件特性3.其他改变2.vitevite是新一代前端构建工具,有如下优势[使用vite创建一个vue3项目:`create-vite-app vue3_vite`](https://blog.csdn.net/x550392236/article/details/120323139)对比:使用脚手架vue-cli创建
2022-11-21 19:27:47
1351
原创 2022-11-09 git笔记:git第二次提交,git多人提交
1.在空文件夹下$ git clone https://gitee.com/xxxx/xxxx.git, 李四,把代码下载进李四文件夹2.创建并进入李四分支:$ git checkout -b "lisi",可以git branch看看3.李四写了一天的代码,把今天的代码上传到lisi分支: git add. git commit -m "成员李四的第一天代码" git push origin lisi,这时候因线上没有该子分支，所以会出现提示 git push --set-upstream o
2022-11-09 10:25:59
1394
原创 2022-10-25 vue的声明式导航和编程式导航的定义和写法区别
声明式导航在浏览器中，点击链接实现导航的方式，叫做声明式导航使用场景在网页中点击链接实现网页的切换；在Vue项目中点击切换组件声明式导航新老版本的写法1.使用a标签实现网页切换电影影院我的2.使用router-link实现声明式导
2022-10-25 17:00:25
717
原创 2022-10-21 解决vuex报错:Cannot read properties of undefined (reading ‘state‘)“
正确引入store被上面这个报错误导,输入了上述安装命令,但是真正的错误原因是:store的引入路径不正确,因为真正要引入的是store文件夹下的index.js文件修改后的main.js
2022-10-21 22:29:15
3518
1
原创 2022-10-20 解决vue项目中不能使用scss的问题:sass-loader的安装
解决方法是:不要安装node-sass，安装sass就可以了命令:npm uninstall sass-loader node-sassnpm install [email protected] [email protected] --save-dev
2022-10-20 13:17:51
2818
原创 2022-09-30 解决弹性布局flex中,align-item无法居中的问题
文章目录问题出现解决方法效果height:100%和height:100vh的区别问题出现 .container{ display: flex; justify-content: center; align-items: center; } #box{ width: 100px; height: 100px; background-color: #1890FF; }
2022-09-30 14:26:50
1055
原创 2022-09-16 前后端交互方式总结:Promise定义和用法以及基于Promise 接口调用方式:ajax fetch axios async/await
文章目录零.Promise1.什么是Promise?2.使用Promise有什么好处?3.pending,fullfilled和rejected是什么?3.resolved和rejected是什么?4.then和catch是什么?3.Promise的基本用法零.Promise1.什么是Promise?Promise是JS中进行异步编程的一种新的解决方案,(旧方案是单纯使用回调函数)语法上,Promise是一个对象,从Promise对象可以获取异步操作的消息2.使用Promise有什
2022-09-16 23:45:34
593
原创 2022-09-13 uni-app学习笔记(八) 如何把uniapp项目云打包成apk安装包并安装到手机上?
把uniapp项目myUniaTextProject1打包成apk安装包0.Andriod包名如何获取?1.选择"发行"中的"原生云打包"2.打包校验3.打包中,等待打包完毕4.打包完成,生成apk文件5.点击"打开所在目录",查看apk文件,传到手机中安装6.成功在安卓手机中安装该apk
2022-09-13 00:40:03
708
原创 2022-09-11 面试题:vue(三) vue组件初次渲染和更新的过程,vue页面之间是如何传值的,为什么做首屏优化以及如何做首屏优化
1.描述一下vue组件渲染和更新的过程vue组件初次渲染的过程vue组件更新的过程2.什么是组件?为何要封装组件?封装组件的好处组件的定义3.vue页面组件之间是如何传值的?4.computed,watch和methods的区别是什么?4.为什么要做首屏优化?如何做首屏优化?做首屏优化的原因实现首屏优化的做法
2022-09-11 20:05:33
154
原创 2022-09-10 uni-app学习笔记(七) uniapp自定义组件介绍,uniapp组件中的父子组件通信,插槽(slot)和全局事件的定义以及通信
1.uniapp的自定义组件介绍uniapp组件的使用分为三步:示例:创建components/child组件并在index.vue中使用2.uniapp中的父子组件通信(跟vue一样)父传子示例:父传子子传父示例:子传父3.uniapp的插槽slot的数据分发和作用域插槽4.全局事件定义以及通信
2022-09-10 11:45:48
205
vue或者uniapp有哪些API可以达到原生JS动态绑定css样式的效果？
2023-06-28
js定时器中的间隔时间能否设置为随机数
2021-07-07
TA创建的收藏夹 TA关注的收藏夹
TA关注的人