qq_38393535的博客

现代的前端应用大多数是SPA（单页应用程序），也就是只有一个HTML页面的应用程序。因为它的用户体验更好、对服务器压力更小，所以更受欢迎。为了有效的使用单个页面来管理多页面的功能，前端路由应运而生。前端路由功能：让用户从一个视图（页面）导航到另一个视图（页面）前端路由是一套映射规则，在React中，是URL路径与组件的对应关系使用React路由简单来说，就是配置路径和组件。

组件是React的一等公民，使用React就是在用组件组件表示页面中的部分功能组合多个组件实现完整的页面功能特点：可复用、独立、可组合。

React是一个用于构建用户界面的JavaScript库。用户界面:HTML页面(前端)；React主要用来写HTML页面，或构建Web应用；如果从MVC的角度来看，React仅仅是视图层(V)，也就是只负责视图的渲染，而并非提供了完整的M和C的功能。目的：提升包内提供的命令行工具的使用体验原来：先安装脚手架包，再使用这个包中提供的命令现在：无需安装脚手架包，就可以直接使用这个包提供的命令。

在命令行输入vue ui等待可视化界面打开填写项目名称（必须英文）和仓库信息(可选填），然后点击下一步进入“预设面板”这里根据需要选择一个选项，然后进入“功能面板”在这个部分，选择自己需要安装的功能，然后右边按钮打开，一般需要打开“Babel”、“Router”、“Linter / Formatter”以及“使用配置文件”，继续点击“下一步”根据上面信息配置完成后点击“创建项目”，此时会弹出一个面板表示是否把刚才的配置保存为一个预设（建议保存，下次创建项目的时候可以直接用）可以试一下。

在Vue中可以通过自定义按键修饰符别名< div id = " app " > 预先定义了keycode 116（即F5）的别名为f5，因此在文字输入框中按下F5，会触发prompt方法 < input type = " text " v-on: keydown.f5 = " prompt() " > < script > Vue . config . keyCodes . f5 = 116;alert('我是 F5！');} } });

javaScript高级[三]ES6新增语法letconstvar let const的区别解构赋值数组解构对象解构箭头函数剩余参数ES6之Array扩展方法扩展运算符（展开语法)扩展运算符可以将数组或者对象转为用逗号分隔的参数序列扩展运算符可以应用于合并数组将类数组或可遍历对象转换为真正的数组构造函数方法Array.from()方法实例方法find()方法findIndex()方法includes()方法ES6之String扩展方法模板字符串模板字符串中可以解析变量模板字符串中可以换行在模板字符串中可以调

javaScript高级[二]函数函数的定义和调用函数的定义方式函数的调用方式this函数内this指向改变函数内部this指向call()方法apply()方法bind()方法call、apply、bind总结严格模式概述开启严格模式为脚本开启严格模式为函数开启严格模式严格模式中的变化变量规定严格模式下this指向问题函数变化高阶函数闭包变量作用域什么是闭包闭包的作用闭包案例闭包应用-点击li输出当前li的索引号闭包应用-3秒钟之后,打印所有li元素的内容闭包应用-计算打车价格总结递归递归简介递归案例浅拷

javaScript高级[一]面向对象面向对象编程介绍面向过程思想面向对象思想ES6中的类和对象对象类创建类类constructor构造函数在类中添加方法类的继承语法super关键字super关键字调用父类构造函数举例super关键字调用父类普通函数举例子类继承父类方法的同时扩展自己的方法ES6中类和对象的3个注意点构造函数和原型概述构造函数构造函数的问题构造函数原型prototype对象原型__proto__构造函数constructor构造函数、原型对象、实例之间的关系原型链JS中的成员查找机制原型对象

WebAPI[四]PC端网页特效元素偏移量offset系列offset系列属性offset与style的区别元素可视区client系列client系列属性淘宝flexible.js文件的分析立即执行函数`window.devicePixelRatio`像素比pageshow元素滚动scrollscrollHeight和scrollWidthscrollTop和scrollLeft页面被卷去的头部兼容性问题解决方案三大系列总结mouseenter和mouseover的区别动画函数封装动画原理实现动画函数简单封

WebAPI[三]BOMBOM概述BOM组成window对象的常见事件窗口加载事件onloadDOMContentLoaded调整窗口大小事件onresize定时器setTimeout() 定时器停止clearTimeout() 定时器setInterval()定时器停止setInterval()定时器thisJS执行队列JS是单线程异步和同步JS执行机制location对象URLlocation常见属性location对象方法navigator对象history对象BOMBOM概述BOM (Bro

WebAPI[二]事件高级注册事件（绑定事件)注册事件概述传统注册方式方法监听注册方式addEventListener 事件监听方式（ie9之后）attachEvent 事件监听方式（ie9以前）注册事件兼容性解决方案删除事件（解绑事件)删除事件的方式传统解绑事件方式方法监听解绑事件的方式方法监听解绑事件的方式(仅适用于ie678)删除事件兼容性解决方案DOM事件流事件对象什么是事件对象事件对象的使用语法传统的绑定事件写法中的事件对象事件监听注册事件中的事件对象事件对象的兼容性方案事件对象的常见属性和方法阻

