前端
关注
分享
扫一扫
文章平均质量分 51
coodingcc
调试的错误就是编程给你最好的东西，因为在每个错误上面都标志着前进的一步。
展开
-
js中的prototype
每个函数是一个对象，它们对应的类就是function，每个函数对象都具有一个子对象prototype(表示该函数的原型)，prototype表示了一个类的属性的集合。当通过new来生成一个类的对象时，prototype对象的属性就会成为实例化对象的属性。下面以一个例子来介绍prototype的应用，代码如下：<script language="javascript">//定义一个...原创 2018-11-05 11:25:29 · 2974 阅读 · 1 评论 -
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 · 7592 阅读 · 0 评论 -
前端构建工具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 · 336 阅读 · 0 评论 -
Chrome开发者工具详解
Chrome开发者工具面板的功能点如下：Elements:查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。Sources:断点调试JS。Network:从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等），可以根据这个进行网络性能优化。在network里面，在network里面，在n...原创 2019-02-14 15:53:53 · 176 阅读 · 0 评论 -
关于flex
题目描述：若干个小方干实现左对齐排列，使用flex布局&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt;&amp;lt;head&amp;gt; &amp;lt;title&amp;gt;flex练习&amp;lt;/title&amp;gt;&amp;lt;/head&原创 2019-02-20 13:19:13 · 194 阅读 · 0 评论 -
js链表操作
next指向下一个节点的地址第一题思路：不给单链表，给的是单链表中要删除的节点node，这个node已经存在单链表中，即这个节点的前一个节点是未知的，但下一个节点是可以知道的，那么可以把下一个的值赋给这个node，然后删除下一个节点即可：即把node下一个节点的地址var deleteNode = function(node) { node.val = node.next.va...原创 2019-02-26 16:35:57 · 2317 阅读 · 2 评论 -
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 · 181 阅读 · 0 评论 -
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 · 212 阅读 · 0 评论 -
单元素/组件的过渡
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 · 317 阅读 · 0 评论 -
深入理解闭包以及闭包的使用场景
我的理解：能访问父函数的参数并且能立即执行或者被直接return出来的函数为闭包理解“闭包” step 1：掌握嵌套函数的词法作用域规则var scope = &quot;global scope&quot;; function checkScope() { var scope = &quot;local scope&quot;; function f() { return scope; }...原创 2019-02-22 19:34:29 · 2512 阅读 · 1 评论 -
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 · 444 阅读 · 0 评论 -
clipboard.js基本使用
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script src="./dist/clipboard.min.js" type="text/javascript" charset="utf-8"&原创 2018-11-05 17:21:36 · 1002 阅读 · 0 评论 -
props的字符串数组形式和对象形式
以字符串数组形式列出的 prop：props: ['title', 'likes', 'isPublished', 'commentIds', 'author']但是，通常你希望每个 prop 都有指定的值类型。这时，你可以以对象形式列出 prop，这些属性的名称和值分别是 prop 各自的名称和类型：props: { title: String, likes: Number, ...原创 2018-11-08 15:47:54 · 6471 阅读 · 0 评论 -
理解vue之element-ui中的
在el-table中，:data="tableData"是数据集table按照tableData这个数组的长度来生成多少行，按照有多少个el-table-column来生成多少列。 &lt;el-table-column label="日期" width="180"&gt; &lt;template slot原创 2018-11-20 14:32:15 · 284 阅读 · 0 评论 -
有效的数独之forEach讲解
&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt;&amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;js练习&amp;l原创 2018-12-05 16:38:34 · 118 阅读 · 0 评论 -
JSON.stringify
var actionType={ 1001:"课程开始", 1002:"上课", 1003:"下课", 1004:"课程结束", 2001:"竞速抢答", 2002:"发题", 3001:"投票", 3002:"语音问答"原创 2018-12-15 20:55:52 · 887 阅读 · 0 评论 -
:link,:visited,:hover,:active记忆方法(爱恨原则：lvha)
1、相同权值情况下，CSS样式的优先级总结来说，就是——就近原则（离被设置元素越近优先级别越高）：内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。2.权值不同时，浏览器是根据权值来判断使用哪种css样式的，哪种样式权值高就使用哪种样式。下面是权值的规则：标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。css写在后面的css样...原创 2018-12-16 14:48:27 · 1810 阅读 · 0 评论 -
彻底理解nth-child和nth-of-type的区别
nth-child倒很好理解就是选择第几个，代码如下：&amp;lt;style&amp;gt; p:nth-child(2),p:nth-child(7){ color:red; }&amp;lt;/style&amp;gt;&amp;lt;h1&amp;gt;标题&amp;lt;/h1&amp;gt;&amp;lt;p&a原创 2019-01-03 17:49:21 · 681 阅读 · 0 评论 -
Vue 插槽详解-slot
插槽内容：插槽内可以是任意内容父组件<template> <div class="app"> <!-- 关于插槽 --> <navigation-link :lists="nameList"> <!-- 具名插槽与默认插槽 --> <!-- <te原创 2019-01-15 16:02:33 · 325 阅读 · 0 评论 -
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 · 3014 阅读 · 1 评论 -
transform(变形)和transform-origin(变形原点)
transform(变形)和transform-origin(变形原点)的说明：目前这两个属性得到了除去ie以外各个主流浏览器webkit，firefox，opera的支持，属性名分别为-webkit-transform，-moz-transform，-o-transform;1、改变元素基点transform-origin（1）transform-origin是变形原点，也就是该元素围绕...原创 2019-01-30 11:03:25 · 1065 阅读 · 0 评论 -
CSS3设置鼠标放在图片上hover的时候会按比例放大的效果
transition 过渡属性transition：css属性名称 总时间 运动曲线 何时开始；这种效果可以在鼠标单击、点击、获得焦点、或对元素任何改变中触发，并以动画效果改变CSS属性值。运动曲线属性：设置鼠标放在图片上hover的时候会按比例放大的效果代码如下<!DOCTYPE html> <html> <head> ...原创 2019-03-22 16:57:39 · 3701 阅读 · 0 评论 -
进度条
原生实现基本思想：这里主要使用了CSS3的animation动画效果,将进度条设置为一个初始宽度为0,背景色为绿色,高度与容器相同的元素,通过animation对其宽度进行动画过渡,以实现进度条填充的效果.<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> ...原创 2019-03-26 17:09:38 · 311 阅读 · 0 评论 -
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 · 393 阅读 · 0 评论 -
【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 · 1269 阅读 · 0 评论 -
display:inline-block不独占一行的块级元素
display的几个常用的属性值，inline ， block， inline-blockinline（行内元素）:使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行(行内元素设置了position属性或float属性或display后属性默认变成inline-block，所以可以设置宽高)不能更改元素的height，width的值，大小由内容撑开.可以使...原创 2019-06-26 19:21:56 · 4516 阅读 · 0 评论 -
vue中.babelrc报unknown plugin错误
npm i xxx@1.2.0 -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 · 3540 阅读 · 0 评论 -
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 · 1695 阅读 · 0 评论 -
理解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 · 140 阅读 · 0 评论 -
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 · 191 阅读 · 0 评论 -
nuxt
为什么使用nuxt.js? 官网 https://zh.nuxtjs.org/guide/async-datavue单页面应用渲染是从服务器获取所需js，在客户端将其解析生成html挂载于id为app的DOM元素上，这样会存在两大问题。由于资源请求量大，造成网站首屏加载缓慢，不利于用户体验。由于页面内容通过js插入，对于内容性网站来说，搜索引擎无法抓取网站内容，不利于SEO。Nuxt....原创 2019-07-06 18:57:18 · 949 阅读 · 0 评论 -
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 · 198 阅读 · 0 评论 -
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 · 598 阅读 · 0 评论 -
快捷键
VS注释与取消注释快捷键最近在使用VS2010刷题，突然发现想全部注释时找不到注释的快捷键，网上查了下，原来很简单，只是需要使用组合键。注释： 先CTRL+K，然后CTRL+C取消注释： 先CTRL+K，然后CTRL+U苹果实用快捷键「Command + 方向键上」将光标快速移动到整篇文本开头「Command + 方向键下」快速移动到文章结尾「Command + 方向键左」将光标移动...原创 2019-06-20 11:43:58 · 127 阅读 · 0 评论 -
随开随用的本地服务器
全局安装node.js安装成功后，执行npm install anywhere -g 安装anywhere使用：在要启动静态服务的目录下执行 anywhere -p 8080-p 后跟端口号前端应用启动服务 anywhere 通过这个可以将本地下载的东西通过局域网分享给别人...原创 2019-06-20 10:54:55 · 476 阅读 · 0 评论 -
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 · 760 阅读 · 0 评论 -
自定义单选框
<!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 · 352 阅读 · 0 评论 -
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 · 8042 阅读 · 1 评论 -
性能优化常用方法
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 · 277 阅读 · 0 评论 -
vue 中注册全局组件， 全局过滤器，全局方法
全局组件1 全局注册组件 建一个 js 文件， 注册全局组件， 并且暴露出去 在页面就可以直接使用了2 全局注册过滤器3 定义全局方法 建一个文件注册全局方法 使用 exports 可能会报错，应该将 .babelrc 文件中的 “modules”: false 去掉 modules组止了文件的转换在 main.js 中引入页面中直接调用...原创 2019-06-05 20:07:16 · 995 阅读 · 0 评论