- 博客(51)
- 收藏
- 关注
RSS订阅
原创 call、apply 和 bind 区别
this指向this 一般 谁调用就指向谁，即指向调用者调用方式this指向普通函数调用widow构造函数调用指向实例对象 原型对象里面的方法也指向实例对象对象方法调用这个方法的所属对象事件绑定调用绑定事件对象定时器函数window立即执行函数window1. call()会调用一个对象改变函数的this指向function fn() { console.log(this); // 指向 o 这个对象};var o
2021-04-20 14:23:20
65
原创 【ES6】var、let 和 const 的区别
一、let特点：在块级作用域有效防止内层变量影响外层变量只能在大括号内有效在括号内才有块级作用域防止循环变量变全局变量for (let a =0; a>=20; a++) { }console.log(a); // 报错不存在变量提升，不能重复声明console.log(a);let a = 0; // 报错暂时性死区var num = 1;if(true) {// 这是一个花括号，let声明的变量就会绑定到这个块级作用域里，不会依次向上
2021-04-19 20:45:00
67
原创 CSS3浮动的本质、如何设置浮动、清除浮动的几种方法
浮动1、传统网页布局的三种方式本质：用css摆放盒子。将盒子放到相应的位置。普通流（标准流/文档流)浮动定位2、标准流3、为什么选择浮动？浮动最典型的应用：可以让多个块级元素进行一行排列网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动4、浮动浮动原理：float属性用于创建浮动框，将其移动到一边，直到左边缘或者右边缘碰到包含块或另一个浮动框的边缘。float：left:左浮动float：right右浮动5、浮动特性元素加了浮动之
2021-01-12 16:51:52
704
原创 CSS盒子模型（border、padding、margin、content）
文章目录盒子模型1. 网页布局三大核心2. 组成2.1 边框（border）2.2 内边距（padding）2.3 外边距（margin）**2.水平方向居中****3. 垂直居中**2.3.1外边距合并2.3.2外边距塌陷2.4 影响盒子大小属性盒子模型1. 网页布局三大核心盒子模型、浮动、定位2. 组成border 、margin 、padding 、 content ：边框，内边距，外边距，实际内容2.1 边框（border）语法：border : border-weight | b
2021-01-10 22:13:37
836
原创 CSS的显示模式(块元素、行内元素，行块级元素)
CSS的显示模式显示模式的定义：元素以什么方式进行显示。作用：不同地方会用到不同类型的标签，了解他们会更好的布局网页。元素显示模式的分类一. 块元素特点：内容独占一行宽、高、内边距、外边距都可以设置默认宽度是父级宽度的100%它是一个容器盒子，里面可以放块级元素或者行内元素‘’最典型的块级标签例如：‘,,,,,~’注意：文字类块级元素标签不能嵌套块级元素标签.（ 例如：‘,~’）二. 行内元素（内联元素）特点：和相邻行内元素在一行上，一行可以显示多个宽、高、内边距、外
2021-01-08 15:14:12
806
1
原创 【过滤器】过滤器作用以及如何实现全局过滤器
1、如果全局过滤器过多，可以在一个单独的文件定义这些处理数据的方法。使用暴露出方法。2、注册全局过滤器。3、使用过滤器的两种方法
2024-07-22 14:26:18
192
原创 【XSS攻击】前端 - 原生input框输入v-html页面展示如何防止xss攻击
XSS攻击又称为跨站脚本，XSS的重点不在于跨站点，而是在于脚本的执行。XSS是一种经常出现在Web应用程序中的计算机安全漏洞，是由于Web应用程序对用户的输入过滤不足而产生的，它允许恶意web用户将代码植入到提供给其它用户使用的页面中。【背景】在我们用原生input框输出使用v-html的情况下，很容易忽略掉xss攻击，那么xss攻击有什么坏处呢？参考：https://segmentfault.com/a/1190000040531160。1、引入一个三方库 - dompurify。
2024-03-27 13:33:06
509
原创 弹框编辑/新增，双向监听绑定操作
背景：编辑、新增出现弹框，进行双向绑定，数据反填等操作。其中涉及父子组件传参、computed、watch相关知识。
2023-05-09 15:29:52
174
原创 Vuex以及Vuex持久化
Vuex在Vue项目中，充当着一个很重要的角色，尤其是在大型项目里面，相当于全局的状态存储管理。简单理解，就是全局都可以调用的状态去统一管理数据。Vuex持久化：相当于将状态在本地进行缓存，达到持久化存储的效果。
2023-03-30 20:14:20
251
原创 【iOS移动端兼容】IOS移动端unput框失去焦点后软键盘无法隐藏
背景：iOS移动端在进行input框获取焦点之后，再点击其他弹框，软键盘无法隐藏且未失去焦点。Android正常。
2023-02-08 18:44:53
230
原创 git clone报错：HTTP Basic: Access denied
背景：git clone 出现HTTP Basic: Access denied的错误，就是电脑凭据失效，并去添加相对应的凭据。解决：打开控制面板-用户账户-凭据管理器修改此凭据或者添加，即可解决。
2022-05-31 09:40:01
3893
原创 js判断对象是否包含某个(字段)属性
一、使用for…in… let obj = { name: 'zs', age: '23', sex: 'man', weight: 120, height: 182 } for(key in obj) { // key:键, obj[key]:值 if(key == 'name') { console.log('有') } else { console.log('无') } // 有 if(key == 'face') { console.l
2022-04-22 09:25:59
4523
原创 vue 让组件强制渲染的方法
场景：在组件内，搜索框进行搜索，再进入此页面搜索内容还在，如果没有清空搜索的方法，怎么办？也会想到会有几种解决办法：重新渲染整个页面使用v-if hack使用Vue 内置的forceUpdate方法最好的方式：修改key值一、使用key值进行强制渲染（推荐）为什么选key值?如果key值不变，那么就不会改变组件；如果改变key值，旧组件被摆脱，新组件被创建。二、v-if harkvue 附带的 v-if 指令相当于判断，当组件为true时才会渲染；但是如果为false，那么这个组
2022-03-31 14:01:58
5945
原创 input表单弹框提交不调取接口但还是编辑时的值，在外面进行保存
input表单弹框提交不调取接口但还是编辑时的值，在外面进行保存背景：当在弹框表单里面进行编辑，但是在提交的时候不调取接口，却要保留编辑的内容，在外部进行保存前提：首先在点击弹框编辑回填的时候不进行调取接口1，在弹框内部将编辑的数据抛出去2，在外部进行获取，并进行赋值问题：为什么在此处可以更改父组件传过来的值？如果传过来的值是对象类型（包括数组）的，那么可以在对象里面的值进行赋值...
2022-03-23 19:14:44
227
原创 Vue 按钮权限 —— sessionStorage
在项目中会有很多个角色，如管理员，用户等等，这时就会设置这些角色的操作权限，比如新增、编辑等等。如果有很多个按钮，全局自定义指令更适合
2022-03-04 17:03:18
148
原创 解决切换分页时修改的数据不丢失问题
场景：在分页中可以编辑数据，如果切换到第二页所选数据就会丢失。最简单的方式就是有一个加载更多的按钮来解决这个问题。
2021-12-24 13:54:19
726
原创 this.$set()
调用方法：this.$set( target, key, value )target：要更改的数据源(可以是对象或者数组)key：要更改的具体数据value ：重新赋的值
2021-12-17 17:15:25
613
原创 第一次点击按钮，数据不改变问题
点击按钮，根据定义字段让其样式变化，但是点击第一次没有效果，点击第二次才出现效果在点击图中发现，其定义的字段布尔值改变，并没有渲染到页面所以最后才发现，点击按钮时，又绑定组件的on-change事件，又去执行了一遍，所以就直接在computed钩子函数里面监听他的数据这样就可以直接监听到 isFilterVal 是否改变...
2021-11-29 13:19:55
303
原创 块内函数声明
不要在块内声明一个函数，如果要声明的话，最好使用函数表达式去声明函数（因为在严格模式下会报错）`错误写法`if (x) { function foo() {}}`以下是正确写法`if (x) { var foo = function() {}}if (x) { var foo = testFn();}function testFn(){}...
2021-08-31 11:18:02
800
原创 window下安装nginx以及配置环境
一、下载稳定版本nginxnginx官网下载网址二、下载之后千万不要点击 nginx.exe，千万不要点击 nginx.exe，千万不要点击 nginx.exe默认是在端口号为 8080 打开nginx，如果启动不了错误信息是bind() to 0.0.0.0:80 failed (10013: An attempt was made to access a socket in a way forbidden by its access permissions)大概意思是 nginx list
2021-08-24 15:14:33
1038
原创 webpack打包
一、合并打包两个js文件根据入口文件 src/index.js执行命令 yarn build , 进行打包生成 dist文件二、webpack再次打包src 下新建 tool/tool.js定义的 js 所需内容导出index.js 引入 tool 模块的内容使用执行命令 yarn build , 进行打包 ,（确保终端路径中在 src 的父级文件夹）生成 dist文件三、webpack出口和入口新建 webpack.config.js（默认配置文件名）填入配置修改
2021-08-22 14:42:19
84
原创 小程序 生命周期
一、应用生命周期onlaunch 初始化完成后触发（触发一次）对小程序的数据进行初始化，onShow 小程序启动 从后台到前台显示的时候触发onHide 前台进入后台时触发前台，就是打开小程序后台，在关闭小程序时，不在桌面显示二、页面生命周期1.onLoad一个页面只会加载一次，调用请求方法 在options当前跳转传递过来的参数2.onReady：第一次被渲染完成修改页面的样式：可以调用setNavigationBar这个方法去修改标题内容3.onShow4
2021-07-06 23:24:29
67
原创 微信小程序 --- 页面导航
页面导航页面导航有两种方式声明式导航编程式导航一、声明式导航语法：<navigator url="" open-type=""> 这是声明式导航</navigator>此时想要进行页面的跳转，在navigator标签中，使用url属性（必须以‘/’开头）的同时，必须搭配使用 open-type 属性去实现导航到tab页面导航到非tab页面导航到上一页面open-type:switchTabopen-type:navigate (默认值，可以
2021-07-06 10:21:04
492
原创 Error in v-on handler (Promise/async): “cancel“
出这样的错，需要使用try{}catch(error){} 进行捕获错误就行
2021-07-04 16:13:59
2898
原创 Uncaught TypeError: route.children.forEach is not a function
在进行路由分配的过程中，会出现Uncaught TypeError: route.children.forEach is not a function原因：进行嵌套路由的时候，使用 children 配置，需要数组类型这样就不报错了
2021-07-02 10:41:39
2760
原创 解决 Vue 请求拦截器 无法执行
已将 请求拦截器 封装，然后引入到 main.js 里面。看似没有问题，但是请求拦截器无法进去。之后检查了一下，我在请求拦截器中二次使用 axios ，并没有执行。因为在上面我又给 axios重新定义了一个对象，所以下面的请求拦截器使用 axios 无法执行。解决后：...
2021-07-01 10:32:31
3088
原创 【node.js】session认证机制、JWT认证机制进行鉴权
由于 用户进行访问 浏览器时，需要完成对用户身份的确认。称为身份验证，或者“鉴权”和“身份认证”。需要身份认证使用 session认证机制 或者 JWT 认证机制。由于开发模式不同，身份认证也不同。对于服务器渲染和前后端分离这两种开发模式来说，分别有不同的身份认证：服务端渲染：即前后端不分离，推荐使用 session 认证机制，有利于 SEO，不存在跨域。前后端分离：推荐使用 JWT 机制，在后台加载速度快。可以解决跨域一、session 认证机制由于 HTTP 协议 是无状态性（每次HTT
2021-04-27 17:05:24
241
原创 JS执行机制（同步、异步）
为了解决 如果前面的事情耗时，后面的任务不得不进行等待的问题，那么就利用 HTML5 提出的 Web Worker 标准，允许 JS 脚本 创建多个线程，但是子线程完全受到主线程控制。于是，就出现了 同步任务 和 异步任务。
2021-04-24 14:40:45
314
原创 轮播图（一） PC端 轮播图(JS定时器)
思路：html 代码：<div class="focus fl"> <!-- 左侧按钮 --> <a href="javascript:;" class="arrow-l"> < </a> <!-- 右侧按钮 --> <a href="javascript:;" class="arrow-r"> > </a> <!--
2021-03-17 22:11:50
596
原创 实现放大镜效果详解 JS+CSS
思路：实现放大镜功能有三个模块左侧黄色框是放大镜，右侧是图片的放大后的效果。当鼠标移动到左侧图片上时，放大镜和右侧的大图显示鼠标移动，放大镜也进行移动，此时获取鼠标的坐标进行控制放大镜，并设置移动的范围当移动放大镜时，右侧放大效果图也进行移动HTML代码：<div class="box"> <img class="preImg" src="images/3.jpg" alt=""> <div class="mask"></div&g.
2021-03-16 15:50:17
688
原创 移动端常见布局总结（三）——rem布局
1. rem基础思考一下问题，有便于下面学习rem布局。页面布局文字能否岁屏幕的大小变化而变化？流式布局和flex布局主要针对于宽度布局，那高度如何设置？（之前都是写死的高度）怎样让屏幕发生变化的时候元素高度和宽度等比例缩放？（rem）1.1 rem 和 em 单位rem（root em）单位，是一个相对单位，是相对于根元素（HTML）的字体大小。em单位， 也是一个相对单位，相对于父元素字体大小em解析 <style> /* em 说明*/ div {
2021-02-26 18:39:34
1693
原创 移动端常见布局总结（二）——flex布局（弹性布局）
二、flex布局1.1 传统布局和flex弹性布局 传统布局兼容性好布局繁琐局限性，不能在移动端很好的布局flex弹性布局操作方便，布局极为简单，移动端应用广泛。PC端浏览器支持情况较差。IE11或更低版本，不支持或仅部分支持。建议：如果是PC端，则选择传统布局如果是移动端，则使用flex弹性布局1.2 flex布局原理任何一个容器都可以使用flex布局灵活性大当父盒子设为flex布局后，子元素的float、clear和vertical-
2021-02-23 18:51:31
458
原创 移动端常见布局总结（一）——流式布局（百分比布局）
流式布局流式布局，也就是百分比布局。它实际通过将盒子的宽度设置为百分比来根据屏幕的宽度进行伸缩，不收固定像素的限制，内容向两侧填充。要使宽度在合理范围内进行伸缩，故有以下两个属性进行操作max-width：最大宽度，（max-hight）一般为 640px 和 750pxmin-width：最小宽度，（min-hight）一般为 320px 和 350px案例：京东移动端首页1.1 准备工作建立相关文件设置视口标签以及引入初始化样式<meta name="viewpo
2021-02-23 18:46:43
1088
原创 移动端开发布局（一）— 视口、二倍图、常见布局
1. 移动端基础1.1 常见移动端屏幕尺寸1.2 移动端开发移动端开发，就是编写移动端的网页移动端浏览器主要对webkit内核进行兼容移动端开发主要针对手机端开发，pad屏幕较大，可以使用PC端界面现在移动端碎片化严重，分辨率和屏幕尺寸不一经常使用谷歌浏览器模拟手机界面并调试2. 视口2.1 布局视口 layout viewport移动设备的浏览器默认设置了布局视口，用于解决早期的PC端页面在手机上显示的问题。iOS，Android 都将这个视口分辨率设为980像素（由于PC端的
2021-02-23 18:01:27
1072
4
原创 绝对定位、固定定位、相对定位分别和浮动使用的影响
今天我们讲一下 一个盒子使用绝对定位和浮动会有什么影响。当一个盒子在另一个盒子的下边重叠，那么就会想到定位，这时就要想，是要使用绝对定位和相对定位。效果如图一：下面分为三种情况如果使用绝对定位，和浮动的效果，如图二咱们看一下代码：<style> .box1 { width: 100%; height: 50px; } .box1 div { float: left
2021-02-04 18:26:26
2199
1
原创 CSS3-新增内容总结、3D转换、浏览器私有前缀
6. 3D转换6.1 三维坐标系三维坐标系指立体空间，是由3个轴共同组成的。x轴：水平向右 注：x右边是正值，左边是负值y轴：水平向下 注：y下面是正值，上面是负值z轴：垂直屏幕 注：往外是正值，往里是负值6.2 3D位移 tranlate3D语法：transform: translateX() translateY() translateZ()属性描述translateX沿着X轴移动translateY沿着Y轴移动translateZ沿着Z轴移动
2021-02-01 22:49:12
93
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人