WebAPI[一]API和Web APIAPIWeb API总结DOMDOM简介DOM树获取元素根据ID获取根据标签名获取某些元素通过HTML5新增的方法获取获取特殊元素事件基础事件事件执行步骤常见事件操作元素改变元素内容innerTextinnerHTMLinnerHTML和innerText的区别常用元素的属性操作表单元素的属性操作样式属性操作element.style 行内样式操作element.className 类名样式操作自定义属性操作获取属性值的方法自定义属性值移除属性节点操作节点学习原因节点

前端学习六——html5+CSS3HTML5H5新增语义标签多媒体标签audio音频标签audio音频标签常见属性音频标签语法视频标签video视频标签语法H5新增input表单、表单属性CSS3属性选择器结构伪类选择器伪元素选择器2D转换2D转换之移动translate2D转换之旋转 rotate2D转换中心点transform-origin2D转换之缩放Scale2D转换综合写法动画动画的基本使用常见的动画属性动画简写属性速度曲线细节3D转换3D移动translate3d透视perspectivetra

JS学习四对象对象创建对象的三种方法利用字面量来创建对象利用new Object创建对象利用构造函数来创建对象new关键字遍历对象属性内置对象内置对象查文档内置对象 Math()Math.PI、 Math.max()、 Math.min()Math.abs()Math.floor()Math.ceil()Math.round()随机数方法random() 重要内置对象Date()日期对象的使用日期格式化获取日期总的毫秒数案例：倒计时(重点案例)内置对象Array()数组的创建检测是否为数组的两种方式添加删除

JS学习三数组创建数组获取数组中的元素遍历数组数组的长度数组中新增元素通过修改length长度新增数组元素通过修改数组索引增数组元素数组案例删除指定的数组元素翻转数组冒泡排序选择排序函数函数的使用声明函数和调用函数函数的封装函数的参数语法格式案例1案例2函数实参和形参不匹配问题函数的返回值语法格式运用之前程序的改进案例注意事项break continue return的区别练习arguments的使用函数的案例案例1案例2案例3案例4：一个函数可以调用另一个函数函数的两种声明方式作用域作用域变量的作用域全局

JS学习二流程控制顺序流程控制分支流程控制if 语句if else双分支语句if else多分支语句三元表达式分支流程控制switch语句switch语句和if else if语句的区别循环for循环双重for循环while循环do..while循环循环小结continuebreak流程控制就是来控制代码按照何种顺序来执行，流程控制有三种结构：顺序结构、分支结构、循环结构顺序流程控制程序按照代码先后顺序、依次执行分支流程控制JS中提供两种分支结构语句：if语句、switch语句if 语句if

JS学习一javascript初识介绍浏览器执行JSJS的组成JS的3种书写位置：行内、内嵌、外部行内式内嵌式外部JS的输入和输出语句变量变量的使用命名规范数据类型变量的数据数据类型的分类NumberStringBooleanUndefinedNull获取变量的数据类型typeofconsole字面量数据类型转换转换为字符串类型转换为数字类型（重点）转换为布尔型解释型语言和编译型语言解释性语言和编译性语言的特点标识符、关键字、保留字运算符运算符(操作符)算数运算符浮点数进行算数运算表达式和返回值递增递减运算

前端学习五——css盒子模型(Box Model)盒子边框(border)边框的综合写法盒子边框的样式总结表格的细线边框内边距(padding)盒内尺寸计算padding不影响盒子大小情况外边距(margin)块级盒子水平居中文字居中和盒子居中区别插入图片和背景图片区别清除元素默认的内外边距外边距合并盒子模型布局稳定性圆角边框盒子阴影浮动(float)CSS布局的三种机制浮动概念清除浮动清除浮动的本质清除浮动的办法额外标签法(隔墙法)父级添加overflow属性方法使用after伪元素清除浮动使用双伪元素清

前端学习1——html瞄点定位base标签预格式化文本pre标签特殊字符瞄点定位通过创建瞄点链接，用户能够快速定位目标内容。创建瞄点链接分为两步：// 1、使用相应的id名标注跳转目标的位置<h3 id="two">第2集</h3>// 2、使用<a href="#id名">链接文本</a>创建链接文本(被点击的)<a href="#two"></a>base标签语法：<base target="_blank

前端学习四——css复合选择器后代选择器(重点)子元素选择器交集选择器并集选择器(重点)链接伪类选择器(重点)复合选择器总结标签显示模式(display)标签的显示模式块级元素（block-level）行内元素（inline-level）行内块元素(inline-block)三种模式区别标签显示模块转换（display）行高那些事(line-height)行高测量单行文本垂直居中CSS背景(background)背景颜色(color)背景图片(image)背景平铺(repeat)背景位置(position)

前端学习三——css引入CSS样式表行内式内部样式表外部样式表CSS选择器标签选择器类选择器id选择器id选择器和类选择器区别通配符选择器css字体font字体font-size:大小font-family:字体font-weight:字体粗结font-style:字体风格font:综合设置字体样式(重点)font总结css外观属性color 文本颜色text-align 文本水平对齐方式line-height 行间距text-indent首行缩进text-decoration文本装饰css外观属性总结su

前端学习2——html表格创建表格表格属性表头单元格标签th表格标题caption合并单元格合并单元格两种方式合并单元格顺序合并单元格三部曲表格划分结构列表无序列表ul有序列表ol自定义列表dl表单input控件label标签textarea控件select下拉菜单form表单域表格创建表格表格语法<table> <tr> <!-- 行标签 --> <td> <!-- 一个代表一个单元格 --> 单元格内的文字 &l