|
Vue
beforeCreate( 创建前 )
created ( 创建后 ）
beforeMount（挂在开始之前）
mounted（挂在开始之后）
beforeUpdate
updated（更新后）
beforeDestroy（销毁前）
destroyed（销毁后）
Vuex
1.Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。简单来说就是：应用遇到多个组件共享状态时，使用vuex。
2.场景：多个组件共享数据或者是跨组件传递数据时
vuex的流程
3.页面通过mapAction异步提交事件到action。action通过commit把对应参数同步提交到mutation，mutation会修改state中对应的值。最后通过getter把对应值跑出去，在页面的计算属性中，通过，mapGetter来动态获取state中的值.
2.vuex有哪几种属性
有五种,分别是State , Getter , Mutation , Action , Module (就是mapAction)
-
state：vuex的基本数据，用来存储变量 -
geeter：从基本数据(state)派生的数据，相当于state的计算属性 -
mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。 -
action：和mutation的功能大致相同，不同之处在于 ==》1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。 -
modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。
4.Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中？
一、如果请求来的数据是不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入vuex 的state里。
二、如果被其他地方复用，这个很大几率上是需要的，如果需要，请将请求放入action里，方便复用，并包装成promise返回，在调用处用async await处理返回的数据。如果不要复用这个请求，那么直接写在vue文件里很方便
弹性盒子
采用Flex布局的元素，被称为Flex容器(flex container)，简称“容器”。其所有子元素自动成为容器成员，成为Flex项目(Flex item)，简称“项目”。
容器默认存在两根主轴：水平方向主轴(main axis)和垂直方向交叉轴(cross axis)，默认项目按主轴排列。
main start/main end：主轴开始位置/结束位置；
cross start/cross end：交叉轴开始位置/结束位置；
main size/cross size：单个项目占据主轴/交叉轴的空间；
三、容器属性
设置在容器上的属性有6种。
flex-direction
flex-wrap
flex-flow
justify-content
align-item
align-content
flex-direction属性：决定主轴的方向（即项目的排列方向）
.box {
? flex-direction: row | row-reverse | column | column-reverse;
}
row（默认）：主轴水平方向，起点在左端；
row-reverse：主轴水平方向，起点在右端；
column：主轴垂直方向，起点在上边沿；
column-reserve：主轴垂直方向，起点在下边沿。
CSS3
1.css3新增边框属性
css3新增属性之border-color：为边框设置多种颜色
css3的border-image属性是使用图片来创建边框
css3新增属性之border-radius：圆角边框
css3新增属性之box-shadow：阴影效果
2.css3新增背景属性
1、css3新增属性之background-size：指定背景图片尺寸
2、css3新增属性之background-origin：指定背景图片从哪里开始显示
3、css3新增属性之background-clip：指定背景图片从什么位置开始裁剪
3.css3新增文字效果
1、css3新增属性之text-shadow：文本阴影
2、css3新增属性之word-wrap：自动换行
4.css3新增动画效果
1、transform变换效果：
2、animation动画效果
5.css3新增过渡效果
1、transition过渡效果
ES6新增属性
1.声明变量
let/const
let:用来声明变量，类似于var，但是使用let有以下特性：
（1）.不存在变量提升
（2）暂时性死区
（3）（3）.不允许重复声明，同一作用域内只能声明一次
（4）（4）.新增的块级作用域
2.字符串扩展
(1).codePointAt()
(2).fromCodePoint()
(3).repeat()
(4).indexof()补充includes() startswith() endswith()
3.字符串的正则方法
字符串对象共有 4 个方法，可以使用正则表达式：match()、replace()、search()和split()。
ES6 将这 4 个方法，在语言内部全部调用RegExp的实例方法，从而做到所有与正则相关的方法，全都定义在RegExp对象上。
4.数组的解构赋值
ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。
以前，为变量赋值，只能直接指定值。
5.对象的解构赋值
解构不仅可以用于数组，还可以用于对象。
6.字符串的解构赋值
字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。
promise解决回调地狱
一、 Promise对象有三种状态，他们分别是：
pending: 等待中，或者进行中，表示还没有得到结果
resolved(Fulfilled): 已经完成，表示得到了我们想要的结果，可以继续往下执行
rejected: 也表示得到结果，但是由于结果并非我们所愿，因此拒绝执行。
组件传参
vue的组件传值分为三种方式：父传子、子传父、非父子组件传值
引用官网的一句话：父子组件的关系可以总结为 prop 向下传递，事件向上传递
父组件通过 prop 给子组件下发数据，子组件通过emit事件给父组件发送消息。
vue 中没有直接子对子传参的方法，建议将需要传递数据的子组件，都合并为一个组件
如果一定需要子对子传参，可以先从传到父组件，再传到子组件（相当于一个公共bus文件）
CSS单位
css中常用的单位由px、em、rem、vh、vw
px（像素）
px是绝对单位，一个像素代表一个点。如100px*100px的正方形，则是由宽度100个点，长度100个点组成的平面
em
em是相对单位，它的参考对象是它的父级的字号，如父级字号是16px，如果设置元素的字号大小为2em的话，元素的字号大小则为32px
rem
rem由页面的根元素html的字号决定，浏览器一般默认的字号为16px，如设置元素的字号大小为1rem，则元素的字号大小为16px
使用rem的好处是：当我们改变了浏览器的字号设置时，页面的字号也会随之发生变化，这个设置会非常方便老年人浏览网页
vh
浏览器视觉窗口的高度，分为100份，每份为1vh，如我们设置元素高度为20vh，则元素的高度为视觉窗口高度的20%
vw
浏览器视觉窗口的宽度，分为100份，每份为1vw，如我们设置元素宽度为100vh，则元素的宽度为视觉窗口宽度的100%
vh和vw在开发全屏时非常方便。
Vue路由
vue-router的跳转方法
$router.push()
导航跑到不同的URL,这个方法会向history栈添加一个新记录，当用户点击浏览器后退按钮时，可回退到之前的url
$router.replace()
导航跑到不同的URL,它不会向history添加新记录，而是跟它的方法名一样替换掉当前的history记录
$router.go(n)
这个方法的参数是一个整数，意思是在history记录中向前或者后退多少步，类似window.history.go(n)。
Vue组件封装过程
● 首先，使用Vue.extend()创建一个组件
● 然后，使用Vue.component()方法注册组件
● 接着，如果子组件需要数据，可以在props中接受定义
● 最后，子组件修改好数据之后，想把数据传递给父组件，可以使用emit()方法
1、组件创建—有3中方法，extend()
只需要在调用组件的地方，写上组件名字的标签即可
1.同源策略如下：
URL 说明
是否允许通信
http://www.a.com/a.js
http://www.a.com/b.js
同一域名下 允许
http://www.a.com/lab/a.js
http://www.a.com/script/b.js
同一域名下不同文件夹 允许
http://www.a.com:8000/a.js
http://www.a.com/b.js
同一域名，不同端口 不允许
http://www.a.com/a.js
https://www.a.com/b.js
同一域名，不同协议 不允许
http://www.a.com/a.js
http://70.32.92.74/b.js
域名和域名对应ip 不允许
http://www.a.com/a.js
http://script.a.com/b.js
主域相同，子域不同 不允许
http://www.a.com/a.js
http://a.com/b.js 同一域名，不同二级域名（同上） 不允许（cookie这种情况下也不允许访问）
http://www.cnblogs.com/a.js
http://www.a.com/b.js
不同域名 不允许
特别注意两点：
第一，如果是协议和端口造成的跨域问题“前台”是无能为力的，
第二，第二：在跨域问题上，域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。
第三，“URL的首部”指window.location.protocol +window.location.host，也可以理解为“Domains, protocols and ports must match”。
3.前端解决跨域问题
1>document.domain + iframe (只有在主域相同的时候才能使用该方法)
2> 动态创建script
这个没什么好说的，因为script标签不受同源策略的限制。
3> location.hash + iframe
原理是利用location.hash来进行传值。
4> window.name + iframe
window.name 的美妙之处：name 值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的 name 值（2MB）。
5> postMessage（HTML5中的XMLHttpRequest Level 2中的API）
6> CORS
CORS背后的思想，就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败。
IE中对CORS的实现是xdr
7> JSONP
JSONP包含两部分：回调函数和数据。
回调函数是当响应到来时要放在当前页面被调用的函数。
数据就是传入回调函数中的json数据，也就是回调函数的参数了。
jsonp虽然很简单，但是有如下缺点：
1）安全问题(请求代码中可能存在安全隐患)
2）要确定jsonp请求是否失败并不容易
8> web sockets
web sockets是一种浏览器的API，它的目标是在一个单独的持久连接上提供全双工、双向通信。(同源策略对web sockets不适用）。
浏览器兼容性
1、不同浏览器的标签默认的外补丁( margin )和内补丁(padding)不同
解决方案： css 里增加通配符 * { margin: 0; padding: 0; }
2、IE6双边距问题；在 IE6中设置了float , 同时又设置margin , 就会出现边距问题
解决方案：设置display:inline;
3、当标签的高度设置小于10px，在IE6、IE7中会超出自己设置的高度
解决方案：超出高度的标签设置overflow:hidden,或者设置line-height的值小于你的设置高度
4、图片默认有间距
解决方案：使用float 为img 布局
5、IE9一下浏览器不能使用opacity
解决方案：
opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);
6、边距重叠问题；当相邻两个元素都设置了margin 边距时，margin 将取最大值，舍弃最小值；
解决方案：为了不让边重叠，可以给子元素增加一个父级元素，并设置父级元素为overflow:hidden；
7、cursor:hand 显示手型在safari 上不支持
解决方案：统一使用 cursor:pointer
8、两个块级元素，父元素设置了overflow:auto；子元素设置了position:relative ;且高度大于父元素，在IE6、IE7会被隐藏而不是溢出；
解决方案：父级元素设置position:relative
函数防抖 debounce
原理：将若干函数调用合成为一次，并在给定时间过去之后，或者连续事件完全触发完成之后，调用一次(仅仅只会调用一次！！！！！！！！！！)。
函数节流 throttle
原理：当达到了一定的时间间隔就会执行一次；可以理解为是缩减执行频率
在debounce中：在执行setTimeout函数之前总会将timer用setTimeout清除，取消延迟代码块，确保只执行一次
在throttle中：只要timer存在就会执行setTimeout，在setTimeout内部每次清空这个timer，但是延迟代码块已经执行啦，确保一定频率执行一次
flex和grid布局的差别：
flex是一维布局 ，grid是二维布局也就是说grid布局可以更好的操作行和列。flex布局和grid布局是现在的主流的两种布局方式。
Ajax简介
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
Ajax的工作原理
Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎)，使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器。像—些数据验证和数据处理等都交给Ajax引擎自己来做,只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
伪数组
1、拥有length属性，其它属性（索引）为非负整数(对象中的索引会被当做字符串来处理，这里你可以当做是个非负整数串来理解
2、不具有数组所具有的方法
Array.from（类数组）返回的就是真数组。
get与post区别
GET在浏览器回退时是无害的，而POST会再次提交请求。
GET产生的URL地址可以被Bookmark，而POST不可以。
GET请求会被浏览器主动cache，而POST不会，除非手动设置。
GET请求只能进行url编码，而POST支持多种编码方式。
GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
GET请求在URL中传送的参数是有长度限制的，而POST么有。
对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
GET参数通过URL传递，POST放在Request body中。
post运输两次，第一次运输header,第二次data，get运输一次。
-
GET与POST都有自己的语义，不能随便混用。 -
据研究，在网络环境好的情况下，发一次包的时间和发两次包的时间差别基本可以无视。而在网络环境差的情况下，两次包的TCP在验证数据包完整性上，有非常大的优点。 -
并不是所有浏览器都会在POST中发送两次包，Firefox就只发送一次。
ajax原理和XmlHttpRequest对象
?
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对?XMLHttpRequest有所了解。
XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。
Transform
功能：实现文字，图像的旋转、缩放、倾斜、移动这四种类型的变形处理。
在safari，chrome浏览器里需要将其写成
-webkit-transform
在firefox浏览器里需要写成
-mos-transform
在opera浏览器里需要写成
-o-transform
JavaScript 主要有如下7 种数据类型：字符串、数字、布尔、数组、对象、Null、Undefined
五大浏览器及其对应内核
IE内核：Trident
Chrome内核：以前是Webkit，现在是Blink
Firefox内核：Gecko
Safari内核：Webkit
Opera内核：最初是Presto，后来是Webkit，现在是Blink（Webkit的分支）
1.JavaScript创建节点
createElement();注：创建元素节点。
例如：
var v = document.createElement(“p”);
?
createTextNode();注：创建文本节点。
例如：
var v = document.createTextNode(“大家好”);
2.js节点操作
appendChild();注：给当前节点添加一个子节点
var p = document.createElement(“p”);
var text = document.createTextNode(“大家好”);
p.apendChild(text);注：添加
?
removeChild();删除子节点
var div = document.createElement(“div”);
var p =?document.createElement(“p”);
div.removeChild§;
?
replaceChild();注：更换子节点
var p = document.createElement(“p”);
var text = document.createTextNode(“大家好”);
p.apendChild(text);注：把text添加到p里面
var text1 = document.createTextNode(“你们好”);
p.apendChild(text1,text);注：这样就把text换成了text1。
?
insertBefore();将一个节点插入另一个节点之前。
var div = document.createElement(“div”);
var p = document.createElement(“p”);
div.apendChild§;注：将p添加到div，这个时候p在div中的位置是第一
var p1 = document.createElement(“h1”);
div.insertBefore(p,p1);注：这样就把h1放到p的前面，p在div中的位置是第二。
在数组末尾插入元素
arr.push(value)，在数组的末尾添加一个或多个元素，并返回数组的新长度。
删除数组末尾的元素
arr.pop()删除索引值最大的元素,并返回被删除的元素。
在数组的头部插入元素
unshift(value);在数组的头部添加一个或多个元素,并返回数组的新长度
删除数组的头部元素
shift();删除索引为0的元素，并返回删除的元素
数组和数组（或元素）的合并
concat()合并数组或元素，返回新的数组,原数组不会改变
在数组中添加删除或替换元素
splice();在任意位置添加或删除元素,返回删除或被替换的值，如果没有被删除或替换则返回空数组;
splice()方法会修改原数组的值;
只有一个值时，从当前位置删除到数组末尾
截取复制数组指定位置的内容
slice(开始位置，结束位置)；第二个参数不写默认到尾部,只能从前往后截取；返回的值为截取到的内容形成的新数组;
指定字符连接字符串
join();数组的每个元素以指定的字符连接形成新字符串返回;
将数组进行排序
sort()将数组进行排序(升序),返回新数组，原数组也会改变;
将数组进行倒序
reverse()；可以将数组进行倒序，并返回新数组，原数组也会随之改变;
|