- 博客(142)
- 收藏
- 关注
RSS订阅
原创 let变量声明总结
let命令有四大主要特性：存在块级作用域，没有变量提升，暂时性死区，不允许重复声明。（记忆：存块没变，暂死不重）这都是和es5的var变量特性相反的。1、存在块级作用域let命令声明的变量只在其块级作用域中有效，就是{}中。{ let a = 10; var b = 1;}console.log(a); //出错 not definedconsole.log(b); //1...
2019-01-30 16:09:47
421
原创 js数组，字符串常用方法
数组对象改变原数组的：1.shift：将第一个元素删除并且返回删除元素，空即为undefinedvar arr = ['a', 'b', 'c'];arr.shift() // 'a'console.log(arr) // ['b', 'c'] 2.unshift：向数组开头添加元素，并返回新的长度var arr = ['a', 'b', 'c'];ar...
2019-01-22 16:58:38
2835
1
原创 js数组拼接的四种方法
var a = [1,2,3,4,5,6];var b=["foo","bar", "fun"];最终的结果是：[1,2,3,4,5,6,"foo","bar","fun"]方法1:concatc=a.concat(b);c是新数组，此时内存使用有，c,a,b三个数组。方法2:
2018-09-21 18:13:11
85094
2
原创 关于line-height
一般默认的字体大小为16px使用line-height设置行高时，除去字体大小剩下的距离会在行的上边和下边平分，即：行高=字体大小+上边距+下边距（同时上边距等于下边距）所以当设置行高为盒子大小的时候可以使文字在垂直方向居中，如果行高小于盒子大小那么文字偏上，如果行高大于盒子大小那么文字偏下一些特殊字符，如*（偏上），+(偏下），如果想让这些特殊字符垂直居中，设置line-...
2019-11-13 17:49:35
352
原创 消除按钮的自定义样式
border: none; // 消除自定义边框background-color: transparent; // 消除自定义背景颜色outline: none; //消除自定义点击蓝色边框效果
2019-11-11 17:42:55
316
原创 css3属性box-shadow
box-shadowhttps://www.jianshu.com/p/32deebd5afd2语法box-shadow: h-shadow v-shadow blur spread color inset;注意：boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省...
2019-11-05 11:25:17
276
原创 清除浮动float (:after方法)
#:after方法。（注意：作用于浮动元素的父亲）<div class="outer over-flow"><div class="div1">1</div><div class="div2">2</div><div class="div3">3</div></div>原理：利用:afte...
2019-10-30 14:36:33
411
原创 Vue组件为什么要export default
Vue的模块机制：Vue是通过webpack实现模块化，因此可以使用import来引入模块，例如：此外，你还可以在 bulid/webpack.base.conf.js 文件中修改相关配置：意思是，你的模块可以省略 “.js”，".vue"，“.json” 后缀，weebpack 会在之后自动添加上；可以用 “@” 符号代替 “src” 字符串等。export 用来导出模块，Vue 的单...
2019-09-03 20:18:44
920
1
原创 textContent和innerText以及innerHTML的区别
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <style> button{ ...
2019-08-03 11:03:37
534
原创 axios 请求拦截及响应拦截
前端采用了axios来处理网络请求，为了避免在每次请求时都去判断各种各样的网络情况，比如连接超时、服务器内部错误、权限不足等等不一而足，我对axios进行了简单的封装，这里主要使用了axios中的拦截器功能。// 请求拦截（配置发送请求的信息）axios.interceptors.request.use(function (config){ // 处理请求之前的配置 return conf...
2019-07-26 15:32:07
3200
原创 VUE中演示v-for为什么要加key
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" c...
2019-07-24 16:25:32
175
原创 理解Vue中的nextTick
https://www.jianshu.com/p/a7550c0e164f<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">...
2019-07-10 11:28:21
123
原创 nuxt
为什么使用nuxt.js? 官网 https://zh.nuxtjs.org/guide/async-datavue单页面应用渲染是从服务器获取所需js，在客户端将其解析生成html挂载于id为app的DOM元素上，这样会存在两大问题。由于资源请求量大，造成网站首屏加载缓慢，不利于用户体验。由于页面内容通过js插入，对于内容性网站来说，搜索引擎无法抓取网站内容，不利于SEO。Nuxt....
2019-07-06 18:57:18
893
原创 Vue与ref属性与refs
https://www.cnblogs.com/xumqfaith/p/7743387.html<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc...
2019-07-05 21:06:44
164
原创 vue中.babelrc报unknown plugin错误
npm i [email protected] -save安装制定版本号首先看.bablerc的配置当你执行npm run dev时有可能会报如下错误：处理方法: 执行npm install babel-plugin-component -D即可解决当报Unknown plugin "import"是同样当错误npm install babel-plugin-import -D即可解决...
2019-07-03 16:00:14
3434
原创 axios POST提交数据的三种请求方式写法
Content-Type: application/jsonimport axios from 'axios'let data = {"code":"1234","name":"yyyy"};axios.post(`${this.$url}/test/testRequest`,data).then(res=>{ console.log('res=>',res); ...
2019-06-28 14:47:56
1645
原创 display:inline-block不独占一行的块级元素
display的几个常用的属性值，inline ， block， inline-blockinline（行内元素）:使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行(行内元素设置了position属性或float属性或display后属性默认变成inline-block，所以可以设置宽高)不能更改元素的height，width的值，大小由内容撑开.可以使...
2019-06-26 19:21:56
4297
原创 快捷键
VS注释与取消注释快捷键最近在使用VS2010刷题，突然发现想全部注释时找不到注释的快捷键，网上查了下，原来很简单，只是需要使用组合键。注释： 先CTRL+K，然后CTRL+C取消注释： 先CTRL+K，然后CTRL+U苹果实用快捷键「Command + 方向键上」将光标快速移动到整篇文本开头「Command + 方向键下」快速移动到文章结尾「Command + 方向键左」将光标移动...
2019-06-20 11:43:58
108
原创 随开随用的本地服务器
全局安装node.js安装成功后，执行npm install anywhere -g 安装anywhere使用：在要启动静态服务的目录下执行 anywhere -p 8080-p 后跟端口号前端应用启动服务 anywhere 通过这个可以将本地下载的东西通过局域网分享给别人...
2019-06-20 10:54:55
394
原创 性能优化常用方法
1. 优化方法论（闭环）发现–分析–埋点–监控–优化–评估2. 用户常用手段（减尽避推预减 少使开顶底图25k 削js和css，link=>@impor)(1)减少DNS查找次数(2)尽量减少HTTP请求次数(3)避免跳转404错误(4)推迟加载首屏外内容(5)预加载首屏相关内容(6)减少DOM元素数量(7)少使用IFRAME(8)使用内容分发网络CDN加速(9)...
2019-06-18 15:04:38
250
原创 【web性能】获取web各个阶段响应时间：服务器响应时间、首页白屏时间、dom渲染完成时间等
准确地测量web应用程序的性能特性是使web应用程序更快的一个重要方面参考网址https://segmentfault.com/a/1190000012833867#articleHeader6https://developer.mozilla.org/zh-CN/docs/Web/API/Navigation_timing_APIPerformanceNavigationTiming接口...
2019-06-18 14:34:47
1205
原创 postman中form-data、x-www-form-urlencoded、raw、binary的区别
1.form-data就是http请求中的multipart/form-data,它会将表单的数据处理为一条消息，标签为单元，用分隔符分开。当上传的字段是文件时，会有Content-Type来说明文件类型；content-disposition，用来说明字段的一些信息；由于有boundary隔离，所以multipart/form-data既可以上传文件，也可以上传键值对，它采用了键值对的方...
2019-06-15 19:43:06
351
原创 mixins使用
对于多个vue文件都需要执行的代码，可以放在mixin内，mixin为一个普通对象，属性为需要的data,methods,created等等,如<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=de...
2019-06-14 14:21:42
337
原创 项目复盘
什么是项目复盘？复盘，是一个围棋术语，也称 “复局”，指对局完毕后，复演该盘棋的记录，以检查对局中招法的优劣与得失关键，这样可以有效地加深对这盘对弈的印象，是提高自己水平的好方法。项目复盘直白的讲，其实就是对过去完成的项目所做的一个回顾，对一些关键事件进行分析，从而从过去的经历中总结经验教训，为接下来的项目和工作提供有价值的参考。为什么要做项目复盘？项目复盘，不仅能对项目进行一个有仪式感的...
2019-06-13 16:14:03
1222
原创 vue 中注册全局组件， 全局过滤器，全局方法
全局组件1 全局注册组件 建一个 js 文件， 注册全局组件， 并且暴露出去 在页面就可以直接使用了2 全局注册过滤器3 定义全局方法 建一个文件注册全局方法 使用 exports 可能会报错，应该将 .babelrc 文件中的 “modules”: false 去掉 modules组止了文件的转换在 main.js 中引入页面中直接调用...
2019-06-05 20:07:16
965
原创 关于回调函数
回调函数是从一个叫函数式编程的编程范式中衍生出来的概念。简单来说，函数式编程就是使用函数作为变量。一、什么是回调函数函数A作为参数(函数引用)传递到另一个函数B中，并且这个函数B执行函数A。我们就说函数A叫做回调函数。如果没有名称(函数表达式)，就叫做匿名回调函数。function say (value) { alert(value);}function execute (som...
2019-05-29 23:53:40
270
原创 .native修饰符
官方对.native修饰符的解释为： 有时候，你可能想在某个组件的根元素上监听一个原生事件，可以使用 v-on 的修饰符 .native 。例如：<my-component v-on:click.native="doTheThing"></my-component>简单点理解就是：给普通的HTML标签监听一个事件，之后添加 .native 修饰符是不会起作用的。...
2019-05-27 20:49:45
2200
原创 animation属性之纯css3实现曲线运动——贝塞尔曲线(cubic-bezier)
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <title>贝塞尔曲线动画调研</title> <style> html { background: #ad4e24...
2019-04-28 20:21:06
7444
1
原创 自定义单选框
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>自定义单选框</title> <style>div>input{ display: none;} div>label{ posi...
2019-03-28 11:31:21
330
原创 进度条
原生实现基本思想：这里主要使用了CSS3的animation动画效果,将进度条设置为一个初始宽度为0,背景色为绿色,高度与容器相同的元素,通过animation对其宽度进行动画过渡,以实现进度条填充的效果.<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> ...
2019-03-26 17:09:38
273
原创 css文本显示两行后超出用省略号代替
1. 强制一行的情况很简单 <style type="text/css"> div{ width: 200px; height: 300px; border:1px solid blue; } span{ border:1px solid ...
2019-03-23 16:55:52
697
原创 CSS3设置鼠标放在图片上hover的时候会按比例放大的效果
transition 过渡属性transition：css属性名称 总时间 运动曲线 何时开始；这种效果可以在鼠标单击、点击、获得焦点、或对元素任何改变中触发，并以动画效果改变CSS属性值。运动曲线属性：设置鼠标放在图片上hover的时候会按比例放大的效果代码如下<!DOCTYPE html> <html> <head> ...
2019-03-22 16:57:39
3591
原创 单元素/组件的过渡
Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡条件渲染 (使用 v-if)条件展示 (使用 v-show)动态组件组件根节点<style>.fade-enter-active, .fade-leave-active { transition: opacity .5s;}.fade-enter, .fade-le...
2019-03-22 15:38:59
264
原创 npm install -save 和 -save-dev的区别
回顾 npm install 命令我们在使用 npm install 安装模块的模块的时候 ，一般会使用下面这几种命令形式：npm install moduleName # 安装模块到项目目录下 npm install -g moduleName # -g 将模块安装到全局，具体安装到磁盘哪个位置，要看 npm config prefix 的位置。 npm install -save ...
2019-03-10 15:57:26
197
原创 CSS实现三角形
CSS三角形的实现原理及运用http://caibaojian.com/css-border-triangle.html<!DOCTYPE html><html><head> <title></title> <style type="text/css">.test_triangle_border{
2019-03-03 20:21:25
144
原创 前端构建工具webpack
1.先删除之前的webpack,webpack-cli,webpack-dev-servernpm uninstall webpack \webpack-dev-server \webpack-clinpm uninstall webpacl-cli -g2.安装最新版本的webpack、webpack-cli(webpack4把脚手架webpack-cli从webpack中抽离出来的...
2019-02-28 23:21:46
286
原创 js链表操作
next指向下一个节点的地址第一题思路：不给单链表，给的是单链表中要删除的节点node，这个node已经存在单链表中，即这个节点的前一个节点是未知的，但下一个节点是可以知道的，那么可以把下一个的值赋给这个node，然后删除下一个节点即可：即把node下一个节点的地址var deleteNode = function(node) { node.val = node.next.va...
2019-02-26 16:35:57
2014
2
原创 js中有哪些遍历方法
for是编程式for(let i=0;i&lt;arr.length;i++){ console.log(arr[i]);}forEach和map看一看MDN上对Map和ForEach的定义：forEach(): 针对每一个元素执行提供的函数。map(): 创建一个新的数组，其中每一个元素由调用数组中的每一个元素执行提供的函数得来。共同点：1.都是循环遍历数组中的每一项。...
2019-02-24 19:47:35
506
原创 js每隔一秒打印1,2,3,4,5
方法一 es6块级作用域let function count(){ for (let i=0; i<5; i++) { setTimeout(() => console.log(i), 1000*i) } } count()函数表达式的写法和上面写法效果一样 function count(){ for (let i...
2019-02-24 17:56:27
7438
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人