![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
xvzhengyang
这个作者很懒,什么都没留下…
展开
-
Vue中的状态管理Vuex,基本使用
Vuex的基本讲解 Vuex的基本使用原创 2024-03-21 15:28:24 · 1049 阅读 · 0 评论 -
ReactNative实现的横向滑动条
ReactNative实现的横向拖动条,HorizntalSlider,滑动条原创 2024-02-04 11:46:09 · 676 阅读 · 0 评论 -
ReactNative实现弧形拖动条
ReactNative实现的户型拖动进度条原创 2024-02-04 10:32:26 · 646 阅读 · 0 评论 -
ReactNative实现一个圆环进度条
ReactNative实现的圆环进度条原创 2024-02-04 10:09:57 · 931 阅读 · 0 评论 -
Vue使用Element UI自带的滑动组件el-scrollbar
el-scrollbar 使用 select显示不全原创 2023-06-25 09:30:19 · 1459 阅读 · 0 评论 -
TypeScript的安装与简单使用(第一篇)
typescript的学习,安装原创 2022-09-16 00:08:25 · 448 阅读 · 0 评论 -
如何使用nvm切换node版本
node nvm nvm的使用原创 2022-09-15 23:28:27 · 5948 阅读 · 4 评论 -
Vue项目性能优化的一次记录
vue.js 预渲染 减少包体积 首页加载优化原创 2022-08-26 01:14:02 · 763 阅读 · 0 评论 -
抓包神器Fiddler配置(网上很多,但是都有坑,不完整)
1.首先是下载地址,建议大家还是官网下载比较合适地址:Download Fiddler Web Debugging Tool for Free by Telerik2.下载安装之后 2.1 设置,如下图所示这两步设置好了之后,切记,关闭,重新打开fiddler,否则可能无法下载证书;2.2 重启之后,手机和pc电脑链接同一个局域网,通过ipconfig命令,可以获取pc端的ip地址手机浏览器输入pc端获取到的ip地址,以上面为例子http://...原创 2021-11-25 14:36:23 · 2070 阅读 · 0 评论 -
Vue使用hook销毁定时器
The SDK platform-tools version ((25.0.3)) is too old to check APIs compiled with API 26之前升级了sdk版本到26但是,新建项目的时候原创 2021-06-30 19:08:58 · 372 阅读 · 0 评论 -
JS数组去重方法集合
1. 利用双重for循环去重//定义一个新数组,先存放不可能与arr重复的第一个元素let newArr = [arr1[0]]for (let i = 1; i < arr.length; i++) { //设置标记flag let flag = true for (let j = 0; j < newArr.length; j++) { //如果两个相等,标记该i为false(重复),并退出该循环 if (arr[i] ==转载 2021-06-28 19:19:04 · 2344 阅读 · 0 评论 -
div设置百分百高度实现
在html布局中body内第一个div盒子对象设置100%高度height样式,是无法成功显示100%高度的。这个是因为body高度默认值为自适应的,所以及时设置body第一个布局div高度为百分比也是无效的,因为div解析上级高度为0,自然div height 100%实际高度也为0。浏览器根本就不计算内容的高度,除非内容超出了视窗范围(导致滚动条出现)。或者你给整个页面设置一个绝对高度。否则,浏览器就会简单的让内容往下堆砌,页面的高度根本就无需考虑。因为页面并没有缺省的高度值,所以,当你让...原创 2021-04-19 19:27:06 · 2996 阅读 · 0 评论 -
使用canvas绘制路线图
根据接口返回的坐标点位,我们可以将这些左边点位串联起来,形成轨迹图<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>根据返回的坐标,针对当前容器的大小占比</title> <style type="text/css"> .patrol-path { position: absolute; left: 0;原创 2021-03-16 23:10:22 · 1697 阅读 · 0 评论 -
使用canvas定义线的开头和结尾的形状
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div> <canvas id="canvas" width="" height=""></canvas> </div> <script type="text.原创 2021-03-16 23:07:54 · 158 阅读 · 0 评论 -
JS调试技巧-持续更新
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>调试小技巧</title> </head> <body> <div id="app"> <p>\config\index.js</p> <span> 本地正常启动vue项目,localhost:9001 本地.原创 2021-02-04 11:30:27 · 70 阅读 · 0 评论 -
chrome谷歌浏览器如何让网站可以自动播放音乐
众所周知,谷歌浏览器在18年开始禁止网页自动播放音乐和视频,除非是静音播放;但是需求又需要我们当在一个合适的时机去播放声音,这就比较麻烦了;第一步,浏览器-设置页面-搜索"网站设置"第二步,打开网站设置-找到 "声音"第三步:添加网站第四步:检查声音到此为止,浏览器重新打开即可...原创 2020-12-25 11:17:51 · 8142 阅读 · 0 评论 -
js中的isNaN() 函数解释
isNaN() 函数用于检查其参数是否是非数字值。如果参数值为 NaN 或字符串、对象、undefined等非数字值则返回 true, 否则返回 false。之前理解为nan或undefined就会true,原来是这个主要是检测非数值原创 2020-12-02 22:23:02 · 2087 阅读 · 0 评论 -
js中4个强大的操作符
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>4个强大的操作符</title> </head> <body> <script type="text/javascript"> // 1. ?? 操作符 零合并操作符 nullish coalescing运算符 // 作用:。如果第一个参数不是.原创 2020-12-02 22:17:20 · 109 阅读 · 0 评论 -
实战篇误区-持续更新
记录一下实战误区1.获取从接口返回的数据,一般会去判断data是否存在,接着获取我们想要的数据,譬如price;const price = data && data.price ? '未定价' : data.price;上面看似没有问题,实际上是是有问题的,加入价格是0呢,那就会显示未定价了;所以要结合具体场景来处理;当然我们也可以 使用??操作符(如果第一个参数不是null/undefined,这个运算符将返回第一个参数,否则,它将返回第二个参数。)const pric原创 2020-12-02 22:16:32 · 65 阅读 · 0 评论 -
js中gmt时间转换为普通时间格式
renderTime(date) { var dateee = new Date(date).toJSON(); return new Date(+new Date(dateee) + 8 * 3600 * 1000) .toISOString() .replace(/T/g, " ") .replace(/\.[\d]{3}Z/, ""); }时间格式转换譬如:"2020-11-30T13:09:58.000+...原创 2020-12-01 23:54:41 · 784 阅读 · 0 评论 -
js事件冒泡-基础
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .one { background-color: red; height: 500px; } .two { background-color: #0000FF; height.原创 2020-12-01 23:29:09 · 176 阅读 · 0 评论 -
js数字的工具
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script type="text/javascript"> /* toString()方法,将数字作为字符串返回。但是,如果提供参数,例如2、8或16, 它将分别返回二进制,八进制或十六进制值.原创 2020-12-01 23:26:17 · 138 阅读 · 0 评论 -
为什么不推荐用for...in遍历数组
for...in本身是Object的遍历方法,js中的数组也继承自Object,所以自然而然也能使用for...in遍历出属性。然而for...in有一些难以注意到的细节,稍不注意就可能被坑。1. 细节一:遍历的的属性值是字符串,而不是数字!(相信初接触js的人都要被坑一次吧)const list = [1, 2, 3] for (let i in list) { console.log(i, i + 1, typeof i) // 0 01 string }可以看到typeo...转载 2020-12-01 23:24:50 · 343 阅读 · 0 评论 -
js实现点击多次实现隐藏于显示
data(){ return { clickTimer: null, waitTime: 500, // 该时间间隔内点击才算连续点击(单位:ms) lastTime: 0, clickCount: 0, // 连续点击次数 }}, methods(){ // 点击多次显示与隐藏 toShowAndHideRecord() { var currentTime = new Date().ge..原创 2020-12-01 23:08:05 · 631 阅读 · 0 评论 -
js 函数节流的一些小知识
一,什么是函数节流概念:限制一个函数在一定时间内只能执行一次。举个例子,坐火车或地铁,过安检的时候,在一定时间(例如10秒)内,只允许一个乘客通过安检入口,以配合安检人员完成安检工作。上例中,每10秒内,仅允许一位乘客通过,分析可知,“函数节流”的要点在于,在一定时间之内,限制一个动作只执行一次。二,为什么需要函数节流原因:开发过程中,有一些事件或者函数,会被频繁地...原创 2020-05-07 22:46:04 · 198 阅读 · 0 评论 -
js中创建对象三种方式
// 方法一 function copyClass(name, age) { this.name = name; this.age = age; this.printInfo = function() { console.log(this.name); console.log(this.age); } } let obj =...原创 2020-05-07 22:10:33 · 185 阅读 · 0 评论 -
CSS属性选择器
顾名思义:属性选择器就是根据属性值来选择元素<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>属性选择器</title> <!-- 顾名思义:属性选择器就是根据属性值来选择元素 --> <原创 2019-03-06 23:08:17 · 401 阅读 · 0 评论 -
CSS 选择器按兄弟选择
根据兄弟元素来选择元素,例如,假设你希望只选择前面有一个<h1>元素的段落,可以使用下面这个选择器 h1+p{ font-style: italic; } /* 先写前面的元素,再写一个'+'(加号),然后是兄弟元素 */ /* 这里的就是: 这个选择器会选择所有紧跟在一个...原创 2019-03-06 23:08:25 · 1995 阅读 · 0 评论 -
css中的伪元素
伪元素:可以用来选择元素的某些部分,这些部分可能不便于包围在div或span中,也不方便用其他方法来选择. 例如 first-letter伪元素可以用来选择一个块元素中文本的第一个字母,这样就能创建诸如首字母大写和首字母 下沉等效果.另外可以使用first-line伪元素选择段落的第一行.效果图如下...原创 2019-03-06 23:08:35 · 170 阅读 · 0 评论 -
表单增加css样式
代码如下<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>表单增加CSS样式</title> <!-- --> <style type="text/css"&转载 2019-03-05 22:38:46 · 1148 阅读 · 0 评论 -
CSS多列布局等分布局,使用flex
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>多列布局等分布局</title> <!-- 使用flex布局,但是兼容性不是很好 --> <style type="text/css原创 2018-11-29 19:50:12 · 1360 阅读 · 0 评论 -
CSS变换和过渡一
/* 鼠标处于悬停状态的时候,旋转45度 PS:效果没有过渡,看下一个html我们看下过渡效果*/<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>CSS变换和过渡</title> <!--...原创 2019-03-06 23:08:02 · 176 阅读 · 0 评论 -
css过渡效果二
鼠标悬停看到动画过渡效果,旋转 缩放 平移以及透明度#box{ position: absolute; top: 100px; left: 100px; width: 200px; height: 200px; ...原创 2019-03-06 23:07:41 · 328 阅读 · 0 评论 -
vue.js中父组件传递值给子组件
1.父组件传递值给子组件 1.1 父需要声明子组件,引入子组件对象,声明方式如下 import 子组件对象 from './xxx.vue'; { components:{ 组件名:子组件对象 ...转载 2019-03-08 21:32:02 · 1553 阅读 · 0 评论 -
开发中应该这样写你的js代码
1.变量相关 1.1 不要滥用变量,尤其是定义了变量,但是后面没有使用(可能一段时间以后自己都不知道定义这个是为甚) 1.2 数据只用一次或者不使用就没必要安装到变量中 1.3 变量的命名:尽量做到见名知意 1.4 特定的变量 1.4.1 对参数不说明 if(array.length < 9 ){ // ...转载 2019-03-07 22:59:16 · 119 阅读 · 0 评论 -
CSS代码技巧
1.当class或者ID包含多个单词时,应使用连字符(-),CSS不区分大小写,因此不能使用驼峰式命名。同样,CSS中也不建议使用下划线连接的命名方式。/* 正确 */.footer-column-left { }/* 错误 */.footerColumnLeft { }.footer_column_left { }2.不要重复设置大多数CSS属性的值都是从D...转载 2019-07-02 23:37:29 · 194 阅读 · 0 评论 -
8个有用的js技巧
https://mp.weixin.qq.com/s/woTlF_rvtqtySK0-BXhkUA1. 确保数组有值let array = Array(5).fill('');console.log(array); // outputs (5) ["", "", "", "", ""]2.获取数组唯一值(去重)const cars = ['Mazda','Ford',...转载 2019-07-02 23:57:43 · 174 阅读 · 0 评论 -
Vue 组件间通信六种方式(完整版)
1.组件实例的作用域是相互独立的,这就意味着组件间的数据无法相互引用;方法一、props /$emit父组件A通过props的方式向子组件B传递,B to A 通过在 B 组件中 $emit, A 组件中 v-on 的方式实现。1.父组件向子组件传值接下来我们通过一个例子,说明父组件如何向子组件传递值:在子组件Users.vue中如何获取父组件App.vue中的数据 users...转载 2019-08-14 18:01:54 · 404 阅读 · 0 评论 -
form表单中其他元素
详细见代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>表单中其他元素</title> <style type="text/css"> div { display: t原创 2019-03-05 22:33:10 · 490 阅读 · 0 评论 -
form表单二之几种常见的表单
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>几种常见的表单</title> <!-- 文本输入 提交输入 单选按钮输入 复选框输入 1.文本输入: text <ipnu原创 2019-03-05 22:29:00 · 487 阅读 · 0 评论