Dear_Mr-优快云博客

原创样式问题记录

遇到的样式问题的记录border 相关CSS问题-鼠标移入icon时（hover状态），会造成页面内容有上下移动的情况.icon-radius { border: 0.5px solid #dde0e1; &:hover { border: 0; }}问题：可以发现是因为border的变化，导致该ICON高度宽度发生变化，所以出现了上...

2019-08-06 21:29:20 364

原创组件开发总结

插槽作用域插槽Menu子组件<ul :class="wrapClasses"> <li :class="itemClasses(item)" v-for="item in menuData.options" @click="getActiveItem(item)" :key="item.value"> <!-- :optio...

2019-08-06 21:14:00 513

原创 Vuex中注册模块的方式

在实际的项目应用中，如果把该项目中应用到的所有的state和mutation、Action等放置在全局的store中，会出现全局store内容过于庞大，并且变量名，方法名都很受限制，而vuex中的模块概念就恰好可以解决此问题下面就如何利用vuex中的模块概念，解决全局Store过于复杂问题，给出两种方式，静态注册和动态注册。首先我们创建的模块的名称为moduleA，如下moduleA.js...

2018-11-28 00:06:49 3282

原创用CSS减少JavaScript代码量

用CSS减少JavaScript代码量写此篇博客的目的就是提醒自己和需要的人，在遇到某些需求的时候，可以通过灵活的CSS的样式去减少项目中JavaScript的代码量。现在假定有这样一个需求，在列表页面中，每次点击某一行，这个时候前端会向后端发出请求，请求该行所对应的模板，并将这个模板显示在详情弹窗，但有时候，这一行对应的不仅是一个模板，但是需要的只是其中之一，现在需要用前端代码去控制选取...

2018-07-17 23:44:34 551

原创 vue中对鼠标划过事件处理方式

vue中对鼠标划过进行处理鼠标事件进行监听需求中，在一个table（组件）表中，对于其中一列（该列为图片列），当鼠标划过该列的某个单元格子（图片）时，需要展示出该单元格子对应的遮罩层翻阅了一些博客，发现好多都提到了mouse事件，如mouseover、mouseout、mouseenter、mouseleave，在之后我自己也通过这种方法进行了尝试。<template>...

2018-07-11 23:07:18 43643 1

原创 Linux系统下Node.js的版本升级

Linux系统下Node.js的版本升级昨晚想升级下Node的版本，先用sudo npm install -g n安装了n模块，之后使用sudo n stable命令的时候，报的是没有sudo这个命令。之后就在自己头疼脑热的情况下，不知看了哪个博客，把npm给删除了，后来发现在升级Node版本的时候，还是需要用到npm，所以，就需要安装一下了，安装命令如下：查看npm安装的版本 ...

2018-07-09 23:51:33 1310

原创关于npm的报错

关于npm缺少asynckit的报错今天，在git bash中输入npm -v的时候，发现提示缺少模块然后我输入node -v，显示出了node版本，然后我将这个错误搜索了一下，搜索到的没有什么有效信息后来我就想着因为npm是安装node的时候自带的，我就想着卸载下node，然后重新安装一次，结果我又碰到了问题，node没有办法删除，并且报出的错误码是2330，在网上一阵...

2018-04-19 11:34:46 1359

原创 Webpack

认识Webpack Webpack可以看作是模块打包机，做的事情就是，分析项目结构，找到JavaScript模块以及其他的一些浏览器不能直接运行的拓展语言（Sass，TypeScript），并将其转换和打包为合适的格式以供浏览器使用，在3.0出现以后，Webpack还肩负了优化项目的责任--save 保存 --dev 开发环境打包：可以将多个Java...

2018-03-29 21:06:52 5645

原创 Vue的单页应用中如何引用单独的样式文件

Vue的单页应用中如何引用单独的样式文件问题描述对于.vue的文件来说，也是由结构、行为、样式三部分组成，在样式部分有个scoped的属性，也就是当前页面有效，当style标签内样式比较多时或者.vue文件之间有重复的时候，总感觉看起来不够整洁，所以就需要引入一些公共样式。下面就先说下如何引入单独的样式文件，这里就以CSS文件为例，之后再说下我的项目中的样式文件的划分引入单独的样式...

2018-03-28 18:40:54 7379

原创关于input兼容性的总结

一月快要结束了 O(∩_∩)O~input失去焦点的时候，如何取得input框的值需求描述：有这样一个表格（表格组件），表格中有几列中是包含input这个输入框的，之前使用的是v-model，现在需要添加一些校验，我想到的就是在input输入框失去焦点的时候，用个函数去处理，这个函数的形参包括，该行所在的下标，input框中的内容，那下面的问题就是关于如何得到input框内的内容

2018-01-26 17:53:15 2076

原创 CSS中的focus-within伪类选择器

:focus-within很容易让人联想到focus，区别就在于focus是对于当前元素，而:focus-within则是对于当前对象和当前对象子元素 MDN: The :focus-within CSS pseudo-class represents an element that has received focus or contains an element that has re

2018-01-22 18:45:29 1165

原创日常项目总结

总结Vue中给option增加点击事件问题描述：select下拉列表中，点击一个option之后，需要做一些指定操作，例如去请求一个接口，并且这个接口需要的数据来自这个option的value值解决过程：我开始的做法就是给option添加了@click="requestSomeThing(item.id)"，结果发现我在点击了select的下拉框的时候，并没有去没有触发，之后就去上

2018-01-19 19:00:17 414

原创常用的正则

常用的正则以下为项目中使用过的，后面会不断的添加，也欢迎补充将数字类型转化为货币的形式let val = '233443432314';let reg = /\d{1,3}(?=(\d{3})+$)/g;val = val.replace(/^(-?)(\d+)((\.\d+)?)$/, function (s, s1, s2, s3) { return s1

2018-01-12 18:20:15 389

原创常用的CSS效果总结

遮罩层效果通过设置top、right、bottom、left为0，使得遮罩层覆盖整个可视区域如果页面中是有滚动条的，就涉及到需要给body增加overflow: ‘hidden’background-color: rgba(0, 0, 0 , 0.5) 使得背景颜色更加清晰<div id="bg-gray" class="bg" v-if="viewShowGrayBg"> <butto

2017-12-29 16:20:09 629

原创 Vue组件的书写形式

之前只是用过第三种方式去创建组件，最近接触到第一种写法的项目，所以写下了下面的内容使用script标签<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title></head><body> <div id='index-container'> </

2017-12-28 17:47:53 573

Promise处理有依赖的连续请求在没有接触到Promise之前，如果有这样的需求，先去前端需要异步去请求第一个接口，然后接收到返回的一些数据，然后利用得到的数据，去请求第二个接口，然后接收传回来的数据，然后去请求第三个接口，这个时候我自己写出来的代码一定是Ajax嵌套的一堆，写出来的代码可想而知，真的是太丑。我现在不敢说我对Promise有多懂，因为我离灵活应用它，还有距离，最近在看书，偶然看到了

2017-12-22 11:24:43 7583 1

原创 WebStorm添加注释模板

今天想给我的代码文件添加一些特定的注释，下面是具体的操作，当然不局限于下面的，可以添加更多你所需要的东西添加后的效果/** * @author Vao * @date 2017/12/21 * @Description:*/添加的过程我用的工具是WebStorm2017.2.3，点击File->Settings->Editor->live Templates，打开Settings的快捷键是

2017-12-21 20:54:23 13982 1

原创点击页面关闭某个打开的列表

问题描述当点击“添加按钮”的时候，会显示一个列表，当再次点击“添加按钮”,这个列表就会关闭，这样做的话，交互性并不是那么良好，所以就需要修改一下啦……思路及解决办法增加的交互就是，在用户点击该页面的其他地方的时候，关闭这个列表，下面就是这个的具体实现梳理下用的东西： 1. ref 来获取元素，可以参考这里 2. watch来监测showGoodsList变量的变化 3. 事件的添加方式，这

2017-12-06 11:50:07 667

原创 JavaScript逻辑运算符

从项目中看逻辑运算符“||”和“&&”今天，在项目开发中遇到一个问题，就这个问题本身而言，并不是很难，但觉得它的意义重大（哈哈，当然是对我而言），还是决定记录一番问题描述及初步解决简单描述下要求：就是上边有两个checkbox的选择框（上面的图是简易版），要实现的功能就是二者至少选择一个，而且交互性良好先说下我的思路，也是我get到的，这个时候是实现二者至少选其一的功能的，当时我也说不来自己是怎样鬼

2017-12-05 21:21:56 553

原创 Ajax的原生实现关于MIME类型的使用

问题描述下面的例子是一个Ajax的post请求的代码，这段代码在测试运行的时候，发现返回的状态码为400，服务器不能理解的请求，后来经过查看和修改，发现只需要将下面的代码稍微改造一下就好了原代码var send = function (url, params, fn) { var me = this; var xhr = null; var data = ''; fn

2017-11-20 16:57:36 2336

原创调试的总结

之前，接触到的项目都不算复杂，大多数的项目也是我自己顺带写的后台，并没有相应的后端的相关接口的说明文档，现在，写项目的时候，都是看着产品写的PRD，然后结合后台给的相关接口的文档来进行开发，在前后端开发完毕之后，需要做的事情就是联调，在第一次初步联调的时候，就发现了自己的如下问题，特记录一下，以便提醒自己下次注意入参和出参必须注意联调的时候，发现“添加”这个功能，在调用后台接口之后报出了405的错误

2017-11-18 17:54:16 1228

原创 jQuery源码之init函数的分析

jQuery源码之init函数的分析精妙处之一init在源码中最先出现的位置是jQuery定义的地方，如下所示var ... jQuery = function( selector, context ) { // The jQuery object is actually just the init constructor 'enhanced' //

2017-10-16 01:27:00 678

原创 ES6解构赋值

数组的解构赋值ES6中允许按照一定的模式，从数组和对象中提取值，对变量进行赋值，这称为解构赋值，在ES5中为变量赋值，只能直接指定值首先，有几个简单的例子1）左边和右边“模式匹配”，完全解构，按照对应的位置，为变量赋值let [a, b, c] = [1, 2, 3];console.log(a, b, c); //1 2 3//略微复杂一点的嵌套，但是也是模式匹配的let [foo, [[b

2017-10-11 16:50:58 1940

原创 ES6对于let和const的认识

ES5对于变量而言，没有块级作用域这一说，存在的是函数作用域，但是在ES6中，let和const是属于块级作用域的声明，需要先声明，再使用，有点想起当时使用VC的场景，哈哈哈~letlet的出现为JavaScript增加了块级作用域，使用let定义的变量，外层作用域是无法读取内层作用域的变量的暂时性死区if(true) { //TDZ开始 tmp = 'abc'; conso

2017-10-10 21:45:19 654

原创认识浏览器

对于前端开发而言，最必不可少的工具就是浏览器，但是之前对于浏览器的了解只是停留在使用的层面，最近决定对于浏览器需要重新认识一下它，根据以前的使用和《WebKit技术内幕》这本书为大家做一下分享，当然在下面的说法中，也可能存在不详尽或者有误的地方，欢迎指正浏览器核心的种类浏览器的种类实在是太多，如IE、Firefox、Chrome、Opera等，但是浏览器内核的种类就比较少了，分别是Trident、G

2017-10-09 21:21:36 878

原创进程与线程

程序：程序是一个静态的概念，是完成某个功能的指令集合一、进程进程是动态的，一般由程序、数据集合和进程控制块三部分组成，程序用于描述进程要完成的功能，是控制进程执行的指令集；数据集合是程序在执行时所需要的数据和工作区；进程控制块（PCB）包含进程的描述信息和控制信息，是进程存在的唯一标示进程具有的特征：动态性：进程是程序的一次执行过程，是临时的，有生命周期的，是动态产生的，动态消亡的并发性：任何进程都

2017-09-12 23:09:49 556

原创 JavaScript如何监听两个组合键

给文档添加事件onkeydown表示某个键盘按键被按下document.onkeydown = function(event) { //处理}在这里需要注意document， document 是一个文档对象,使用 document 对象可以对 HTML 文档进行检查、修改或添加内容，并处理该文档内部的事件，event对象（window.event）；另一个就是Event对象，代表着事件的状态

2017-09-10 23:03:26 2238

原创拼多多笔试

拼多多笔试今天下午三点的笔试，前端方向70分钟，在这次的笔试中，也发现了一些自己以前没注意到的问题，决定把这些东西整理一下，注：以下内容完全来自于自己的回忆，如果有差错，还望指正“+”的问题第一个选择题是一个和“+”有关系的题目，首先，在JS中“+”是存在二义性的，就是它可以表示字符串的连接，也可以表示加号，进行以下尝试 1 + ‘3’ + ‘4’ “134” 1 + +’3

2017-09-02 17:22:39 1625

原创笔试题积累

判断给定的一个字符串是否是合法IP 思路：对于给定的字符串，按照“.”进行分割，然后判断长度是否等于4，然后依次判断每一项是否在[0, 255]之间function judgMent(ip) { if(!ip) { throw Error('IP 不能为空'); } ip = ip.toString(); var ary = ip.split('.'); if(ary.len

2017-08-24 18:22:38 536

原创今日头条前端面试总结

1.行标签都有哪些？特点？img、span、a、sub、sup、em、i、b、strong设置width、heigh不起作用margin、padding垂直方向不起作用，水平方向上有效2.img标签因为上面说了行元素设置宽高是不起作用的，所以才会被问到这个，我就解释了为什么它是行元素，因为在使用中，img元素中包含图片的话，它是按照一行排列的，下面的内容是我之后查阅得到的：img元素是可替换内联元素

2017-08-24 15:01:05 17280 3

原创 CSS3学习

CSS3学习最近在面试中，而CSS3目前成为我的一大问题，了解的太少，所以在面试中，碰到这样的问题，我就感觉到有点无力，只能说点相关的东西，但是总差那么一些，所以我决定开始积累有关CSS3的知识和问到的问题，此篇博客长期更新绘制正方形、三角形、扇形和饼状图transparent（透明色）、transform: rotate(0deg)（旋转）、clip属性剪裁clip: rect (top, rig

2017-08-22 16:48:00 962

原创 JavaScript—易犯错的题目

var arr = [];arr[0] = 0;arr[1] = 1;arr.foo = 'c';console.log(arr.length)运行结果为2，当时我想会报错，结果错了，数组的实例本身也是一个对象，可不要忘记typeof ary的结果可是object的，arr.length可以认为是arr的属性，那么同理，arr.foo也可以认为是给arr添加了一个属性foo，这个属性的值

2017-08-19 15:59:59 896

原创面试题总结

这三道题，是我在面试中碰到的，希望对你有用题目一比较两个参数是否相等 function diff() { …. } diff(1, 1); //true diff(1, ‘1’); //false diff({name: ‘123’}, {name : ‘123’}) //true diff({name: ‘123’}, {name : ‘678’}

2017-08-18 14:34:07 718

原创网易笔试编程题详解

题目一彩砖的问题解析：在答这道题的时候，我分析出，首先是和字母的种类数有关系的，当这个种类数为2的时候，它是存在的，而且结果是2，因为BBAA与AABB，当这个种类数为3或者大于3的时候，这个时候是不存在，因为，只要第三种和前两种相邻，这个结果就是大于1的，对于种类数为0和1的情况，我都认为是0（理解错误），在这一块，我犯了错误，题目中是“最多存在一对不同颜色的相邻砖块”，也就是说包含着一对都不存

2017-08-12 19:36:15 868

原创值得思考的JavaScript代码

关于Javascript很经典的闭包问题与异步问题，希望你能仔细阅读相关内容问题一请说明其输出结果for(var i = 0; i < 5; i++) { setTimeout(function() { console.log("inner", new Date().getTime(), i); }, 1000);}console.log("outer", new Date

2017-08-05 21:52:29 569

原创定宽高的水平垂直居中

绝对定位和负magin值效果预览<div class="parent"> <div class="child"></div></div> div.parent { width: 400px; height: 400px; background: #EDEDED; position: relative;}div.child { width: 200px; heigh

2017-08-05 15:58:12 839

原创不定宽高水平且垂直居中的实现方法

不定宽高水平且垂直居中的实现方法flex布局效果预览<div class="parent"><div class="child">水平垂直居中</div></div> div.parent { display: flex; justify-content: center; /*主轴对齐方式*/ align-items: center; /*交叉轴上如何对齐*/ backgrou

2017-08-05 12:09:29 850

原创 flex布局学习笔记

布局的传统解决方案，基于盒状模型，依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。新的方案—-Flex 布局，可以简便、完整、响应式地实现各种页面布局简要介绍flex(Flexible Box)的缩写，弹性布局，任何一个容器都可以指定为Flex布局，Webkit 内核的浏览器，必须加上-webkit前缀，但是设置为Flex布

2017-08-05 11:10:50 567

转载深入理解css中position属性及z-index属性

原文链接在网页设计中，position属性的使用是非常重要的。有时如果不能认识清楚这个属性，将会给我们带来很多意想不到的困难。position属性共有四种不同的定位方法，分别是static、fixed、relative、absolute,sticky。最后将会介绍和position属性密切相关的z-index属性。第一部分：position: staticstatic定位是HTML元素的默认值，即没

2017-08-02 18:57:29 2459