自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(33)
  • 收藏
  • 关注

原创 微信小程序bindtap不生效的解决方法

用bindtap监听输入框的时候不生效可以尝试将基础库调成最新的版本,如下:详情 -> 调试基础库

2022-03-28 17:27:58 7018

原创 解决vue.js not detected的问题(不用重装)

安装完 vue.js devtools 后发现图标不亮,显示vue.js not detected。看了很多解决方法都是说重装什么的,还有的让打开bilibili看图标亮不亮来判断(试了也不亮)...但是我并没有删了重下,试了一下关闭 Chrome 然后重新在终端 npm run serve ,成了!!大家不妨试试这个方法!...

2022-03-15 21:24:09 2598

原创 js防抖具体实现及详细原理步骤说明(含实例)

ps:本文将从一个案例出发循序渐进,在其中你不仅能知道防抖是如何实现的,还可以学习到关于 this 、apply、arguments 等知识的具体应用。Why?为啥要有防抖?因为有时候频繁的事件触发是没有意义的,不仅影响性能还可能造成卡顿。为了避免这种情况,我们需要用防抖来解决这个问题。What? 啥是防抖?防抖debounce:简单来说,防抖的效果就是在你连续点击了同一个事件在n秒后,只会触发一次。How? 防抖咋用啊?首先先从一个实例入手:我们

2022-03-15 18:14:49 9892 4

原创 VSCode配置代码片段(使用快捷键即可生成Vue模板)

