- 博客(34)
- 收藏
- 关注
RSS订阅
原创 面向对象
面向对象（读书笔记），详见红皮书162-174一、类的声明和实例生成类声明的方式：构造函数方法、es6的class关键字 //第一种方式 构造函数 function People(name) { this.name = name; } var xiaoming = new People("xiaoming") console.log(xiaoming); //...
2019-03-22 01:54:44
312
1
原创 箭头函数和函数默认值
文章目录箭头函数关于函数默认值箭头函数普通的函数，谁调用this指向谁箭头函数特性：函数内部的this，绑定的是定义时所在的作用域的this不可以当做构造函数不可以使用arguments对象关于函数默认值function fn(){ a = a || 10;//默认为10 console.log(a) }出现的问题：当fn（0）时，结果也为10，0转换为falsees...
2019-06-26 17:07:57
399
原创 前后端联调
前后端联调访问服务器的数据config-index.js-proxyTable-api-target(修改服务器名称，IP地址)ifconfig:查看IP地址192.168.3.14"dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js","star...
2019-04-22 12:19:20
1668
原创 关于模拟数据
一般写在static/mock里面用axios访问时，路径要改为“/api/index.json”格式，上线之前最好不要改动代码需要将文件设置//config文件夹中index.js中进行代理设置//webpack的dev-sever提供的proxyTable: { "/api": { target: "http://localhost:8080"...
2019-04-15 19:36:26
453
原创 better-scroll
作用：实现滑动效果首先，在github上搜索better-scrollhttps://github.com/ustbhuangyi/better-scroll在vue中安装npm install better-scroll --save引入：import BScroll from ‘better-scroll’按照里面的用法：套两层容器<div class="wrapper"&g...
2019-04-12 12:19:05
845
原创 webpack编译Less和Sass
文章目录一、less1、变量 @key: value;2、混合3、方法4、方法的条件语句5、插值语法6、内置二、Sass1、变量 $key:value;2、混合3、方法4、继承 @extend xxx;5、if语句6、for语句7、while语句8、each语句9、三元运算符10、插值 #{ }一、less1、变量 @key: value;编译之后，是不会将变量保留的。...
2019-04-04 21:50:21
846
原创 ES6部分简略总结
一、数字拓展1、Number.isNaN——判定一个数字是否是NaN全局中的isNaN，会进行数据类型的转换 先尽可能转为数字 再判定Number.isNaN, 不会进行数据类型的转换 参数只要不是数字类型 就为false2、Number.isFinite——判定一个值是否是有限的全局中的isFinite，会进行数据类型的转换 先尽可能转为数字 再判定Number.isFinite, ...
2019-04-04 19:41:05
297
原创 promise对象
文章目录一、promise含义特点：优点：缺点：一、promise含义异步编程的一种解决方案特点：1、对象状态不受外界影响。三种状态：pending（进行中）、fulfilled（已成功）、rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。2、一旦状态改变，就不会再变。状态改变，只有两种可能：从pending变为fulfilled和...
2019-04-04 12:09:54
100
原创 chrome的console面板输出不了的解决
上面的filter或者default那块设置被更改了，重新设置一下这次错误是因为filter哪里设置了过滤文件，更改一下就可以了
2019-04-02 11:42:53
1203
原创 vue轮播图
借助第三方轮播插件 npm install vue-awesome-swiper --save打开github，里面搜索vue-awesome-swiper找相对应的文件执行里面相关的命令npm install vue-awesome-swiper --save在main.js中引入import Vue from 'vue'import VueAwesomeSwiper from...
2019-04-01 16:25:17
1341
原创 vue脚手架
1、基于webpack创建的脚手架 vue init webpack “项目名称” 文件夹名称例如： vue init webpack my-project container对于创建的选项进行选择cd my-projectnpm run dev创建的项目文件夹分析...
2019-03-31 17:22:17
217
原创 动画封装
<div id="app"> <button @click="toggle">toggle</button> <child :show="isShow"> <div class="demo">hello world</div> </child> <child :show="isShow...
2019-03-31 10:03:27
143
原创 动画使用 & animate.css库 & velocity.js & 动画钩子函数
1、transition运用:显隐<style type="text/css"> .round { width: 200px; height: 200px; border-radius: 50%; background: red; } .circle-enter, .circle-leave-to { width: 0; height: 0; ...
2019-03-30 13:20:07
552
原创 父组件中子组件上事件执行
问题描述：在父组件内给子组件上添加自定义事件，如图为click，并不能执行。解决方法一：添加事件修饰符@click.native（此处不能自定义事件，只能用原生事件） <div id="app"> <count @click="putButton"></count> <!-- 解决方法一 --> <!-- <count ...
2019-03-29 10:18:23
753
原创 props特性 & 组件参数检验
文章目录一、props特性二、组件参数校验一、props特性props中定义的数据跟data中数据一样，会直接添加在组件实例化对象上，并设置了特性，所以可以直接this.content进行访问,可直接在插值语法{{}}中使用，可进行简单逻辑处理，但是不能在methods中直接对值进行更改；通过属性传值，并在props中定义的该属性不会在标签中显示；非props的属性会在标签中显示 &l...
2019-03-28 21:37:02
317
原创 关于小bug的处理及ref的运用
1、关于标签混乱排列<div id="app"> <table> <tbody> <row></row> <row></row> <row></row> </tbody> </table> </div> &...
2019-03-28 20:02:31
169
原创 列表渲染 & 数据更新检测
v-for指令v-for=“item in items”可将in换成of数组中为item，index对象中为value，key，index理想的 key 值是每项都有的唯一 id。必须在使用 v-for 时提供 key。key是Vue 识别节点的一个通用机制，key 并不与 v-for 特别关联-不推荐同时使用v-if和v-for <li v-for="item in ite...
2019-03-28 18:42:27
189
原创 条件渲染
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别；v-if 指令只会在指令的表达式返回true时候被渲染； 上面使用 v-if，最终的渲染结果将不包含 元素；当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级,不推荐同时使用；v-show 的元素始终会被渲染并保留在 DOM 中，只是简单地切换元素的 ...
2019-03-28 16:40:38
531
原创 计算属性computed
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护，所以用计算属性，容易测试和理解。特点：内置缓存，基于响应式依赖进行缓存，只有里面依赖的数据改变时，才会重新求值形式：放在vm（view-model）实例中，computed： { }；setter函数里面的参数就是改变后的值；getter函数记得return；计算属性数据存储什...
2019-03-28 15:44:50
174
原创 生命周期钩子函数
生命周期函数：就是vue实例在某一个时间点会自动执行的函数，直接放在实例里面，都没有参数，this都指向实例化对象通过 new Vue 创建的为根 Vue 实例，所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象 (一些根实例特有的选项除外)Vue 实例的实例属性与方法都有前缀 $组件共分三大周期：创建期，存在期，销毁期创建期：beforeCreate 组件即将创...
2019-03-28 13:13:27
186
原创 ES6读书笔记——数组扩展
数组扩展1、扩展运算符（spread）2、Array.from()3、Array.of()4、数组实例的 copyWithin()1、扩展运算符（spread）扩展运算符是三个点 …含义：该运算符将一个数组，变为参数序列主要用于函数调用，可与正常函数参数结合使用扩展运算符后面还可以放置表达式如果扩展运算符后面是一个空数组，则不产生任何效果扩展运算符如果放在括号中，JS引擎就会认为...
2019-03-26 20:31:40
196
原创 ES6读书笔记——字符串扩展
字符串扩展1、includes()、startsWith()、endsWith()includes()：返回布尔值，表示是否找到了参数字符串。startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。第一个参数：字符；第二个参数：表示开始搜索的位置；endsWith方法针对前n个字符，其他针对从第...
2019-03-26 14:28:58
217
原创 ES6读书笔记——变量声明、解构赋值
ES6一、定义变量 let、constES6声明变量的方法6种：var、function、let、const、import、class1、 let、const特点：① 块级作用域；② 不存在变量提升；③ 暂时性死区；（代码块内，使用let命令声明变量之前，该变量都是不可用的）④ 相同作用域重复声明同一个变量，会报错；const 声明只读的常量，必须赋值并且不能改变；（否则会报错...
2019-03-26 12:03:32
259
原创 ES5 总结
ES5一、JSON拓展1、parse—— 将json字符串转为js对象JSON.parse(text, reviver)text：若传入的字符串不符合 JSON 规范，则会抛出 SyntaxError 异常;不允许逗号作为结尾。reviver(可选）：两个参数 为属性名、属性值，返回值为本次处理结果，作用域为当前遍历的对象；函数的遍历顺序依照从最内层开始，按照层级顺序，依次向外遍历...
2019-03-25 20:33:45
195
原创 渲染机制
渲染机制DTD（document type definition）文档类型定义，是一系列的语法规则，用来定义XML或(X)HTML的文件类型。浏览器会使用它来判断文档类型，决定使用何种协议来解析，以及切换浏览器模式。DOCTYPE是document type (文档类型) 的缩写。声明位于文档的最前面，处于标签之前，它不是html标签。主要作用是告诉浏览器的解析器使用哪种HTML规范或者XHT...
2019-03-22 20:55:32
155
原创 安全
安全一、CSRFCSRF（Cross-site request forgery），跨站请求伪造CSRF攻击理解：攻击者盗用了你的身份，以你的名义发送恶意请求。CSRF能够做的事情包括：以你名义发送邮件，发消息，盗取你的账号，甚至于购买商品，虚拟货币转账…造成的问题包括：个人隐私泄露以及财产安全。攻击原理来源：博客https://www.cnblogs.com 简化图 从上图可以看...
2019-03-22 14:28:04
86
原创 通信
通信(待完善理解）一、同源策略同源：URL由协议、域名、端口和路径组成，如果两个URL的协议、域名和端口相同，则表示他们同源。相反，只要协议，域名，端口有任何一个的不同，就被当作是跨域。同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。这是一个用于隔离潜在恶意文件关键的安全机制。同源策略限制：Cookie、LocalStorage、IndexDB...
2019-03-22 13:22:50
108
原创 原型链相关
原型链一、创建对象的方法：1、对象字面量：var obj = {}；2、使用类的实例化方式：var obj = new Person（）；this添加3、使用对象的构造函数：var obj = new Object（）；4、Object.create(); //第一种 对象字面量 var kind1 = {name: "kind1"}; //第二种 使用类的实例化方式...
2019-03-20 23:50:37
112
原创 http协议
HTTPHyper Text Transfer Protocol（超文本传输协议）,用于从万维网（WWW:World Wide Web ）服务器传输超文本到本地浏览器的传送协议HTTP协议主要特点简单快速、灵活、无连接、无状态1、简单快速：客户向服务器请求服务时，只需传送请求方法和路径。请求方法常用的有GET、HEAD、POST。每种方法规定了客户与服务器联系的类型不同。由于HTTP协议简...
2019-03-20 19:09:55
92
原创 类型转换
数据类型（7种）：基本数据类型：Number、String、Boolean、Undefined、Null、Symbol复杂数据类型：Objectvar s = Symbol(); typeof s; // "symbol"显式类型转换Number函数String函数Boolean函数1、Number函数类型转换后值数值原来值字符串可被解析...
2019-03-20 00:04:40
71
原创 DOM事件相关内容
DOM事件类1、DOM事件级别dom0: element.onclick= function(){}dom1: (没有定义事件相关的内容)dom2: element.addEventListener(‘click’,function(){}，true/false)emoveEventListener():不能移除匿名添加的函数只有2级DOM包含3个事件：事件捕获阶段、处于目标阶段和事...
2019-03-19 18:45:26
133
原创 清除浮动
浮动存在问题及解决<style type="text/css"> * { margin: 0; padding: 0; } .container { //不给父盒子添加高度，想实现高度自适应 width: 360px; border: 1px solid #000; background: #eee; } .container p...
2019-03-19 16:18:54
78
原创 BFC
BFC相关知识BFC块级格式化上下文 (Block Fromatting Context), 按照块级盒子布局的布局规则：1.内部的盒子会在垂直方向，一个个地放置；2.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此；2.盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠；3.每一个元素的左边，与包...
2019-03-19 15:23:41
76
原创 三栏布局
三栏布局的实现方法第一种：浮动布局第二种：绝对定位布局第三种：flex布局第三种：table布局第五种：网格布局描述：左右宽度200px，中间自适应第一种：浮动布局 <style type="text/css"> * { margin: 0; padding: 0; } .container { width: 100%; } .box {...
2019-03-19 12:02:55
95
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人