自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

zenkle的博客

菜菜酱

  • 博客(101)
  • 收藏
  • 关注

原创 修改elementui表格的下拉箭头

使用elementui自带的图标,原先表格的下拉箭头是这样的如果想按照elementui自带的图标进行修改,右边tab选择到图标对应处,F12打开开发者工具选择想要使用的图标,在开发工具中打开自定义图标会发现图表可以结合伪元素:after进行content输入选择对应的图标。针对表格的展开行图标自定义,也可以按照:before设置content进行图标选择,下面提供一种方式:/deep/.el-table__expand-column .cell { .el-table__expand-ico

2020-07-17 17:59:21 6163

原创 react梳理

react的生命周期如果有defaultprops会先初始化,之后经过constructor初始化state,之后会走进componentwillmount进行初始化,在componentwillmount阶段setState不会引起rerender,之后进行render首次渲染,在此过程中render经过编译后生成createElement的形式生成以js组成的虚拟dom结构,通过reactD...

2020-04-30 14:59:47 176

翻译 简易版webpack搭建react

1、将自定义样式放到head中在style-loader初设置insert:'top'2、使用autoprefixer配合postcss-loader来添加前缀不起作用也不报错,在package.json文件中添加"browserslist":["iOS>=6","Android>=4","IE>=9"],3、...

2020-03-22 21:49:40 285

原创 sass

sass是一种预编译器在引入时需要将.scss文件通过easy watcher编译成.css通过@import './文件名.css'的方式引入进来变量复用:变量声明以$变量名形式声明对于多个变量用于全局,可以通过@mixin 名称 进行定义;在需要使用的地方使用@include 名称 直接放进去@extend 选择器名称 会继承对应选择器下的所有样式,同时嵌套在内部的子元素样...

2020-03-17 21:08:49 97

原创 redux

首先在进行父子组件传值时,由于react是单向数据流,父组件数据可以通过props流向子组件,可以通过props传值子向父传值通过props和回调函数当页面增多逻辑变得复杂时可以通过redux做集中数据管理:1、组件通过store.dispatch(action)触发,更改存储在store中的数据;每次dispatch都可以通过store.subscribe()订阅store变化2...

2020-03-17 18:52:29 93

翻译 前端路由

前端路主要分为两个方式。一个是hash,一个是history(更改url但不刷新页面)1、hashhash在写法上主要是'#/.......'这么一个形式。原先是作锚点使用。主要体现方式就是超链接形式<a href='#/.......' >aaa</a>。点击aaa的时候会跳转到对应的连接地址同时浏览器的url也会相应改变同时hash方法提供onhashc...

2020-03-13 14:55:48 189

原创 不定高div垂直居中

<div class="title"> <div class="left">a</div> </div>1、flex.title{dispaly:flex;height:100%;align-items:center;justify-content:center;}.left{background:red;...

2020-03-06 22:50:29 87

原创 遍历数组获取到值后立即跳出

通过every+return false、some+return true来实现终止循环;提升性能 selectScrollAppSources = key => { if (this.props.SourceReducer.sourceList) { this.props.SourceReducer.sourceList.every(item => { ...

2020-02-13 18:48:01 1095

原创 获取缓存值为对象的属性值时为undefined

Obj是对象:在进行localStorage.setItem('name',Obj)进行存储时直接存储会显示[object object],先将其转为字符串存进去,常用JSON.stringify(Obj)localStorage.setItem('name',JSON.stringify(Obj))在localStorage.getItem('name').key时取不到对应的值O...

2020-01-02 10:46:30 1454

原创 antd Select将默认值defaultValue设为后端拉取数据的对象属性值时报undefined

问题:从后端拉取到数据放到sourceList数组中,每个item都是对象,在获取对象的value属性值时一直报错显示value为undefined原因:defaultValue只会读取一次数据,页面刚进来的时候在componentDidMount中调用接口传来的数据,此时只是拉取到了数据但还没有真正获取到,等到下一次render之后状态才会更新,在ComponentDidUpdate的时候是...

2020-01-01 22:04:22 2965 3

原创 react(todoList)

react主要是组件化管理,写法上都是使用jsx,将代码渲染到页面上也是通过render函数,通过虚拟dom的patch将vNode渲染到页面上1、首次创建todoList:state:state相当于vue中的data,通过操作state来更新界面数据 setState:没有办法实现vue的响应式,通过setState手动更改state数据状态 this指向:需要搞清楚this到底指...

2019-11-17 10:19:07 89

原创 字符串

string的常用API:split():按照括号内指定的位置对字符串分割并保存在数组中。charArt(index):返回括号内指定位置的字符indexOf():返回括号内指定字符在字符串中首次出现的位置substring(start,end):返回从start位置开始到end-1位置的字符串(end位不包括)substr(index,length):返回index位置开始长...

2019-10-29 10:39:55 444

原创 海康面经

1、节流的算法2、setTimeOut原理3、函数内嵌套函数的写法4、父子组件传值以及非父子组件传值5、eventbus的底层原理(发布订阅模式)6、父子组件传值的有什么其他更快捷的方法7、http1.x和http2.x的区别8、https和http的区别,https是对什么加密的9、vue-router路由模式(hash、history)10、vue路由全局守...

2019-10-22 14:04:00 298

原创 div块垂直居中

//1<body> <div class="div1"></div></body><style> .div1 { width: 200px; height: 200px; background: pink; position: absolute;...

2019-10-14 21:31:13 163

原创 DOM

DOM可以理解为将document按照节点顺序排列的一种文档模型;通过js可以修改dom(这也是js是单线程的原因之一) 事件捕获时先从document开始再到html再向下一级一级捕获;dom的根目录是document 常见的节点类型有元素节点(element)、属性节点(Attr)、文本节点(text)、注释节点(comment);对应的nodeType分别为为1、2、3、8; 可以通过...

2019-10-12 12:30:29 80

原创 正则表达式

str.match():匹配字符串中所有符合的字符并以数组的形式输出1、匹配所有的汉字 /[\u4e00-\u9fa5]/g2、匹配所有的数字/\d/g3、匹配所有的非数字/\D/g4、匹配所有的空格 /\s/g5、匹配所有的数字、英文、下划线/\w/g6、不区分英文大小 \i var str = '金额为11,11,7.20'; var b = /\d/g...

2019-10-10 16:14:02 85

原创 输入'niHao aAz'实现输出为'ni_hao a_az'

var b = 'niHao aAz' //输出ni_haovar a = b.split('')var str = [];for (var i = 0; i < a.length; i++) {if (a[i] >= 'A' && a[i] <= 'Z') {str.push('_')str.push(a[i].toLowerCase(...

2019-10-10 15:49:07 228

原创 eventBus实现兄弟组件通信

1、新建一个bus.js并写入import Vue from 'Vue'export default new Vue2、在需要传递信息的子组件中分别引入bus.jsimport Bus from "bus.js路径";3、通过Bus.$emit向外触发事件(一般click事件向外触发)Bus.$emit('事件名',message) 通过Bus.$on监听...

2019-10-06 22:49:18 387

原创 css3总结

1、常见新增属性border-radius、border-image、box-shadow、background-image、background-size、background-Origin(border-box;padding-box;content-box)、background-clip(border-box;padding-box;content-box)Linear Gr...

2019-10-06 18:44:36 128

原创 css画三角形+扇形+气泡框

主要利用border特性来绘制三角形: .kkk { width: 0; height: 0; border: 50px solid; border-color: yellow blue pink black; }<div class="kkk"></di...

2019-10-04 09:29:44 230

原创 export、import、export default

export 、export default 主要用于导出模块,将接口、常量、函数等输出import主要用于将需要的文件输入使用export+import需要在引入时添加 { }var a='name'var b='age'export {a,b}或者export aexport bimport {a,b} from '文件名'使用export default+i...

2019-09-30 16:53:52 114

原创 大华校招前端面试

三轮面;两轮技术面,一轮hr面,虽然都面完了不过觉得没啥戏,自己的优势被自己坑了一波完全没显现出来的亚子,技术面问的问题比较基础;答案网上可以搜到1、h5中<video>支持的媒体格式1、MPEG-42、ogg3、WebM2、怎么理解h5标签语义化?https://www.cnblogs.com/coding-swallow/p/7891757.html1、因...

2019-09-30 09:54:44 900

原创 数组去重

//1、使用new Set//2、indexOf//3、先排序,后比较//1、使用new Setvar a = [1, 2, 1, 3, 2, 1]var arr=new Set(...[a]);console.log(Array.from(arr));//2、indexOf var a = [1, 2, 1, 3, 2, 1] var arr = [...

2019-09-27 16:26:50 66

原创 面试题

1、如何实现”两边固定,中间自适应2、什么是盒子模型?3、null和undefined有什么区别?4、let和const他们有什么区别?5、什么是伪类和伪元素,他们有什么不同?6、有什么方法可以检查数据类型,这些检测方法有什么不一样?7、js创建函数的方法有哪些?他们之间有什么区别呢?8、通过构造函数new一个实例对象,它的具体实现过程是什么样子的?9、为什需要原型?原型和原型链...

2019-09-25 10:22:10 151 1

原创 宽度自适应

给图片添加一个容器将其放进去,为了实现图片的自适应,将此容器height设为0,通过padding-bottom设置宽度比继承其父元素宽度并按照宽度比设置此容器的高度,之后将图片塞进去,图片的一边设置比例另一边也会根据比例相应的缩放。如果不添加容器对图片直接做自适应样式设置,图片的高度为0,高度撑不开也就无法显示出来<!DOCTYPE html><html>&...

2019-09-09 15:12:01 889

原创 BFC

什么是BFC(块格式化上下文)BFC(块格式化上下文)是针对块级盒子的渲染机制,形成独立的渲染区域,只对内部元素有效一个块格式化上下文包括创建它的元素内部所有内容,但是内部元素也被设置为BFC后就不会再与之相互影响。BFC原理(渲染规则)1、创建了BFC的元素中,垂直方向上的margin会重叠2、BFC元素是一个独立区域元素,不会与外部元素相互影响3、不会和浮动元素重叠4...

2019-08-29 16:28:19 89

原创 &&和||

类型转换可转换为假值: false、null、undefined、空字符串、±0、NAN1、在做&&操作时有一个假值,返回假值都为真,返回右侧值都为假,返回左侧假值[] && 1 //1'' && 2 //''2、在做||操作时有一个真值,返回真值都为假,返回最后一个假值都为真,...

2019-08-28 20:34:20 70

原创 重绘和回流

在将render树渲染到页面时,通过回流从根节点遍历整颗render树计算得到每个节点的位置和大小,重绘会获取到元素外观也就是说节点只更改外观不会影响布局会引起重绘,样式布局改变或是几何属性改变会引起回流,回流一定会导致重绘常见引起回流和重绘的操作:https://www.cnblogs.com/stitchgogo/p/7920828.html1、页面首次渲染2、节点的位置...

2019-08-28 16:36:42 67

原创 css实现”两边固定,中间自适应''+双飞翼、圣杯布局

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...

2019-08-28 15:39:36 120

原创 浏览器输入网址到显示在页面发生全过程

通过dns域名解析ip浏览器会递归查询也就是浏览器只跟本地域名服务器请求ip地址本地域名服务器没有,本地域名服务器自己会执行迭代查询,一级一级向下查找根dns服务器、顶级域名服务器(.com)、二级域名(baidu.com)……知道最终找到ip地址本地域名服务器找到后将其返回给浏览器并缓存到本地供下次查询使用浏览器根据ip建立tcp连接(三次握手)通过三次握手连接服务器指定端口...

2019-08-28 12:36:12 300

原创 git基础操作

1、安装git :https://www.jianshu.com/p/7edb6b838a2e2、在github上创建空仓库后下拉到本地进行vue编译在终端通过git clone从远程库将文件下载到本地下载vue-cli:sudo npm install --global vue-cli给我们下拉到本地的文件夹搭建vue脚手架: sudo vue init webpack 文件...

2019-08-23 15:22:31 146

原创 原型和原型链

参考:https://www.jianshu.com/p/ddaa5179cda6参考:https://www.cnblogs.com/duyingxuan/p/6474163.html每当定义一个函数数据类型(普通函数、类)时候,都会天生自带一个prototype属性,这个属性指向函数的原型对象,并且这个属性是一个对象数据类型的值;对象之间的继承关系,在JavaScript中是通过pro...

2019-08-07 16:24:13 69

原创 js-剑指offer(1-6)

参考:https://www.cnblogs.com/wuguanglin/p/code-interview.html1、在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序。请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数。1、二维数组表示var array=[[1,2,3],[4,5,6],[7...

2019-08-06 19:37:58 112

转载 js获取容器的大小(宽高)

通过JS获取盒模型对应的宽和高,有以下几种方法:1. dom.style.width/height这种方式只能取到dom元素内联样式所设置的宽高,也就是说如果该节点的样式是在style标签中或外联的CSS文件中设置的话,通过这种方法是获取不到dom的宽高的。2. dom.currentStyle.width/height这种方式获取的是在页面渲染完成后的结果,就是说不管是哪种方...

2019-08-05 11:08:06 4614

原创 删除两个数组中相同的对象

var arr1=[{id:1},{id:2},{id:3},{id:4},{id:5}]var arr2=[{id:1},{id:2},{id:3}]var set=arr2.map(item=>item.id)console.log(set)var resArr=arr1.filter(item=>!set.includes(item.id))console.log(...

2019-07-31 12:23:20 1881

原创 深拷贝和浅拷贝

对象存储在堆中,js无法直接访问存储在堆内存中的数据,但可以通过引用方式来访问或修改此类数据,将对象赋给另一个对象后这两个对象所指的内存地址为同一个地址相互影响,改变一个另一个也就跟着变var a={ class:" 21"}b=ab.class="30"console,log(a.class)//30浅拷贝就只拷贝对象的第一层属性,属性下如果还有对象因为被引用指向同一片内存...

2019-07-29 13:15:49 96

原创 js小知识点梳理(1)

typeoftypeof undefined//undefinedtypeof b // undefinedtypeof null//objecttypeof string//stringtypeof number//numbertypeof NaN//number NaN 也属于 number 类型,并且 NaN 不等于自身。typeof boolean//b...

2019-07-25 16:37:49 83

原创 vue3.+安装

1、默认已有node、npm2、安装sudonpm install -g @vue/cli3、创建项目vue create 项目名称4、运行项目npm run serve

2019-07-18 17:13:28 4128

原创 vue小型travel项目遇到的知识汇总(3)

1、获取高度:https://cloud.tencent.com/developer/article/1399084scrollHeight:获取对象的滚动高度scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离scrollWidth:获取对象的滚动宽度offset...

2019-07-18 16:44:40 205

原创 vue小型travel项目遇到的知识汇总(2)

1、父子组件通信(兄弟组件联动可以将父组件当做桥梁子组件向父组件传递,父组件再传递给它的兄弟组件,兄<->父<->弟)父组件向子组件传递消息:props子组件向父组件传递消息:子组件通过this.$emit()派发事件 父组件利用@(v-on)对事件进行监听,实现参数的传递vm.$emit( 'event', arg )...

2019-07-10 22:14:01 150

空空如也

空空如也

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

TA关注的人

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