- 博客(113)
- 收藏
- 关注
RSS订阅原创 vue3 动态监听浏览器窗口变化
去监听这个 属性值的变化，如果发生变化则讲这个 val 传递给 this.screenWidth。在 vue mounted 的时候 去挂载一下 window.onresize 方法。这样screenWidth就跟随浏览器的窗口大小动态变化了。定义一个属性记录宽度。
2023-01-04 11:50:38
7417
原创 vue项目中，el-input type=“number“可以输入字母e . -的问题解决
input的v-model修改为v-model.number，type修改为tel，input事件用字符串的replace()方法将非数字的内容替换为空即可，然后input就只可以输入正整数了。
2022-12-29 17:07:16
3198
1
原创 css文本字符的间距、标签单词之间的空格长度、元素行盒（line boxes）的最小高度、块元素首行文本内容之前的缩进量
CSS的属性用于设置文本字符的间距表现。在渲染文本时添加到字符之间的自然间距中。的正值会导致字符分布得更远，而的负值会使字符更接近。
2022-12-29 11:44:54
353
原创 js延迟加载的六种方式
把js外部引入的文件放到页面底部，来让js最后引入，从而加快页面加载速度例如引入外部js脚本文件时，如果放入html的head中,则页面加载前该js脚本就会被加载入页面，而放入body中，则会按照页面从上倒下的加载顺序来运行JavaScript的代码所以我们可以把js外部引入的文件放到页面底部，来让js最后引入，从而加快页面加载速度3.上述方法2也会偶尔让你收到Google页面速度测试工具的“延迟加载javascript”警告。所以这里的解决方案将是来自Google帮助页面的推荐方案。
2022-12-28 16:07:12
7113
2
原创 跨域时发送post请求 出现了两次请求
服务端在接收到预检请求后，根据资源权限配置，在response-header头部加入access-control-allow-headers（允许跨域请求的请求头）、access-control-allow-methods（允许跨域请求的请求方式）、access-control-allow-origin（允许跨域请求的域）。总结：只要是带自定义header的跨域请求，在发送真实请求前都会先发送OPTIONS请求，浏览器根据OPTIONS请求返回的结果来决定是否继续发送真实的请求进行跨域资源访问。
2022-12-28 14:53:45
1227
原创 前端性能优化
等到B运行结束，将结果返回到A，B的调用帧才会消失。它有一个很实用的特点，当请求把一个DocumentFragment节点插入文档树时，插入的不是DocumentFragment自身，而是它的所有子孙节点，即插入的是括号里的节点。注意，只有不再用到外层函数的内部变量，内层函数的调用帧才会取代外层函数的调用帧，否则就无法进行“尾调用优化”。尾调用由于是函数的最后一步操作，所有不需要保留外层函数的调用帧，因为调用位置、内部变量等信息都不会再用到了，只要直接用内层函数的调用帧，取代外层函数的调用帧就可以了。
2022-12-28 11:56:51
172
原创 为什么同一张图png反而比jpg小？
1、png格式的体积小，在网络通讯里受到了，保证了图片清晰。2、PNG文件采用了，可以获得很高的压缩比，也不会损失数据。3、它利用了，标记了出现的数据，而且对图像的颜色没有影响也不会有损失。4、还优化了网络传输显示，PNG图在浏览器里都是用采流式，因此可以连续的输出。
2022-12-28 11:38:34
2231
原创 cursor:hand和cursor:pointer的区别（vue前端鼠标悬浮变小手）
cursor:hand 与 cursor:pointer 的效果是一样的，都像光标指向链接一样，光标变成手形。向上右改变大小(North East) cursor: ne-resize;向上左改变大小(North West) cursor: nw-resize;向下右改变大小(South East) cursor: se-resize;向下左改变大小(South West) cursor: sw-resize;向上改变大小(North) cursor: n-resize;
2022-12-13 14:42:35
1434
原创 Git教程：! [rejected] master -＞ master (fetch first)解决办法
Merge branch 'master' of github.com:Or-Coal/toutiao-m# Please enter a commit message to explain why this merge is necessary,# especially if it merges an updated upstream into a topic branch.## Lines starting with '#' will be ignored, and an empty messa
2022-12-12 09:35:54
250
原创 只能输入数字的正则表达式
1）整数正数：/^[1-9][0-9]*$/非负数：/^[0-9]*$/负数：/^-[1-9][0-9]*$/非正数：/^-[0-9]*$/所有整数：/^(-)?[0-9]*$/2)小数正数：/^[0-9][.][0-9]{1,}$/负数：/^-[0-9][.][0-9]{1,}$/3）整数和小数非负数：/^[0-9]+([.][0-9]{1,})?$/ 非正数：/^-[0-9]+([.][0-9]{1,})?$/ 所有数字：/^(-)?[0-9]+([.][0-9]{1,})?
2022-12-08 10:00:25
4213
原创 数组合并8种方法
1.ES6 解构[...arr, ...array]不改原数组值，生成新的数组。 2.遍历添加array.forEach(item => { arr.push(item)})遍历方法：forEach、map、filter、every、for、for in、for of等。添加方法：push（后追加）、unshift（前追加）等。arr值改变成追加后的样子，array值不改变3.concatarr.concat(array)不改原数组值，生成新的数组。 4.join
2022-12-07 17:23:28
3456
1
原创 看懂圣杯布局与双飞翼布局
圣杯布局是三列布局，中间宽度自适应，两边定宽，这样做的优势是重要的东西放在文档流前面可以优先渲染。也就是在html文档中，中间的部分要写在左右布局之前。当然，这种布局是面向PC端的，移动端由于屏幕宽度较小，不推荐多列布局。
2022-10-28 22:14:24
156
原创 前端rem适配如何具体去使用
rem是CSS3新增的一个相对单位，相对于根元素（html元素）的font-size的倍数。作用：利用rem可以实现简单的响应式布局，可以利用html元素中字体的大小与屏幕间的比值来设置font-size的值，以此实现当屏幕分辨率变化时让元素也随之变化。rem(倍数） = 设计稿宽度( imgWidth ) / 你设置的font-size( defalutSize )= 网页的实际宽度(screenWidth)/rem(倍数）单位时，设置成相应的百分比即可。，即只需要设置根元素的。
2022-10-28 21:50:17
346
原创 css transform导致字体像素模糊的问题解决办法
直接给translate的Y轴偏移设为绝对单位，此时也是不会模糊的，此时不管你元素高度是奇数还是偶数 transform: translate(-50%,-201px);原本字体的父级为列子中的popup-box，我们可以看到该父级是参与定位偏移的，所以才会影响到里面的字体，因此我们让字体套多一层父级即可。偏移元素达到定位的效果，但是相继出现的是，如果元素内部有字体的话，会出现模糊的问题。3.给translate的Y值偏移设为绝对单位。1.给字体加多一个父级。
2022-10-28 21:41:18
1867
原创 前端大文件上传如何实现（文件切片）
但是大文件的上传是一个特殊的情况： 大文件上传最主要的问题就在于：在一个请求中，要上传大量的数据，导致整个过程会比较漫长，且失败后需要重头开始上传。说明：考虑到如果上传一个超大文件，读取文件内容计算 hash 是非常耗费时间的，并且会引起 UI 的阻塞，导致页面假死状态，所以我们使用 web-worker 在 worker 线程计算 hash，这样用户仍可以在主界面正常的交互。常见的软件应用中，前端/后端都会对一个请求的时间进行限制，那么大文件的上传就会很容易超时，导致上传失败。对象包含一个重要的方法。
2022-10-28 21:36:21
3613
原创 前端图片上传发现图片倒置解决方案 图片镜像效果实现
scale(scaleX, scaleY)：通过在 x 轴乘以 scaleX、在 y 轴乘以 scaleY 来缩放图像。scaleX和 scaleY 的默认值都是 1.0。前端使用canvas将颠倒的图片进行旋转矫正。scale(-1,-1)：水平垂直翻转。scale(-1,1)：水平翻转。scale(1,-1)：垂直翻转。scale(1, 1) ：默认。通过scale调整方向即可。通过以下设置可实现图片翻转。
2022-10-28 21:21:18
572
原创 transtion和animation的区别
主线程一般是对 js 运行的、页面布局、生成位图等等，然后把生成好的位图传递给排版线程，而排版线程会通过 GPU 将位图绘制到页面上，也会向主线程请求位图等等；Animation和transition大部分属性是相同的，他们都是随时间改变元素的属性值，他们的主要区别是transition需要触发一个事件才能改变属性，而animation不需要触发任何事件的情况下才会随时间改变属性值，并且transition为2帧，从from .... to，而animation可以一帧一帧的。
2022-10-28 21:14:17
689
原创 css属性选择器*=与~=的区别
=表示这个属性值必须是red不能多也不能少 只能是class="red"才可以选中。*=表示这个属性值包含red就可以 比如class="ared"
2022-10-28 21:04:27
553
原创 浏览器的缓存机制 优点 缺点 协商缓存和强缓存 浏览器缓存过程 如何判断强缓存是否过期
2.下一次加载资源时，先比较当前时间和上一次返回200时的时间差，如果没有超过cache-control设置的max-age，则没有过期，命中强缓存，不发请求直接从本地缓存读取该文件（如果浏览器不支持HTTP1.1，则用expires判断是否过期）；2.协商缓存：向服务器发送请求，服务器会根据这个请求的request header的一些参数来判断是否命中协商缓存，如果命中，则返回304状态码并带上新的response header通知浏览器从缓存中读取资源；区别是强缓存不会发请求，协商缓存会发请求。
2022-10-27 22:42:38
641
原创 设置html按钮点击事件失效
pointer-events属性除了指示该元素不是鼠标事件的目标之外，值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。实现按钮上的点击事件失效。语法：pointer-events：auto| none | visiblepainted | visiblefill | visiblestroke |想要按钮不能点击可以通过设置按钮点击事件失效来实现；而在CSS中，可以使用pointer-events属性来实现点击事件失效。
2022-10-27 22:14:58
1634
原创 Vue2的12种组件通信
要注意的是 provide 和 inject 传递的数据不是响应式的，也就是说用 inject 接收来数据后，provide 里的数据改变了，后代组件中的数据不会改变，除非传入的就是一个可监听的对象。可以帮我们实现父组件向子组件传递的数据的双向绑定，所以子组件接收到数据后可以直接修改，并且会同时修改父组件的数据。如果在子组件上，引用的指向就是子组件实例，然后父组件就可以通过 ref 主动获取子组件的属性或者调用子组件的方法。子组件通过派发事件的方式给父组件数据，或者触发父组件更新等操作。
2022-10-27 22:11:55
862
原创 vue项目部署时路由加前缀
1.在config / index 文件里修改dev(npm run dev本地启动项目时)和build(npm run build 打包时)下的 assetsPublicPath:”/前缀”2.在npm run build打好的dist包里 ，/dist/config/index.js文件中修改 [‘domain’]=“/前缀” 也可以。router.js里：export default new Router({ base:”/前缀" , })给路由加前缀：而且路由模式用的是hash，
2022-10-27 21:52:14
1934
1
原创 vue中样式穿透
在Vue项目中，当我们引入第三方组件库时(如使用element-ui)，需要在局部组件中修改第三方组件库样式，而又不想去除scoped属性造成组件之间的样式覆盖。这时我们可以通过特殊的方式穿透scoped。
2022-10-27 21:27:51
205
原创 video视频标签 自动播放autoplay 失效问题
问题： 在使用video标签的时候，给它设置了autoplay属性，发现没有什么效果；解决方式： 给video标签加上muted（静音）属性就可以自动播放了；原因： 谷歌浏览器和火狐浏览器现在都不支持非静音自动播放了。video标签设置autoplay（自动播放）无效。
2022-10-27 21:02:36
1853
原创 nextTick的作用和使用场景
第一种：有时需要根据数据动态的为页面某些dom元素添加事件，这就要求在dom元素渲染完毕时去设置，但是created与mounted函数执行时一般dom并没有渲染完毕，所以就会出现获取不到，添加不了事件的问题，这回就要用到nextTick处理。第二种：在使用某个第三方插件时 ，希望在vue生成的某些dom动态发生变化时重新应用该插件，也会用到该方法，这时候就需要在 $nextTick 的回调函数中执行重新应用插件的方法，例如:应用滚动插件better-scroll时。
2022-10-26 21:35:17
688
原创 js隐式类型转换
在js中，当运算符在运算时，如果两边数据不统一，CPU 就无法计算，这时我们编译器会自动将运算符两边的数据做一个数据类型转换，转成一样的数据类型再计算这种无需程序员手动转换，而由编译器自动转换的方式就称为隐式转换例如1 > "0"这行代码在js中并不会报错，编译器在运算符时会先把右边的 "0" 转成数字 0 然后在比较大小。
2022-10-26 21:29:44
108
原创 computed、methods、watch区别
3.计算属性在第一次使用时的结果会缓存起来，直到属性中依赖的data数据发生变化计算属性的结果才会重新求值。2.如果计算属性用到了data中的数据，当data数据发生变化时，就会立即重新计算这个计算属性的值。在computed中，属性有一个get方法和一个set方法，可以看作是 computed 和 methods 的结合体；1. 计算属性在使用时不需要加(),直接写名称即可。methods 方法表示一个具体的操作，主要书写业务逻辑；4.如果computed属性的。
2022-10-26 20:50:35
289
原创 vue函数式组件
vue函数式组件是一个不包含状态和实例的组件；该组件不支持响应式，并且不能通过this关键字引用，用于定义没有响应数据，也不需要有任何生命周期的场景，只接受一些props来显示组件。
2022-10-19 15:13:59
471
原创 null与undefined的区别是什么
JavaScript的最初版本是这样区分的：null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。目前，null和undefined基本是同义的，只有一些细微的差别。undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。（3）对象没有赋值的属性，该属性的值为undefined。（1） 作为函数的参数，表示该函数的参数不是对象。（2） 作为对象原型链的终点。
2022-10-19 14:16:50
129
原创 require 和 import 的区别
我们在 node 中使用 babel 支持ES6（在 node 当中，比如 node.js 代码，也不能直接使用 import 来导入，必须使用 babel 支持才能使用 import 语法），实际上也是将 ES6 转码为 ES5 再执行，import 语法实际上会被转码为 require。但是在 node 模块中，使用module.exports导出接口，使用 require 引入模块。，在引入模块时使用 import 仍然起效，因为本质上，import 会被转码为 require 去执行。
2022-10-19 14:10:34
256
原创 自定义指令
属性名为自定义指令名，值为对象，内容为各个阶段执行的函数（钩子函数和参数同上）。-update()，所在组件的VNode跟新时调用，可能触发多次。oldValue，指令绑定的前一个值，仅在update()和componentUpdated()钩子中使用。-bind()，只调用一次，指令在第一次绑定到元素身上时调用。-inserted()，被绑定元素插入到父节点时调用（父节点存在即可调用，不必存在于dom中）。value，指令的绑定值。第一个参数：永远是el，表示绑定此自定义指令的元素，是个元素的js对象。
2022-10-13 19:36:51
333
原创 JS中的this指向
普通函数：关于this，谁调用就指向谁，没有调用者，就指向全局对象window。箭头函数：箭头函数的this指向于函数作用域所用的对象。
2022-10-13 16:23:19
61
原创 实例内两个方法，一个用普通函数，一个用箭头函数，创建实例后，this指向、创建实例时候普通函数和箭头函数不同、new内部的实现流程。
如果是普通函数方法，该方法会绑定在构造函数的原型上如果是箭头函数方法，该方法会绑定在构造函数上调用class中的方法，无论是箭头函数方法还是普通函数方法，方法中的this都指向实例对象。
2022-10-13 16:14:54
87
原创 ajax和fetch有什么区别
旧浏览器不支持Promise，需要使用pollyfill。没有办法原生监测请求的进度，而。兼容性不如原生ajax，有着更好更方便的写法；只对网络请求报错，对。都当做成功的请求，而。
2022-10-12 20:35:10
590
原创 loader 和 plugin 的区别是什么
Plugin可以扩展webpack的功能，让webpack具有更多的灵活性。在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。Webpack将一切文件视为模块，但是webpack原生是只能解析js文件，如果想将其他文件也打包的话，就会用到loader。所以Loader的作用是让webpack拥有了加载和解析非JavaScript文件的能力。loader比较单一就是用来加载文件。
2022-10-12 19:54:03
675
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人