- 博客(46)
- 收藏
- 关注
RSS订阅转载 element-ui中表单验证rules
我们在项目中头疼的是什么？对，你没有听错，就是表单验证，各种非空校验，正则校验等等而初次使用元件的UI，在做表单验证的时候，由于项目急，自己呢，也没有时间去研究这个，结果比别人多写了500行的JS，有木有很夸张，所以，这个项目结束了，自己呢，去研究了下规则的神奇之处若有不足，请指出来，谢谢大佬们<template> <div class="short-visi...
2018-08-28 10:29:30
10967
转载 cnpm不是内部命令的解决办法
安装淘宝镜像cnpm后控制台出现cnpm不是内部命令的提示npm install -g cnpm --registry=https://registry.npm.taobao.org安装完了之后检查是否安装成功。cnpm -v若果出现以下东西说明安装成功。C:\Users\WenCh> cnpm [email protected] (F:\Live\NODE\node_g...
2018-08-22 12:50:34
39007
14
转载 滚动加载图片（懒加载）实现原理
本文主要通过以下几方面来说明懒加载技术的原理，个人前端小菜，有错误请多多指出一、什么是图片滚动加载？ 通俗的讲就是：当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。二、为什要使用这个技术？ 比如一个页面中有很多图...
2018-08-07 17:16:02
777
转载 less特性
前言CSS的短板 作为前端学习者的我们 或多或少都要学些 CSS ，它作为前端开发的三大基石之一，时刻引领着 Web 的发展潮向。 而 CSS 作为一门标记性语言，可能 给初学者第一印象 就是简单易懂，毫无逻辑，不像编程该有的样子。在语法更新时，每当新属性提出，浏览器的兼容又会马上变成绊脚石，可以说 CSS 短板不容忽视。 问题的诞生往往伴随着技术的兴起， 在 Web 发展...
2018-08-07 11:22:59
445
转载 圣杯布局、双飞翼布局、Flex布局和绝对定位布局的几种经典布局的具体实现示例
题目要求：针对如下DOM结构，编写CSS，实现三栏水平布局，其中left、right分别位于左右两侧，left宽度为200px，right宽度为300px，main处在中间，宽度自适应。要求：允许增加额外的DOM节点，但不能修改现有节点顺序。<div class="container"> <div class="main">main</div> ...
2018-08-06 15:43:39
394
转载 Webstorm常用快捷键
代码编辑代码跳转: Ctrl + 左键 或者 Ctrl + B，可以跳转到函数或者变量的声明位置 调用位置: Alt + F7，查找调用者 自动补全: 最好是修改一下响应时间，Settings->Editors->General->Code Completing: Autopopup in 0. 打开文件: Ctrl + Shift + N 打开类: Ctrl + N...
2018-07-26 16:12:09
1019
转载 关于跨域请求数据的文章（超全）
JavaScript跨域总结与解决办法什么是跨域JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。这里把涉及到跨域的一些问题简单地整理一下：首先什么是跨域，简单地理解就是因为JavaScript同源策略的限制，a.com 域名下的js无法操作b.com或是c.a.com域名下的对象。更详细的说明...
2018-07-26 01:03:56
153
转载 javascript 事件处理 IE和标准dom 的差别
一个事件其实在页面上 有多个元素相应事件处理,点击页面上的一个button,会发生什么?其实 是相当于先后点击了按钮,它的容器,及这个页面.也就是说没一个元素都按照特定的顺序响应那个事件.事件的发生顺序在IE和mozilla在事件支持上的主要差别. 事件流 冒泡技术.冒泡型事件的基本思想,事件按照从特定的事件目标开始到最不确定的事件目标.例如: <html> ...
2018-07-25 11:05:25
179
转载 页面优化方法
1) 避免head标签js堵塞：所有放在head标签里面的js和css都会堵塞渲染；如果这些css和js需要加载很久的话，那么页面就空白了；用google的cdn加载一个jQuery文件是访问不了的，所以标签一直在转圈，页面没有任何显示； 有两种解决办法，第一种是把script放到body后面，这也是很多网站采取的方法。第二种是给script加defer或者async的属性，一旦s...
2018-07-23 09:10:03
2339
原创 html+css面试题集锦（一）
1、对WEB标准以及W3C的理解与认识？web标准简单来说可以分为结构、表现和行为，其中结构主要是有HTML标签组成，或者通俗点来讲，在页面Body中我们写入的标签都是为了页面的结构，表现指css样式表，通过css可使页面的结构标签更具美感，行为是指页面和用户具有一定的交互，同时页面结构或者行为发生变化，主要是js组成。web标准一般是将该三部分独立分开，使其更具有模块化，但一般行为发生变...
2018-07-22 11:25:24
12788
1
转载 CSS3 Transitions, Transforms和Animation使用简介与应用展示
一、前言兼目录索引《天龙八部》里的虚竹小和尚之前可以说是和尚的先进人物与代表模范，各类清规戒律谨记与严守。但是，后来呢，花姑娘送到跟前，什么戒律都成了浮云，禁不住诱惑享乐去了。啊，我现在似乎有类似的感觉，本来不打算深究CSS3的一些属性的，但是其效果以及实际应用价值之诱惑实在巨大，还是抵挡不住，折腾下了这篇文章。劳民伤财的工程越少越好，所以，这里干脆把CSS3 动画相关的几个属性凑合到一起了，...
2018-07-18 07:22:42
219
转载 js中slice，splice，split的区别？
不知道大家对slice,splice,splite是肿么样的感觉，反正我刚接触到这三个函数的时候整个人都懵了，因为一个个长的跟孪生兄弟似的，每次用的时候都会混，于是决定记下来，也给大家当个参考吧。slice ： 定义：接收一个或两个参数，它可以创建一个由当前数组中的一项或多项组成的新数组，注意是新数组哦~ 也就是说它不会修改原来数组的值。 用法：slice( para1...
2018-07-17 08:59:30
214
原创 webpack用node_modules/.bin/webpack app/main.js public/bundle.js命令出错
运行node_modules/.bin/webpack app/main.js public/bundle.js解决办法：node_modules\.bin\webpack app\main.js public\bundle.js显而易见，只不过把斜杠换了个方向而已，当然不仅是这条命令，很多命令windows环境下与linux或mac还是有区别的，所以大家在使用时请注意了。运行上面指令一直说找不打...
2018-07-16 00:53:22
4188
1
转载 npm install -save 和 -save-dev的区别
回顾 npm install 命令最近在写Node程序的时候，突然对 npm install 的-save和-save-dev 这两个参数的使用比较混乱。其实博主在这之前对这两个参数的理解也是模糊的，各种查资料和实践后对它们之间的异同点略有理解。遂写下这篇文章避免自己忘记，同时也给node猿友一点指引。我们在使用 npm install 安装模块的模块的时候 ，一般会使用下面这几种命令形式：123...
2018-07-14 20:45:22
145
原创 webpack基础知识与工具使用
webpack是一个前端资源加载/打包工具，将根据模块的依赖关系进行静态分析，并依据规则生成对应的静态资源。在安装webpack前，本地环境需要已安装了node.js，然后npm install webpack -g进行安装。...
2018-07-14 20:43:25
296
转载 Git教程
史上最浅显易懂的Git教程！https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000
2018-07-13 17:08:57
107
转载 CSS中的transform与transition
transform：转换对元素进行移动、缩放、转动、拉长或拉伸。方法：translate():元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数有两个div，它们的css样式如下：12345678910111213141516.before { width: 70px; height: 70px; ...
2018-07-11 01:19:16
196
转载 js事件委托（事件代理）
js中的事件委托或是事件代理详解起因：1、这是前端面试的经典题型，要去找工作的小伙伴看看还是有帮助的；2、其实我一直都没弄明白，写这个一是为了备忘，二是给其他的知其然不知其所以然的小伙伴们以参考；概述：那什么叫事件委托呢？它还有一个名字叫事件代理，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。那这是什么意思...
2018-07-08 12:29:21
149
原创 响应式网站学习——前期的准备（一）
响应式网站优点：减少工作量：①网站、设计、代码、内容只要一份②多出来的工作量只是JS脚本、CSS样式做一些改动节省时间。每个设备都能得到正确的设计。搜索优化。更好的用户体验。响应式网站的缺点：回家再更多的样式和脚本资源。设计比较难控制和精确定位。老版本浏览器兼容性不好。媒体查询CSS2中<link rel="stylesheet" type="text/css" herf="site.css...
2018-07-08 09:43:34
360
转载 如何确定this指向？
this的值是在运行时确定的JS中的this究竟代表什么，这是在程序运行时根据上下文环境确定，可以分为以下几种情况。1. 全局作用域中的this在全局作用域中，this指向window对象。console.log(this);//指向window对象this.x = 5//在全局作用域内创建一个x//与this.x = 5的等价情况：//var x = 5;//x = 5;在全局作用域中...
2018-07-07 21:40:36
641
转载 JSON（JavaScript object notation）(很详细，值得一读)
一、JSON是一种格式，基于文本，优于轻量，用于交换数据如果没有去过JSON的官方介绍可以去一下这里，官方介绍第一、二段已经很清楚地表述了JSON是什么，我将JSON是什么提炼成以下几个方面：1. 一种数据格式什么是格式？就是规范你的数据要怎么表示，举个栗子，有个人叫“二百六”，身高“160cm”，体重“60kg”，现在你要将这个人的这些信息传给别人或者别的什么东西，你有很多种选择：姓名“二百六”...
2018-07-06 19:46:34
6093
转载 JSON 和 JS 对象（通俗易懂）
区别JSON（JavaScript Object Notation）仅仅是一种数据格式（或者叫数据形式）。数据格式其实就是一种规范，按照这种规范来存诸和交换数据。就好像 XML 格式一样。区别JsonJavascript对象含义仅仅是一种数据格式对象的实例传输可以跨平台数据传输，速度快不能传输表现1. 键值对2. 键必须加双引号3. 值不能为方法函数/undefined/NaN1.键值对2.值可以...
2018-07-06 19:27:53
279
原创 CSS清除浮动的几种方式
1.为父元素添加overflow：hidden<div style="overflow:hidden"> <img src="images/search.jpg"/> <img src="images/tel.jpg"/> <img src="images/weixin.png"/&
2018-07-04 17:01:59
136
原创 伪类选择器和伪元素
伪类选择器什么是伪类？伪类就是与类一样能够定义样式，但却不是真正意义上的类。 不是真正意义上的类？也就是说你可以在css中定义它的样式，就像定义类一样，但是你在HTML中不能找到该伪类的踪影。 HTML中没有伪类的踪影，那它是如何实现样式的呢？浏览器会在后台向这些伪类增加和删除元素。对于<a>元素，我们可以用“多重人格”来形容它。对于该标签，它一共有五种状态：:link, :visit...
2018-07-04 15:02:16
1907
转载 HTML特殊字符的html、js、css写法汇总
⇠ 箭头类符号UNICODE符号UNICODEHTMLJSCSSHTMLJSCSS⇠&#8672\u21E0\21E0⇢&#8674\u21E2\21E2⇡&#8673\u21E1\21E1⇣&#8675\u21E3\21E3↞&#8606\u219E\219E↠&#8608\u21A0\21A0↟&#8607\u219F\219F↡&am...
2018-07-04 10:24:08
320
转载 CSS属性选择器*=，|=，^=,$=,*=的区别
要求value是完整单词类型的比较符号：~=,|=拼接字符串类型的比较符号：*=,^=,$=1.attribute属性中包含value: [attribute~=value] 属性中包含独立的单词为value e.g:[title~=flower] --> <img src="/i/eg_tulip.jpg" title="tulip flower" /> ...
2018-07-04 09:56:31
553
原创 css中“~”（波浪号）、“，”（逗号）、“+”（加号）和“>”（大于号）详解
p~ul{ background:#8e8e8e; } <p>段落P</p> <ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li>
2018-07-04 09:37:13
57234
转载 css如何将div画成三角形
首先了解一下盒模型：盒模型先看一段代码：#div1{ height: 100px; border-style: solid; border-width: 100px 100px 100px 100px; border-color: red forestgreen blue cyan; ...
2018-07-04 00:00:40
679
转载 border-box和content-box最直观的区别和解释
Chrome浏览器box-sizing默认是content-box，content-box就是元素的width和height决定了元素的宽高，这意味着元素的border和padding等不能算在元素的width和height中 ，padding和border的改变不能改变width和height的值。 代码： <!DOCTYPE html><html>...
2018-07-03 21:33:26
29329
4
转载 css知多少系列，借助别人的力量提升自己的能力。
css知多少》的读者建议是了解css基础知识（或者刚刚入门），但是没有系统学习、归纳、总结过的人，还有那些整天忙于coding、bug、加班当饭吃的，而没有时间去看书学习的码工们。《css知多少》里虽然内容不多，但是都是我觉得应该讲的基础，那些不需要讲的基础我就没有讲。所以，如果你是css大牛，那你不必看了（来给我指正一下我也欢迎啊！）；如果你css都没有入门，那你也不用看了，我是从来不会写入门教...
2018-07-03 21:04:48
236
转载 关于html标签中b和strong,i与em两个的区别(物理标记和逻辑标记)
什么是物理标记？什么是逻辑标记？ 物理元素所强调的是一种物理行为，比如说我把一段文字用b标记加粗了，我的意思是告诉浏览器应该给我加粗了显示这段文字，从单词的语义也可以分析得出，b是Bold(加粗)的简写，所以这个b标记所传达的意思只是加粗，没有任何其它的作用。 而Strong我们从字面理解就可以知道他是强调的意思，所以我们用这个标记向浏览器传达了一个强调某段文字的消息，而这个Stron...
2018-07-03 20:58:13
1418
转载 vue2.0 设置router.go('/goods')会不停的刷新页面
代码如下let routes = [ { path: '/goods', component: goods }, { path: '/ratings', component: ratings }, { path: '/sellers', component: sellers }]const router = new VueRouter({ r...
2018-06-30 20:17:52
1623
转载 Vue便以项目出现Failed to resolve directive: link
问题描述在router-view外面引用的组件(比如导航栏), v-link 指令不起作用，无法跳转，会报错：Failed to resolve directive: link (found in component: <menubar> )，但是在组件内用click 点击事件下 route.go 是 可以进行路由跳转的。这个问题是因为vue 版本的问题，vue的版本升级后，取消了v-...
2018-06-30 20:10:21
11267
转载 Vue编译项目时出现router.map is not a function
错误：出现问题原因：2.0已经没有map这个方法了，只有1.0兼容该方法。解决方法：（1）方法1：使用命令npm install [email protected]兼容1.0版本vue。在代码中的使用方法：（2）解决方法2：基于vue2.0，写对应的方法。具体用法如下图：注：1.0和2.0在一些用法上有比较大的差别，用的时候需要注意。...
2018-06-30 20:07:53
8902
1
转载 display:flex 布局详解（2）
flex的使用实例 之前的随笔从阮一峰老师那里学到了flex的基本用法及作用，现在来把flex具体运用到实例中，看看flex的弹性布局效果。1. flex设置元素垂直居中对齐在之前的一篇文章中记载过如何垂直居中对齐，方法有很多，但是在学习了flex布局之后，垂直居中更加容易实现HTML代码：<div class="demo"> <div class="inner">...
2018-06-30 17:10:55
15558
1
转载 display:flex 布局详解（1）
布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。一、Flex布局是什么？Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。.box1{ display: flex;}.box2{ display: i...
2018-06-30 16:53:28
22392
转载 Cannot findmodule 'stylus'的解决方法
vue项目中使用stylus预处理器写css语法，老是出现 Cannot find module ‘stylus’ 的错误，鼓捣了很久，包括webstorm中配置stylus的支持，安装依赖。 终于找到原因： 在webpack 里面用了 stylus-loader，但npm instatll 没有正确安装依赖，才会出现error： Cannot find module ‘stylus’。解决办...
2018-06-30 16:17:43
1035
原创 Vue中ESlint配置文件eslintrc.js文件详解
最近在跟着视频敲项目时，代码提示出现很多奇奇怪怪的错误提示，百度了一下是eslintrc.js文件没有配置相关命令，ESlint的语法检测真的令人抓狂，现在总结一下这些命令的解释，方便以后查阅。默认eslint规则：代码末尾不能加分号 ;（强波症的我受不了）代码中不能存在多行空行；（这个我更也忍不了）tab键不能使用，必须换成两个空格；（超级不习惯）代码中不能存在声明了但未使用的变量；（这...
2018-06-30 10:36:27
109092
9
转载 JS中你必须知道的this
this的值是在运行时确定的JS中的this究竟代表什么，这是在程序运行时根据上下文环境确定，可以分为以下几种情况。1. 全局作用域中的this在全局作用域中，this指向window对象。console.log(this);//指向window对象this.x = 5//在全局作用域内创建一个x//与this.x = 5的等价情况：//var x = 5;//x = 5;在全局作用域中...
2018-06-27 19:52:10
109
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人