1.打开设置 -> 用户代码片段2.在此选择需要添加快捷模板的文档类型(以 javascript 为例):3.在打开的文件中按照提示写入需要的模板(以新建 Vue 实例的模板为例):{ "Print to console": { "prefix": "v1", //这里的vue是代码指令,你可以随意更改 "body": [ // body[]中的代码就是 输入vue指令后显示的代码 "new Vue({", "

2022-03-01 15:19:43 1976

原创 关于javaScript原型的理解(配合公式记忆)

理解原型:关键在于理解这一点:实例与构造函数原型之间有直接的联系,但实例与构造函数之间没有。 ——摘自《JavaScript高级程序设计》首先声明一个构造函数(用函数表达式的方式也是可以的):function Person () {}构造函数有个 prototype属性,引用其原型对象,故:声明之后构造函数就有了一个与之关联的原型...

2022-02-20 14:54:59 433

原创 js手写filter()函数(含原理和步骤解析)

定义和用法filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。注意:filter() 不会对空数组进行检测。注意:filter() 不会改变原始数组。语法array.filter(function(currentValue,index,arr), thisValue)注意:function参数必选,thisValue参数可选手写步骤:1. 先判断参数是否为函数,否则直接返回2.创建一个新数组用于返回filter后的结果...

2022-02-20 13:55:52 2103

原创 关于变量提升、函数声明和变量声明的优先级(题解)

猜猜这道题的结果是什么?结果是抛出异常!(如下)其中涉及到了变量提升和函数声明与变量声明的优先级判断。首先先来分析一下这段代码中的变量提升:在js中,会将 var a = 100; 看成两个操作,分别是 var a; 和 a = 100; ,简单的说,变量提升可以看成 var a; 这个声明的操作移动到了当前作用域的最前面,而 a = 100; 这个赋值操作会在原地等候顺序执行。其次我们再来分析一下函数提升:类似于上面的变量提升,函数声明也会移动到当前作用域的最...

2022-02-16 14:39:16 327

原创 js数据类型和typeof返回数据类型(含简单记忆口诀)

js数据类型(USONB):简单记忆:U (are) so NBU:undefinedS:string symbolO:objectN:number nullB:booleantypeof返回的数据类型:undefined string symbol object number function boolean简单记忆:在js数据类型的USONB七种数据类型基础上 无脑(null)有房(function)...

2022-02-08 14:57:27 479

原创 important和max-width优先级比较及important覆盖css样式的总结

假设网页显示的div宽度是x(以下情况不包含ie6)max-width采用嵌套样式写法的情况:1.1、max-width < width时,x = max-width1.2、max-width > width时,x = width1.3、!important的width > max-width时,x = max-width1.4、!important的width < max-width时,x = !important的width以1.3为例:<h.

2021-12-21 14:41:34 1048

原创 img标签是什么元素?为何margin: 0 auto;对img标签失效?(含解决方法)

首先,img 标签是块元素、行内元素还是行内块元素?可以肯定的说,img 标签确实是一个行内元素(不是我定义的,自己查官方文档)但是也许有人好奇为啥 img 作为一个行内元素又可以设置宽高?因为它不仅是一个行内元素,还是一个可替换元素(不是我定义的,自己查官方文档)可替换元素:浏览器根据元素的标签和属性,来决定元素的具体显示内容就像文档中说的一样,img 标签就是一个可以设置宽高的行内元素,所以它就像行内块元素一样接下来再来分析一下 marg...

2021-12-21 12:25:23 5440 1

原创 关于浮动(float)的原理和特性及如何清除浮动

浮动(float):float 属性用于创建浮动框,可以向左或右移动直至包含块或另一浮动框的边缘。语法: 选择器 { float: 属性值; }属性值 描述 none 元素不浮动(默认值) left 元素向左浮动 right 元素向右浮动 1.浮动的工作原理:浮动元素脱离文档流,不占据空间。2.浮动的特性:浮动元素会脱离标准流(脱标),即浮动的盒子不再保留原先的位置 浮动的元素会在一行内显示并且元素顶部对齐(除非宽度不够在一行才..

2021-12-16 18:44:00 2496

原创 解决Element-UI的Cascader级联选择器的选项框位置问题

在使用Cascader级联选择器的时候出现如图所示的选项框超出浏览器显示区域的问题,可以使用以下方法解决解决方法:在全局样式表 #global.css 中书写以下样式:.el-cascader-panel { height: 300px;}注意:如果直接在当前vue文件中的style添加样式无法生效...

2021-11-30 15:09:24 1566

原创 解决Vue中Element resetFields()重置表单不生效的问题(含Cannot read property ‘resetFields‘ of undefined问题解决)

解决Vue中Element resetFields()重置表单不生效的问题,解决Cannot read property ‘resetFields‘ of undefined问题

2021-11-25 19:48:35 26345 13

原创 解决scope is defined but never used(scope红色波浪线)

可以尝试使用以下解决方法:在这行代码前添加一行eslint-disable-next-line 的注释即可解决

2021-11-17 15:24:21 1123 3

原创 解决Invalid prop: custom validator check failed for prop “index“

在使用element-ui菜单的时候,浏览器报错如下:错误代码:错误原因:index属性只接受字符串类型,而我代码中的subItem.id是一个数值,需要转换为字符串类型数据才不会报错解决方法:可以直接在subItem.id后直接用引号加一个空的字符串,因为数值和字符串拼接会得到字符串,从而得以解决问题...

2021-11-16 14:32:55 2477

原创 vue项目中出现net::ERR_CONNECTION_TIMED_OUT

在做项目的过程中我遇到如下问题:在浏览器发送请求以后确实是得到了响应数据,但是过了几秒就一直弹出GET的错误net::ERR_CONNECTION_TIMED_OUT经过查阅以后发现可能是更换了网络环境造成的,于是我用以下方法得以解决:在谷歌浏览器中进行如下设置,设置完成后不再报错...

2021-11-11 16:32:39 6030

原创 vue中 v-model 和 :model 的区别

今天在写demo的时候发现一件奇怪的事:当我在给 input 元素使用 v-model 的缩写形式 :model 时,想要绑定的数据并没有渲染到浏览器中然鹅,改为 v-model 之后就能成功渲染了于是经过我一番研究发现 :model 其实相当于 v-bind:model 的缩写,对于我想要绑定的 input 的值应该使用v-bind:value ,所以如果在 input 元素上想要使用缩写形式应该是 :value ,经过我的试验发现这种缩写形式确实是可行的,数据可以成功渲染到浏览...

2021-11-09 19:41:47 19908 3

原创 Node.js Error: Cannot find module express的解决办法

参考了各种教程全局安装了express后都没有问题:再按照各种教程说的在自己的工程目录下再次执行:npm install express但是结果还是err!(差点心态崩了!!!)于是我尝试用以下方法成功解决了工程目录下安装express失败的问题:1.以管理员身份运行VScode2.在VScode中打开工程文件夹,新建终端3.在终端内执行 npm install express 就可成功安装了 :最后!!终于跑起来了!!!...

2021-11-08 17:09:22 999

原创 cmd中vue ui无反应的解决方法(含vue ui过慢的解决方法)

1.在cmd中输入 vue -h若在commands里没有ui这项,则说明版本过旧,需要卸载:npm uninstall vue-cli -g2.为了快速安装 @vue/cli 可用 cnpm,没有cnpm的可以先用tb镜像安装cnpm:npm install -g cnpm --registry=https://registry.npm.taobao.org3.安装 @vue/cli :cnpm install -g @vue/cli4.安装成功后如下:5...

2021-11-08 11:53:51 2298

原创 Vue的v-show和v-if指令作用原理及区别

v-show:作用:根据布尔值真假切换元素的显示状态原理:修改元素的display,实现显示隐藏用法: 指令后面的内容最终都会被解析为布尔值 值为true元素显示,值为false元素隐藏 数据改变后,对应元素的显示状态会同步更新 v-if:作用:根据表达式的真假切换元素的显示状态原理:通过操纵DOM元素来切换显示状态用法: 表达式的值为true,元素存在于DOM树中,为false,从DOM树移除 数据改变后,对应元素的显示状态会同步更

2021-11-04 11:56:56 694

原创 gitee码云上传项目/代码到仓库

1.在要上传的文件夹右键,选择 Git Bash Here2.在弹出的 Git 命令窗口输入 git init3.复制 gitee 仓库的HTTPS链接4.在 Git 命令窗口输入 git remote add origin + 复制的HTTPS链接5.在 Git 命令窗口中输入 git pull origin master 并在弹出的窗口中输入码云的登陆账号及密码6.输入 git add . (表示所有文件)7.输入git c...

2021-11-03 11:35:17 676

原创 设置CORS响应头实现跨域(含CORS含义及原理)

CORS(Cross-Origin Resource Sharing),跨域资源共享。CORS是官方的跨域解决方案,其特点是不需要在客户端做任何特殊的操作,完全在服务器中进行处理,支持 get 和 post 请求。跨域资源共享标准新增了一组 HTTP 首部字段,允许服务器声明哪些源站通过浏览器有权限访问哪些资源。原理:CORS通过设置一个响应头来告诉浏览器,该请求允许跨域,浏览器收到该响应后就会对响应放行。实现:(只需在服务端加上响应头)app.all('/cors-server',(

2021-11-02 19:45:07 4287

原创 JSONP实现跨域的原理

JSONP(JSON with Padding)是一个非官方的跨域解决方案,只支持get请求。JSONP是借助script标签实现跨域的,网页中有一些标签本身就具有跨域能力,例如:img link ifame script如果在服务端直接返回数据则前端浏览器无法解析,需要返回 js代码 (可以返回一个函数的调用)以下为直接返回数据的例子:(浏览器无法解析)返回 js 代码:服务端响应 js 代码浏览器才能解析并执行返回的内容注意:如果返回的是一个函数的...

2021-11-02 18:56:33 414

原创 nodemon工具的安装及使用特点

nodemon工具用处:nodemon可以实现当文件内容修改以后自动重启应用,它可以自动监测文件的变化(使用nodemon即使不断修改服务端代码也无需多次手动重启服务)nodemon安装:1.以管理员身份打开VScode2.打开终端输入以下命令:npm install -g nodemonnodemon启动:nodemon XX.js例如:...

2021-11-02 11:08:36 142

原创 AJAX的特点

AJAX(Asynchronous JavaScript And XML)即异步的 JS 和 XML:通过 AJAX 可以再浏览器中向服务器发送异步请求,最大的优势:无刷新获取数据。AJAX 不是新的变成语言,而是一种将现有的标准组合在一起使用的新方式。AJAX 的优点 可以无需刷新页面与服务器进行通信 允许你根据用户事件来更新部分页面内容 AJAX的缺点 没有浏览历史,不能回退 存在跨域问题(同源) SEO不友好 SEO : Search En

2021-11-01 20:12:55 285

原创 微信小程序之rpx尺寸单位及换算方法

rpx (responsive pixel):响应单位 rpx 可以根据屏幕宽度进行自适应,规定屏幕宽为750rpx rpx 是小程序中使用的屏幕自适应的尺寸单位 可以通过 rpx 设置元素和字体的大小 换算方法(用法与 rem 类似): rpx 为小程序中的相对单位,即1 rpx = 屏幕宽度 / 750 px 例如:iPhone6屏幕宽度为 375 px,若要绘制宽为 200px,高为 150px 的盒子,换算为 rpx 单 位:1 r...

2021-11-01 19:53:43 8491 2

原创 解决npm init --yes出现ERR!的问题

在 VSCode 终端输入 npm init --yes 命令时出现以下问题:解决方法:npm init按照自定义的方式输入完毕以后会进入确认环节,输入:Y

2021-10-24 22:09:30 1338 4

原创 JS中this指向问题(含Vue、ES6中箭头函数的this问题)

this指针(一般情况):this 的指向在函数定义时是确定不了的,只有函数执行时才能确定 this 到底指向谁,一般情况下,this 的最终指向是调用自己的对象。1.全局作用域或普通函数中的 this 指向全局对象 window注意:定时器中的 this 指向 window,因为定时器是 window 调用的2.方法调用中谁调用 this 就指向谁3.构造函数中 this 指向构造函数的实例对象箭头函数中的this指针:1.this 是静态的,this 始终指向函数声明时所

2021-10-23 21:45:40 375

原创 本地存储之sessionStorage和localStorage的用法

本地存储的特性:数据存储在用户浏览器中 设置、读取方便 刷新不丢失等。 window.sessionStorage生命周期:关闭浏览器窗口 同一窗口下数据可共享 以键值对的形式存储使用 存储数据:sessionStorage.setItem(key, value) 获取数据:sessionStorage.getItem(key) 删除数据:sessionStorage.removeItem(key) 删除所有数据:...

2021-10-23 16:07:50 166

原创 PC端轮播图与移动端轮播图的区别总结

首先,在图片的克隆问题上,PC端只需在原有最后一张图片后添加p1的克隆,而移动端因为触屏滚动的需求 在p1的前面需要再添加原有最后一张图片的克隆其次,PC端在实现滚动动画效果时采用的方法是在 js 使用 animate 动画函数,而移动端则是采用 css3 的过渡效果实现滚动动画ul.style.transition = 'all .3s'; //c3过渡效果 (ul存放图片)ul.style.transform = 'translateX('+ translateX +'px)';最大区

2021-10-22 22:10:55 397

原创 js轮播图节流阀的实现

防止轮播图按钮连续点击造成播放过快。作用:当上一个函数动画内容执行完毕再去执行下一个动画,让事件无法连续触发。核心思路:利用回调函数,添加一个变量来控制,锁住函数和解锁函数。以点击下一章图片按钮为例,代码如下:var flag = true; //flag作为节流阀开关element.addEventListener('click',function() { if(flag) { flag = false; //关闭节流阀(锁住函数)

2021-10-21 11:21:41 458

原创 JS实现轮播图图片无缝滚动原理

当轮播图滚动至现有图片最后一张时,需要让轮播图下一跳回到第一张图片,从而实现无限无缝循环滚动效果,但是为什么需要采用克隆来实现呢?为什么不直接从最后一张回到第一张?原理:在我们采用 num 变量计算图片移动的次数时,增加了一个 if 的判断条件,用于判断图片是否滚动至最后一张图片位置,如果没有复制或者克隆来新增一个子节点,循环就会在到达最后一张图时num 和left 变为 0 ,但是结束了 if 判断后会有一个 num 自增的动作,所以 num 变为 1 ,就会直接跳到第二张图,故需要克隆第一张图片作.

2021-10-20 22:03:17 5221 1

原创 Typora红色波浪线解决方法

出现这种问题是可以采用以下解决方法:文件 -> 偏好设置 -> 编辑器 -> 拼写检查 -> 不使用拼写检查 选中波浪线部分右键 -> 添加到字典

2021-10-19 15:32:49 2787 1

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除