老董前端-CSDN博客

原创新总结的面试题目

1、叙述原型链答案：当一个对象调用自身不存在的属性和方法时就会去自己的prototype对象上去找，如果没有找到就会去prototype的前辈上去找，直到找到或者返回undefiend这个查找的过程就是原型链function Person (name){ this.anme = name}Person.prototype.say = funticon(){ console.log('hello' + this.name)}let p1 = new Person('张三...

2021-02-20 11:05:23 602 1

原创 html面试题(二)html css js

1、一个200*200的div在不同分辨率屏幕上下左右居中，用css实现div{width:200px;height:200px;background-color:red;position:absolute;top:50%;left:50%;margin-top:-100px;margin-left:-100px;}2、写一个左中右布局占满屏幕，其中左右两块是固定宽度2...

2018-09-21 11:12:12 3586

原创 html面试题(一)--html css js

前端面试题汇总一、HTML和CSS1、你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?IE:trident内核Firefox：gecko内核Safari:webkit内核Opera:以前是presto内核，Opera现已改用Google Chrome的Blink内核Chrome:Blink(基于webkit，Google与Opera Software共...

2018-04-08 21:18:12 29451

原创 el-date-picker报错[Vue warn]: Avoid mutating a prop directly since the value will--解决方法

解决使用el-date-picker报错[Vue warn]: Avoid mutating a prop directly since the value will

2022-10-21 08:35:53 690 1

原创关于input type为number的一些样式的设置

input中的placeholder的样式 .el-input__inner::-webkit-input-placeholder { color: #606266; /* WebKit browsers */ } .el-input__inner:-moz-placeholder { color: #606266; /* Mozilla Firefox 4 to 18 */ } .el-input__inner::-moz-placeholder { co

2022-04-15 09:06:26 2171

原创关于Input type为number的长度，数字，保留几位小数的限制(自己意见、仅供参考)

写在这里单纯的目的就是，担心后期遗忘就是平时项目中input的一些限制输入的le-input-number 例如显示长度的时候、自己感觉虽然好用、但是实际项目中的时候会有问题、就是限制长度是在输入完之后才会生效但是实际项目中想要的是、输入超过一定位数就不允许输入<el-input v-model="" type="number" oninput="if(isNaN(value)) {value = parseFloat(value)

2022-04-15 09:03:55 2562

原创【前端面试题】后端接口状态码

2开头（请求成功）表示成功处理了请求的状态代码200 （成功）服务器已成功处理了请求。通常，这表示服务器提供了请求的网页。201 （已创建）请求成功并且服务器创建了新的资源。202 （已接受）服务器已接受请求，但尚未处理。203 （非授权信息）服务器已成功处理了请求，但返回的信息可能来自另一来源。204 （无内容）服务器成功处理了请求，但没有返回任何内容。205 （重置内容）服务器成功处理了请求，但没有返回任何内容。206 （部分内容）服务器成功处理了部分 ...

2022-02-23 15:23:49 363

原创踩坑-package.json中devDependencies与dependencies的区别

我们在安装淘宝镜像之后安装node包的时候，用的是cnpm，这是我自己踩的坑我们在通过cnpm安装插件或库时，有三种方式：cnpm install：将插件安装到项目，但不写package.json（不推荐，这样最终需要手动添加）cnpm install --save：将插件安装进项目，并写入package.json的dependencies中cnpm install --save-dev：将插件安装进项目，并写入package.json的devDependencies中很明显，--sav

2022-02-16 15:40:17 463

原创 vue跳转不同页面的多种方法

1：router-link跳转<router-link to='/testDemo'> <button>点击跳转2</button></router-link> <router-link :to="{path:'testDemo',query:{setid:123456}}"> <button>点击跳转1</button>&

2021-09-27 09:06:25 3869

原创 js获取div的宽度和高度的坑

元素尺寸属性说明 clientWidth 获取元素可视部分的宽度，即 CSS 的 width 和 padding 属性值之和，元素边框和滚动条不包括在内，也不包含任何可能的滚动区域 clientHeight 获取元素可视部分的高度，即 CSS 的 height 和 padding 属性值之和，元素边框和滚动条不包括在内，也不包含任何可能的滚动区域 offsetWidth 元素在页面中占据的宽度总和，包括 width、padding、border 以及滚动条的宽度 o

2021-07-26 15:51:16 1118

原创 vue3.0创建项目的时候截图

每个人的用法不一样我这样只是为了以后更加方便使用4>路由器使用历史模式？5>选择一个CSS预处理器6>选择ESLint代码校验规则7>选择什么时候进行代码规则检测8> 选择如何存放配置9>是否存储当前配置10>名称11>搭建完成Choose Vue version：视图版本Babel：ES6代码转为ES5代码TypeScript：TypeScript是一个JavaS...

2021-04-14 11:41:59 240 2

原创 vue之间的传值通信

组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系：如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）。针对不同的使用场景，如何选择行之有效的通信方式？这是我们所要探讨的主题。本文总结了vue组件间通信的几种方式，如props、$emit/$on、vuex、$parent/$children、$attrs/$listeners和pr..

2021-04-13 13:08:55 610

原创修改滑动条的颜色

代码例子直接拿走 /*修改滚动条样式*/ /*修改滚动条样式*/ /*修改滚动条样式*/ ::-webkit-scrollbar { width: 8px; height: 100%; } ::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 5px; -webkit-box-shad...

2021-04-12 14:48:19 858

原创 keep-alive原理

keep-alive介绍与应用keep-alive是什么keep-alive是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件链中；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。一个场景用户在某个列表页面选择筛选条件过滤出一份数据列表，由列表页面进入数据详情页面，再返回该列表页面，我们希望：列表页面可以保留用户的筛选（或选中）状态。keep-alive就是用来解决这种场景。当然keep-alive不仅仅是能够保存页面/组件的状态这么简

2021-04-12 11:46:39 386

原创 new的操作原理

简单记录下new一个js对象时，做了什么事情。1、创建一个空对象=》{}2、将1中创建的空对象的__proto__属性指向构造函数的prototype属性。3、将构造函数的this指定为1中创建的空对象。4、执行构造函数（为this绑定属性、复制等操作）。5.1、如果构造函数有返回值，且返回类型为引用类型，则将构造函数的返回值作为new的结果返回5.2、如果构造函数有返回值，且返回类型为基础数据类型，如int，则无论构造函数返回什么都无效，都将1中创建对象作为构造函数返回值返回。5.3、如果构

2021-03-19 15:56:05 268

原创看的视频总结的this指向

//this默认指向window // 1、全局模式下的this指向window console.log(1,this) // 2、函数独立调用，函数内部的this也指向了window function fn(){ console.log(2,this) } fn() // 3...

2021-03-07 11:24:48 129

原创解决回调地狱

//回调地狱fn(){this.$axios.get("./json/a.json").then(res=>{console.log("1",res.data);//this.$axios.get("./json/b.json").then(res=>{console.log("2",res.data);//this.$a...

2021-02-20 15:13:31 906

原创 http和https的区别

　超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息，HTTP协议以明文方式发送内容，不提供任何方式的数据加密，如果攻击者截取了Web浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息，因此，HTTP协议不适合传输一些敏感信息，比如：信用卡号、密码等支付信息。　　为了解决HTTP协议的这一缺陷，需要使用另一种协议：安全套接字层超文本传输协议HTTPS，为了数据传输的安全，HTTPS在HTTP的基础上加入了SSL协议，SSL依靠证书来验证服务器的身份，并为浏览器和服务器之间的通

2021-02-20 11:03:59 841 2

原创重绘与重排

那么什么是重绘与重排呢，在解释重绘与重排之前，我们首先需要先了解清楚浏览器的渲染过程，下面先上一张比较常见的渲染过程图：根据上图我们可以看到和总结出浏览器的渲染大致分为以下五个步骤： DOM Tree：浏览器根据HTML解析出DOM Tree Style Rules：根据CSS解析出Style Rules Render Tree：将DOM Tree与Style Tree二者关联生成Render Tree Layout：根据Render Tree计算每.

2021-02-20 11:02:47 1036

原创 vue数据双向绑定原理

vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的var vm = new Vue({ data: { obj: { a: 1 } }, created: function () { console.log(this.obj); }});结果我们可以看到属性a有两个相对应的get和set方法，为什么会多出这两个方法呢？因为vue是通过Object.defineProper

2021-02-03 14:35:26 744

原创 git命令 (持续更新ing)

查看分支：git branch创建分支：git branch <name>切换分支：git checkout <name>或者git switch <name>创建+切换分支：git checkout -b <name>或者git switch -c <name>合并某分支到当前分支：git merge <name>删除分支：git branch -d <name>查看项目远程地址：git remot

2021-01-27 10:37:40 742

原创 js获取url地址栏的参数

比如从其他链接跳转过来时带有参数，页面的URL就会变成这样：http://www.xxx.com/?a=1&b=2#/如果从主页再往二级页跳转时还带有参数，页面的URL就会成这样：http://www.xxx.com/?a=1&b=2#/user?uname=蚊子&year=2018在这个具有两个?的链接，location.search获取到的是哪个值？测试一下我们就会发现，获取到的是前面?到#之前的参数：console.log( location.sear

2021-01-20 10:36:24 155

原创 css li 前面样式

CSS中LI圆点样式li {list-style-type:符号名称}css中用list-style-type指定列表（lists）前面符号,如下：li {list-style-type:符号名称}符号名称可用的值为：disc : 　CSS1　实心圆circle : 　CSS1　空心圆square : 　CSS1　实心方块decimal : 　CSS1　阿拉伯数字lower-roman : 　CSS1　小写罗马数字upper-roman : 　CSS1　大写罗马数字lower-alph

2020-12-03 14:49:08 2676

原创 vue-cli3.0之后快速创建项目、仅供参考

1.进入一个目录，创建项目对应命令：vue create project-one2.我们这里选择手动配置按↓选择“Manually select features”，再按Enter3.选择你需要的配置项通过↑ ↓ 箭头选择你要配置的项，按空格是选中，按 a 是全选，按 i 是反选。具体每个配置项表示什么意思在下面会有说明。? Check the features needed for your project: (Press <...

2020-11-30 15:53:56 201

原创自己用的rem，

2020-10-16 17:09:30 76

原创 element-ui table 改变一行的样式 row-style 失效问题

如题：最新版本的element-ui 关于table row-style 失效之前是return str 样式字符串<el-table :data="tableData" :row-style="showRow" ></el-table>methods: { showRow({row, rowIndwx}) { let styleJson = {} if (row.show) { styleJson

2020-09-11 11:23:08 6866 8

原创 js 拖动原理

拖拽功能一、拖拽的流程动作①鼠标按下②鼠标移动③鼠标松开二、拖拽流程中对应的JS事件鼠标按下会触发onmousedown事件obj.onmousedown = function(e) { //.......... } 鼠标滑动会触发onmousemove事件obj.onmousemove = function(e) { //...... } 鼠标松开会触发onmouseup事件obj.onmouseup = function(

2020-08-24 17:14:27 923

原创个人自己总结的vue知识点、高级特性

自定义v-model：v-bind和v-on的缩写动态、异步组件：解释：动态是<component :is="组件名“></component>异步是不需要用Improt进行加载、这样是的话是同步、my-component': () => import('./my-async-component')类似这种需要了在加载$nextTick：在dom完全渲染之后才执行 keep-alive：缓存组件、频繁切换不需要重复渲染的时候经常出...

2020-07-25 19:12:20 322

原创四元数转化欧拉角

struct Quaternion { double w, x, y, z;}; struct EulerAngles { double roll, pitch, yaw;}; EulerAngles ToEulerAngles(Quaternion q) { EulerAngles angles; // roll (x-axis rotation...

2020-05-06 10:30:00 1198

原创个人开启react学习之路

第一天真是头疼的问题、第一次安装ract就是安装不上，找不到毛病出在哪？然后早上又安装了一次、结果成了、懵了命令如下如果npm版本是5.2以上版本，在cmd中输入 npx create-react-app my-app，当前目录下创建一个名为my-app的工程，命令行窗口中将会显示依赖库的一些日志如果npm版本低于5.2，则全局安装create-react-app，cmd输入npm...

2020-03-21 11:35:33 233

原创参考其他文章总结出浅拷贝和深拷贝

浅拷贝与深拷贝一、数据类型数据分为基本数据类型(String, Number, Boolean, Null, Undefined，Symbol)和对象数据类型。基本数据类型的特点：直接存储在栈(stack)中的数据引用数据类型的特点：存储的是该对象在栈中引用，真实的数据存放在堆内存里引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的...

2020-03-18 14:05:11 240

原创仅限参考-箭头函数与普通函数的区别

箭头函数是匿名函数，不能作为构造函数，不能使用new箭头函数不绑定arguments，取而代之用rest参数...解决箭头函数不绑定this，会捕获其所在的上下文的this值，作为自己的this值箭头函数通过call()或apply()方法调用一个函数时，只传入了一个参数，对this并没有影响。箭头函数没有原型属性箭头函数不能当做Generator函数,不能使...

2020-03-02 10:34:09 603

原创 JS方法常用方法，array数据常用方法

字符串常用属性.length------>字符串的长度.charAt(索引),返回值是指定索引位置的字符串,超出索引,结果是空字符串.fromCharCode(数字值,可以是多个参数),返回的是ASCII码对应的值.concat(字符串1,字符串2,...);返回的是拼接之后的新的字符串.lastIndexOf(要找的字符串);从后向前找,但是索引仍然是从左向右的方式,...

2020-03-02 10:19:30 309

原创个人总结关于跨域的解决办法

最直接的就是后台直接改1、jsonp的方式动态插入script标签，但是不能自定义修改header头部信息例如：var script = document.createElement('script')script.type = 'text/javascript'script.src='10.2.34:9090?user=admin&callback=handleCal...

2020-02-28 17:07:39 195

原创个人总结-cookie session localstorage sessionstorage

Cookie、session和localStorage的区别cookie的内容主要包括：名字、值、过期时间、路径和域。路径与域一起构成cookie的作用范围。若不设置时间，则表示这个cookie的生命期为浏览器会话期间，关闭浏览器窗口，cookie就会消失。这种生命期为浏览器会话期的cookie被称为会话cookie。会话cookie一般不存储在硬盘而是保存在内存里，当然这个行为并不是规范...

2020-02-28 16:46:46 200

原创仅限参考-在浏览器输入url后，发生了什么过程

1、浏览器查找该域名ip地址2、浏览器根据解析得到的ip地址，向web服务器发生一个Http请求3、服务器接收请求并进行处理4、服务器返回一个相应5、浏览器对该响应进行代码解码，渲染显示6、页面完成后，浏览器发生异步请求...

2020-02-19 23:37:34 239

原创仅限参考-koa学习

第一天搭建一个项目cnpm install -g koa-generatorkoa2 dong（后面是项目的名字）然后初始化项目 npm install启动项目npm start 或者npm run dev(改服务端代码实现自启动)...

2020-02-18 15:24:43 279

原创仅限参考-改变this指向 call apply bind

var a = { user:"小明", fn:function(){ console.log(this.user); }}var b = a.fn;b(); //undefinedvar a = { user:"小明", fn:function(){ console.log(this.user); }...

2020-02-13 10:34:33 183

原创仅限参考-this指向

function a(){ var user = "小明"; console.log(this.user); //undefined console.log(this); //Window}a();this最终指向的是调用它的对象，这里的函数a实际是被Window对象所点出来的,下面的例子证明function a(){ var user = "小明"...

2020-02-13 10:19:17 261

原创仅限参考-相对定位和绝对定位的区别

position: absolute绝对定位：绝对定位是相对于元素最近的已定位的祖先元素，如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（也就是body）。绝对定位本身与文档流无关，因此不占空间，普通文档流中的元素的布局就当绝对定位的元素不存在时一样，所以它们可以覆盖页面上其他的元素，且可以通过z-index属性来控制这些层的相应顺序。position: rela...

2020-02-13 09:43:29 506

Desktop.rar

react新手教程.html

this指向.html

空空如也