qq_29018891的博客

原创 异步执行顺序——宏任务与微任务不同环境下的出队规则

JavaScript执行过程中，我们把任务分为同步任务和异步任务，而异步任务又分为宏任务，微任务。JavaScript异步执行在node环境与浏览器环境区别：node环境中，任务全部出队，并执行。浏览器环境，出队一个任务，并执行。

原创 vue项目中使用别名：“@”和“~”的坑。

设置别名在build文件夹下的webpack.base.conf.js文件中设置src的路径别名。 resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), '#': resolv...

原创 在使用element-ui时，碰到错误……type check failed for prop "value"。

详细错误：vue.runtime.esm.js:587 [Vue warn]: Invalid prop: type check failed for prop "value". Expected String, Number, got Array.问题原因：在做表单校验时候，加入了一个隐藏的<el-input>标签，并且el-input标签上绑定了v-model属性。原本想法是...

原创 $elemMatch和and逻辑多条件查询数组内容[mongoDB][高级查询]

数据如下{ "_id" : "124", "qList" : [ { "qid" : 1, "reorderFlag" : a }, { "qid" : 2, "reorderFlag" : b } ]...

原创 错误：Module parse failed: Unexpected character '�' (1:0) You may need an appropriate……解决办法

暴露错误今天在使用vue-element-admin做项目时发现引入图片出现下面错误。Module parse failed: Unexpected character '�' (1:0)You may need an appropriate loader to handle this file type.(Source code omitted for this binary file)...

原创 原生简单的3D轮播图插件，无需其他插件支持。

rot3dimage原生简单的3D轮播图插件GitHub地址：https://github.com/wallacety/rot3dimage使用导读1，引入./dist/css/rot3dimage.css和./dist/js/rot3dimage.js&amp;amp;amp;amp;lt;link rel=&amp;amp;amp;quot;stylesheet&amp;amp;amp;quot; href=&amp;amp;amp;quot;./dist/r

原创 前端笔记—从入门到坟墓[js][new 与object.create()原理][4]

function Person(name){ this.name = name } Person.prototype.getName = function (){ console.log('name') }newvar person = new Person('aa')等价于 function _new (...

原创 前端笔记—从入门到坟墓[js][原型链解读][3]

原型链结构图（重点）仔细观察图会发现，有几个出现频率比较高的词：__proto__ : 指向该对象的隐式原型对象，即[[prototype]]，通常也就是所谓的该对象原型链的起点prototype ：指向该对象的显式原型对象（只有函数拥有）constructer：指向该对象的构造器（这个属性属于一个函数的显式原型对象的属性，用于指向该函数，就是在指回去）关系归纳由上图可知很多信息，需...

原创 前端笔记—从入门到坟墓[js][闭包][2]

闭包(closure)理解：一个普通的函数体代码段在调用时，会随之生成一个局部上下文环境，而这个函数体代码段执行完毕后，这个上下文环境也会随之被销毁。而一个有闭包函数体代码段在调用时，生成的上下文环境不会在其执行完毕后销毁，而是被其返回对象（函数）继续使用。特点闭包函数执行时，生成独立的局部作用域的上下文环境，所以即使是同一闭包函数生成的同名变量，他们存储的位置也是不同的，相互独立的。优...

原创 前端笔记—从入门到坟墓[js][作用域与上下文][1]

作用域的概念定义作用域最大的用处就是隔离变量，不同作用域下同名变量不会有冲突（作用域只是一个“地盘”，一个抽象的概念，其中没有变量。要通过作用域对应的执行上下文环境来获取变量的值。）js中的上下文概念定义在代码段执行之前，把将要用到的所有的变量、函数声明、this都事先拿出来，有的直接赋值了，有的先用undefined占个空，而这些拿出来的内容所在对象，称之为上下文环境。多层上下文栈...

原创 前端笔记—从入门到坟墓[CSS][垂直居中，display属性补充][5.1]

垂直居中1，使用display: table-cell此方式，只有一层元素时（.child元素）也可以居中，但无法设置对于屏幕的百分比，如果要设为相对于屏幕的百分比需要加入一个display: table的父级元素。 .parent{ display: table; width: 100%; height:200px; } ...

原创 前端笔记—从入门到坟墓[mate标签做简单优化][12.2]

meta标签作用&amp;amp;lt;meta&amp;amp;gt;元素可提供有关页面的元信息（meta-information）具体作用1，针对搜索引擎添加描述页面的关键词。2，元数据不会显示在页面上，但机器是可读，它告诉机器该如何解析这个页面。3，可以添加服务器发送到浏览器的http头部内容（http-equiv）。4，标签始终位于 head 元素中。典型的情况是：meta 元素用于规定页面的描述、关键词、...

原创 前端笔记—从入门到坟墓[CSS3][CSS3新增样式][16]

@import方式引入CSS文件在css文件内引入css文件可以使用@import方式，具体做法：@import url('./style.css');引入CSS的方法有两种，一种是@import，一种是link1，@import url('地址');2，&amp;lt;link href=&quot;地址&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&a

原创 ajax使用详解及注意事项

ajax简介Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。要学一门技术，最基本名字是要读正确的，美式发音音标：[ˈeˌdʒæks] 。对于ajax的这个名字，究其历史原因，当时Ajax技术使用于JavaScript之上，进行的是XML格式数据的传输，通过在后台与服务器进行少量数...

原创 前端笔记—从入门到坟墓[CSS3][CSS3内减模式][15]

css与css3盒子模型对比css盒子模型盒子内容宽实际等于width+padding而css3盒子内容宽就等于width由于以上盒子模型的不同之处，所以衍生出两个模式

原创 前端笔记—从入门到坟墓[HTML5][视频与音频引入][14]

插入视频方式1，利用优酷，腾讯视频，b站等各大视频网站平台，上传自己的视频。然后点击分享，复制带有iframe的标签粘贴的程序内，可实现视频插入。优点：减轻服务器负担，缺点：有广告用户体验不佳。2，第二个方法利用video标签。audio与video标签的属性autoplay如果出现该属性，则视频在就绪后马上播放。controls如果出现该属性，则向用户显示控件，比如播放按钮。h...

原创 前端笔记—从入门到坟墓[HTML5][新增语义化标签与属性][13]

IE浏览器兼容性h5标签在ie浏览器上只兼容ie8以上版本（ie8不兼容）。所以为了兼容ie6-8浏览器，我们可以引入html5shiv.js。html5shiv.js是什么html5shiv.js下载地址引入方式：&amp;lt;!--[if lt IE 9]&amp;gt;&amp;lt;script type=&quot;text/javascript&quot; src=&quot;js/html5shiv.js&quot;&

原创 前端笔记—从入门到坟墓[网站基础与优化][12.1]

网站icon图标引入方式：&amp;amp;amp;amp;amp;lt;link rel=&amp;amp;amp;amp;quot;shortcut icon&amp;amp;amp;amp;quot; href=&amp;amp;amp;amp;quot;favicon.ico&amp;amp;amp;amp;quot; type=&amp;amp;amp;amp;quot;image/x-icon&amp;amp;amp;amp;quot;

原创 前端笔记—从入门到坟墓[CSS][滑动门技术与字体图标][11]

滑动门门技术所谓滑动门技术就是利用背景图片的分割，实现不同内容长度下，按钮的可伸缩性。具体思路：根据文本自适应大小，我们可用两个独立的背景图像来创造它。一个在左边，一个在右边。把这两幅图像想象成两扇可滑动的门，它们滑到一起并交迭，占据一个较窄的空间；或者相互滑开，占据一个较宽的空间。所用图片：a{ height: 92px; line-height: 92px; ...

原创 前端笔记—从入门到坟墓[CSS][精灵图与溢出样式][10]

css精灵图技术（Sprites）产生原因：网页上面的每张图片都要经历一次请求才能展示给用户，小的图标频繁的请求服务器，降低页面的加载速度，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，因此，产生了css精灵技术。CSS Sprites 的优点：原文链接1、减少图片的字节。2、减少了网页的http请求，从而大大的提高了页面的性能。3、解决了网页设计师在图片命名上的困扰...

原创 前端笔记—从入门到坟墓[CSS][CSS定位][9]

定位模式position定位模式，属性：1，absolute生成绝对定位的元素，相对于有定位属性（static除外）以外的第一个父元素进行定位。2，fixed生成绝对定位的元素，相对于浏览器窗口进行定位。3，relative生成相对定位的元素，相对于其正常位置进行定位。4，static默认值。没有定位，元素出现在正常的流中（忽略top,bottom,left,right或者z-index...

原创 前端笔记—从入门到坟墓[CSS][CSS浮动][8]

浮动特性1，浮动的盒子会影响下面盒子的布局。第一个盒子浮动，会对第二个盒子影响。第二个盒子会到第一个盒子下面去。浮动就是把自己脱离标准流，自己的位置没有了。2，浮动盒子如果用于布局，且对下面盒子不影响，可以嵌套一个父级盒子（不过父级元素需要清除浮动）。为什么清除浮动，如何清除？有的时候为了让子元素（设置浮动的元素）自动调整大小。父元素没有设置高度或宽度，这时父级元素会因为子元...

原创 前端笔记—从入门到坟墓[CSS][CSS盒子模型][7]

borderborder边框属性，以空格为分割可传入属性分别是：边框宽度，边框样式，边框颜色。border:5px solid red;border-style边框样式，属性：none无样式，solid实线，dashed虚线，dotted点线。border-style:solid;注：在table表格里，有一个特殊样式：border-collapse：collapse可以设置相邻的...

原创 前端笔记—从入门到坟墓[CSS][CSS继承性、background样式][6]

CSS 的继承性样式的继承性总结：CSS中可以和不可以继承的属性&amp;amp;gt; 有继承性与文本有关的如颜色（color），字号，以text-、font-、line-开头的都可以继承。除上面外还有一些特殊的样式具有继承性：元素可见性（visibility）列表布局属性（list-style-type等）光标属性（cursor）页面样式属性（page、windows、orphans）&amp;amp;gt; ...

原创 前端笔记—从入门到坟墓[CSS][字体相关样式，display，行高][5]

调试工具谷歌浏览器自带调试工具，点击F12可以唤出。如图：详细使用教程：前端chrome浏览器调试总结chrome调试工具高级不完整使用指南（基础篇）字体相关样式font-size:设置字体大小，尽量设置为偶数，如：16px。font-family:设置字体。font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragi...

原创 前端笔记—从入门到坟墓[CSS][选择器、伪类与伪元素][4]

CSS的使用CSS又称为层叠样式表，是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。&amp;amp;amp;amp;amp;amp;amp;amp;gt; 1 在标签内使用在标签内利用style（英译：样式；风格）属性直接可以设置css样式，如：&amp;amp;amp;amp;amp;amp;amp;amp;lt;div style=&amp;amp;amp;amp;amp;amp;amp;quot;col

原创 前端笔记—从入门到坟墓[HTML][表格与表单][3]

值得一说的是，在进行html编写工作时为了方便和语义化，通常&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;i&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;em&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;标签会使用css样式去掉其倾斜样式，反而放一些特定的内

原创 前端笔记—从入门到坟墓[HTML][标签学习][2]

常用标签值得一说的是，在进行html编写工作时为了方便和语义化，通常&amp;amp;amp;amp;amp;amp;amp;lt;i&amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;lt;em&amp;amp;amp;amp;amp;amp;amp;gt;标签会使用css样式去掉其倾斜样式，反而放一些特定的内容（如：图标文字）方便css与js的选择. &amp;amp;amp;amp;a

原创 前端笔记—从入门到坟墓[HTML][知识准备][1]