HTML
1.路径忽略大小写
2.<img>的title属性：移入图片时显示的文字
3.<a>的target属性：
- self（默认值）
- blank（在空白页面打开）
4.背景是属性，是描述事物特征的，在页面中是不占位置的，当背景图的尺寸大于标签的尺寸时，超出的部分会被截掉，当背景图小于标签尺寸时，默认会将背景图平铺。背景图的尺寸与标签的尺寸无关。
5.空链接：一个#会回到顶部，##则不会动
6.锚点链接：'#id名'
7.自定义列表
<dl>
<dt></dt>
<dd></dd>
</dl>
8.表格标签<table> 表头标签<th> 行标签<tr> 单元格标签<td> 表格标题标签<caption>
'cellspacing'：设置单元格之间的属性，设置数值调整
合并单元格： 跨列合并 'colspan'
跨行合并 'rowspan'
9.表单：是用来获取用户信息的
<input> 属性：'type'
- text:输入框
- placeholder：提示文本
- password：密码框
- radio：单选按钮
- name：组名，将多个单选按钮设置组名，实现切换
- checked：默认选中
- checkbox：多选框
- submit：提交按钮
- reset：重置按钮
'value'：指文本框的内容
10.文本提示：<label> 属性：'for'：和输入框等的id相关联，实现单击label使输入框等获取焦点。
11. <select> 下拉框
<optgroup> 下拉分组 - 属性'label'：组标签名
<option></option> 下拉选项 - 属性'selected'：默认选项
</optgroup>
</select>
12.复选框 <textarea>
13.<form> 提交表单：和提交、重置按钮结合使用
属性：'action'：提交地址
14.<button> 属性：'type'
- button：普通
- submit：提交（默认值）
- reset：重置
15. 加粗 <b> <strong>
倾斜 <i> <em>
下划线 <u> <ins>
删除线 <s> <del>
16. h5新增标签 <header> <nav> <main> <footer>
CSS
1.首行缩进：text-indent
2.1em = 当前字号的大小
3.块元素：html,body,div,ul,li,ol,dl,dt,dd,hr,form,p
4.行内元素:span,a,b,strong,i,em,u,ins,s,del
5.行内块元素：img,大部分表单元素
6.选择器的优先级：元素选择器 < 类选择器 < id选择器 < 内联样式 < !important
7.相同属性存在层叠，相同优先级后定义的可以覆盖先定义的
8.表格合并边框 border-collapse：collapse;
9.盒子设置text-align：center;会使文本，行内元素，行内块元素居中
10.后代选择器：（空格表示后代）
css继承性：后代元素优先继承离自己最近的祖先元素关于设置文本的属性
继承的权重为0
11.未访问状态：link
访问后状态：visited
移入状态：hover
按下状态：active
当同事存在四种状态时，需按顺序设置
12.当复合属性和单属性同时存在时，需先写复合属性，再写单属性
13.背景图平铺方式：background-repeat
—— repeat 垂直水平平铺
—— repeat-x 水平平铺
—— repeat-y 垂直平铺
—— no-repeat 不平铺
background（背景色,背景图,平铺方式,水平位置,垂直位置）
14.外边距合并：垂直排列的两个块元素,同时给上面的盒子设置向下的和给下面的盒子设置向上的外边距，此时会形成外边距合并，当两个值相同时，则为该值，当两值不同时，则为较大值
15.外边距塌陷：嵌套的两个块元素,给子元素设置上外边距，会造成外边距重叠，会将上外边距传递给父元素，此时父元素会跟着下来，形成外边距塌陷
16.强制换行：word-break:break-all (以字母换行)
强制不换行：white-space:nowrap
17.line-height 可以被继承
18.li里面嵌套a标签，如果整个li都可以被点击，则将a转换为块元素
19.行内元素横向布局的问题：行内元素设置宽高不起作用，是用来修饰文本的，沿基线对齐的，此时设置垂直方向的内外边距时，不起作用
20.浮动在设置内外边距时，对周围的元素没有影响
21. BFC：为元素开启一个独立的布局渲染空间
开启BFC的元素不会与脱离文档流的元素重叠
开启BFC: ①给父元素设置overflow属性
②给父元素设置浮动
③给父元素设置定位
22. clear的作用：清除浮动或关闭浮动，让浮动的元素占位置
.clearfix::after{
content:' ';
display:block;
clear:both;
}
23.网页中的logo通常使用<h1>嵌套
24.设置溢出内容显示省略号：
white-space：nowrap；
overflow：hidden；
text-overflow：ellipsis；
25.相对定位：并不是一个完全脱离文档流的状态，原本文档流的位置还是存在的，但是也是一个飘起的状态
绝对定位：是一个完全脱离文档流的状态，默认的起始位置是浏览器窗口的第一屏，可以定位到任何位置
子绝父相：父元素设置相对定位，子元素设置绝对定位
子绝父绝：起点参考位置会优先选择离自己最近的
26.层级：层级为正值时，压在文档流上，当层级为负值时，在文档流下面，当层级相同时，后写的标签在先写的标签的上面
标准流 < 浮动 < 绝对定位
27.隐藏属性 ①不占位隐藏： display：none；
②占位隐藏： visibility：hidden；
28.透明属性:①opcity 缺点是文字一起透明
②background：rgba();
29.auto可以使left、top值初始化
30.border-radius：左上，右上，右下，左下；
31.获取网站图标：favicon.ico
32.伪类 :nth-child() :nth-of-type()
odd 奇数 even 偶数
33.target伪类：获取目标状态，当a进行锚点跳转时，被跳转的元素就是target状态
34.box-sizing：content-box
border-box
35.box-shadow：水平偏移 垂直偏移 模糊度 模糊半径 颜色 内阴影(inset)
36.background-size：背景图的大小
- cover：沿着盒子最长边缩放，比例不变，元素撑满，有一部分图片会被裁掉
- contain：沿着盒子短边缩放，比例不变，将图片完整展示
37.background-clip：背景的范围
- border-box
- padding-box
- content-box
38.background-attachment：背景图是否根据元素移动
- fixed：背景图的起始参考点在浏览器串口的左上，固定在浏览器窗口，
当盒子移动到窗口位置时，可以看到图片
39.filter：过滤器
- blur(opx);模糊度
- grayscale;屏幕调灰使用
40.background-image：xxxdeg可以指定角度
- linear-gradient(color,color):线性渐变
- radial--gradient(color,color):径向渐变
41.过滤：
—— transition-property：执行过渡的属性
—— transition-duration：执行过渡的持续时间
—— transition-timing-function：过渡方式
—— transition-delay：延迟时间
transition：属性名，持续时间，方式，延迟。如果希望过渡是有来有去的，要讲过渡属性写在默认状态下
42.2D转换：
transform：
- translate（水平，垂直）：位移
类似于相对定位，可以利用位移进行盒子居中
-position：absolute；
left：50%；
top：50%；
tranform：translate（-50%，-50%）；
- rotate（）：旋转
- scale（）：缩放
43.perspective：1000px; 实现近大远小的效果，给父元素设置
44.transform-style：preserve-3d；开启3D空间效果属性，当父元素旋转时，希望看到子元素与父元素之间的3D效果，给父元素添加3D属性。
45.动画：@keyframes 关键帧 from{ } , to{ };
animation-timing-function:steps(步数);
steps();在每个关键帧区间的步数
animation：动画名称，动画方式，持续时间，延时，方向，次数；-infinite：无数次
46.响应式：根据设备的尺寸，进行自适应布局
媒体查询：
@media 关键字（条件）：多条件使用and连接，且必须有一个空格
47.横竖屏：orientation：landscape-横屏
portrait-竖屏
48.禁止多行文本框拖动：resize：none；
49.去掉用户选择表单时的光标：user-select：none；
50.弹性布局：父元素弹性布局，子元素弹性元素
父元素 display：flex；
主轴方向：flex-direction：row 横向
row-reverse 横向反向
column 竖向
column-reverse 竖向反向
主轴上弹性元素的位置分布：justify-content：flex-start 主轴开始
center 主轴居中
flex-end 主轴结束
space-around 空间分布到元素的两侧，中间是两侧的双倍 space-evenly 空间分布到元素的单侧，两侧有空间 space-between 空间均匀分布到元素之间，两侧没有
弹性元素是否换行：flex-wrap：nowrap；
wrap；
复合属性：flex-flow：方向，换行；
辅轴上弹性元素的位置分布:align-items:flex-start
center
flex-end
strech(默认值)当不设置宽高时，高是当前行高度
弹性元素在侧轴上的位置分布(必须配合flex-wrap：wrap；使用)：align-content:flex-start
flex-end
center
space-around
space-between
space-evenly
strech(默认值)
order：弹性元素的排列顺序
flex-grow：分配空白空间，按比例分配
flex-shrink：压缩弹性元素
51.移动端适配：1rem = html字号大小
100vw = 设计图宽
JS
1.进制表示 - 二进制：0b
- 八进制：0
- 十六进制：0x
2.科学计数法表示一个数：e是正次方，e-是负次方
3.使用typeof来检测一个变量的类型
4.parseInt( );其他数据类型转成数值类型，并提取整体，除数值与以数字开头的字符串，其余都转换为NaN
5.Number( ); 字符串 -> NaN
空格和空串 -> 0
true -> 1 ; false -> 0
null -> 0
undefined -> NaN
object -> NaN
6.除null之外的其他数据类型与undefined做比较时返回false
7.String( );将其他数据类型转换为字符串
8.Boolean( );将其他数据类型转成布尔值类型，除0，NaN,null,undefined,空串是false外，都是true
9.a++、++a：a的值会增加1，a++的值等于a自增前的值，++a的值等于a自增后的值
10.==会进行隐式类型转换，===不会进行隐式类型转换
11.逻辑运算：将数据类型转换为布尔值，再返回结果，同时存在&&和||时，先进行&&再进行||运算
12.三元运算符：条件判断语句？输出语句1：输出语句2；
13.switch(num){
case 1:
语句
break；
default - 相当于else
语句
break；
}
14.while变量声明和初始值写在外面
while(条件){增量}
do{语句}while(条件); -> 最少执行一次
15.向数组末尾添加元素 arr[arr.length] = ' ' ;
从尾部删除arr.length--
16.当使用构造函数的方法创建数组时，括号中只有一个数字时，指的是数组的长度
17.函数体运转时，遇到return会跳出函数体
18.当同时存在变量提升和函数声明提升时，先执行变量提升，后执行函数声明提升，则函数声明在前，变量在后
19.this指向：①构造函数中的this指向的是当前实例对象在堆内存的地址
②this指向方法的调用者
20.构造函数不需要return
21.对象只分为实例对象和函数对象
22.原型和原型对象：在实例对象中有__proto__属性叫隐式原型。在函数对象中有prototype属性叫显示原型。两个原型保存的是同一个对象的地址值，所以叫原型对象，隐式原型负责查看，显示原型负责查看和操作
23.构造函数调用时需要使用new关键字
24.instance of 判断对象是某个对象类型的实例
25.原型对象默认是Object的实例
26.call和apply方法都是改变this的指向
call的第一个参数是改变指向对象的地址，从第二个参数开始就是实参
apply的第一个参数是改变指向对象的地址，第二个参数是实参形成的数组
27.标准的js格式属性名使用字符串，在传输过程中json格式要用字符串传输
28.json.stringify(js对象)：将js对象转换为json字符串
29.json.parse(json字符串)：将json字符串转为js对象
30.for(var k in js对象)：可以遍历对象中的属性名 js对象[k]：获取属性值
31.Math.random( ); 随机获取0~1之间的随机数
Math.abs( ); 返回数的绝对值
Math.ceil( ); 对数向上取整
Math.floor( );对数进行下舍入
Math.pow(X,Y); 返回X的Y次幂
32.正则表达式：new RegExp( );
i - 是忽略大小写
| - 表示或的关系
[ ] - 表示或的关系
[a-z] - 表示从a到z的任意字母
[^] - 表示取反
量词：{n} - 表示n次
{n，m} - 表示n~m次
{n，} - 表示n次以上
\+ - 1次以上，相当于{1，}
* - 0次以上，相当于{0，}
？- 0~1次，相当于{0,1}
^ - 必须以……开头
$ - 表示结尾
^……$ - 绝对匹配
元字符：. - 包含所有字符
\ - 表示转义
\w - 包含所有字母、数字、下划线
\W - 相当于^\w
\d - 表示所有数字[0-9]
\D - [ ^0-9 ]
\s - 包含空格字符
\S - 空格字符之外的
\b - 包含边界，空格表示边界(独立单词)
\B - 不包含单词边界
Dom
1.事件三大要素：① 事件源 - 事件的承受方
② 事件的类型 - 事件源上触发的行为
③ 事件回调函数 - 最终的反馈
回调函数：你定义的，你没调用，最终执行了
2.当使用js操作，属性名称与属性值相同时，则转换为布尔值操作
3.setAttribute( );设置自定义属性。属性1：要设置的属性名；属性2：要设置的属性
getAttribute( );读取自定义属性。参数为要读取的属性名
4.innerHTML 会获取到标签
innerText 不会获取标签，只会获取到文本
5.queryselector('css选择器'); 如果有多个只返回第一个
queryselectorAll('css选择器'); 获取全部，返回集合
6.当想要一个表达式的布尔值结果时，去设置一个布尔值的时候，则可以使用该表达式赋值
7.有四种节点：元素节点，属性节点，文本节点，注释节点
元素节点：Nodetype：1 Nodename：‘全大写标签名’
8.children在高级浏览器中可以直接返回子元素集合
9.<html> <head> <body>可以直接访问，不用获取
10.添加兄弟元素 父元素.insertBefore(新增，原有) 第二个参数为null时，则等同于appendChild
父元素.appendChild(新增)
替换节点 replaceChild(新的，旧的)；
删除节点 removeChild( ); 父元素调用
remove( ); 谁调用谁删除
11.事件监听 addEventListener(①，②，③) 参数1：事件类型(不写on，字符串类型) 参数2:callback(回调函数) 参数3：是否为捕获事件流，默认为false
解绑 removeEventListener(①，②) 解绑时的参数必须与绑定时一致，如果需要解绑，则需要传入有名函数
12.低级浏览器：绑定：attachEvent(①，②) 参数1：事件类型(带on) 参数2：callback
解绑：detachEvent(①，②) 参数和绑定时一致
13.键盘的键码一般绑定在event上，在高级浏览器中，event会返回第一个形参，在低级浏览器中，会作为window上的event属性供我们使用，则需要做兼容：event = event || window.event
14.在高级浏览器上，event上有target属性，访问事件目标。在低级浏览器上，通过srcElement属性访问事件目标,需要做兼容：var target = event.target || event.srcElement
15.clientX,Y是鼠标相对于视口的坐标；pageX,Y是鼠标相对于页面的坐标；offsetX,Y是事件目标相对于自身位置的坐标
16.元素的offsetWidth和offsetHeight包括盒子的content+padding+border
clientWidth和clientHeight包括盒子的content+padding
offsetLeft和offsetTop是指盒子相对于开启了定位的父级的位置坐标
clientLeft和clientHeight是指盒子边框的宽高
17.事件的委派就是通过事件传播把要绑定给子元素的回调函数绑定给祖先元素，要想实现功能，就要对事件进行限制。stopPropagation这个方法就是用来阻止传递的
18.setTimeout(callback，延迟时间)；有一个返回值，可以通过定时器的返回值关闭定时器。clearTimeout(返回值)
19.setInterval(callback,间隔时间)；clearInterval(返回值)
20.scrollTop的单位为px，获取浏览器滚动条位置，大多数是用html获取，个别使用body获取，所以需要兼容：var scrolltop = document.documentElement.scrollTop + document.body.scrollTop
21.getBoundingClientRect( );为获取元素在视口中位置属性，都是相对于视口左边界和上边界
right：元素右边界到视口左边界的距离
bottom：元素下边界到视口上边界的距离
22.dom0级事件阻止默认行为，在回调函数末尾return false
dom2级事件需要调用event.preventDefault
低级浏览器以上两种方式都不能用，则需要开启全局捕获setCapture( );释放releaseCapture( );
23.overflow属性：如果单独设置在html或body上时，都是作用于document身上，如果同时设置，则html作用于document，body作用于body身上
24.滚轮事件：Chrome和IE中为mouseWheel，可以使用dom0或dom2。Firefox为DomMouseScroll,只能使用dom2
Chrome和IE中判断方向为wheelDelta，负值向下，正值向上
Firefox判断方向为detail，负值向上，正值向下
25.onmouseenter和onmouseleave没有事件的冒泡行为
JS 高级
1.原型继承：专门用来让子类继承父类的方法
①让子类的原型 = 父类的一个实例化对象 子类.prototype = new.父类( );
②修改构造器指向 子类.prototype.constructor = 子类；
2.所有构造函数都是new Function( )产生的，Function是new自己产生的
3.所有回调函数都是异步的
4.worker是一个构造函数，可以传一个函数，类型为字符串，内容为JS文件路径，用来模拟多线程
①创建实例化对象 var myworker = new Worker( );
②用实例化对象调用postMessage方法。myworker.postMessage( )
③子线程有一个关键字self代表子线程本身，想要在子线程获取主线程传递过来的数据，需要绑定一个onMessage事件
在子线程中：self.onMessage = function (event){
var result = fn(event.data);
最后将子线程计算好的数据回传给主线程
self.postMessage(result);
}
主线程：myworker.onMessage = function (event){
console.log(event.data)
}
JQuery
1.html( ); 读只能读第一个，写是写全部
2.添加元素：子元素.appendTo 父元素
父元素.append 子元素
3.访问JQuery对象数组长度 size( );
4.访问某个索引 [i]：得到的是dom对象
eq(i)：得到的是JQuery对象
5.遍历JQuery对象数组 each( );需要传入一个回调函数，形参1：索引；形参2：元素
6. :contains( );内容选择器，包含即可，参数不为字符串
7. :hidden 查找隐藏的元素
8. .show( ) 使隐藏元素显示
9.操作任意属性 attr( ); 非布尔值
removeAttr ( ); 删除属性
prop( ); 布尔值类型
10.操作class属性 addClass( );
removeClass( );
11.操作HTML代码/文本/值 html( );
val( );
12.过滤掉一些元素 first( );
last( );
eq( );
filter(selector);
not(selector);
has(selector);
13.匹配查找孩子/父母/兄弟 children( );子标签
find( );后代标签
parent( );父标签
prevALL( );前面所有兄弟
nextAll( );后面所有兄弟
siblings( );前后所有兄弟
14.在匹配元素最后添加元素 append( );
appendTo( );
15.在匹配元素最前面添加元素 prepend( );
prependTo( );
16.用指定内容替换所有匹配标签 replacewith( );
17.删除元素 remove( );
empty( );是指清空元素
Less
1.@变量名：值；相当于JS中的全局变量
2.less变量延迟加载，也就是当前区域的代码全部执行完毕，才加载变量
3.JavaScript:void(0) 禁止超链接跳转
4.设置状态伪类时，使用&代表当前元素
5.如果数值型运算都有单位，则以第一个为准
6.不输出的mixins要在选择器后面加( )
7.less混合器一旦有形参定义，调用混合器时一定要给出实参，且数量需要一一对应，如果有时不需要时，形参需要赋予默认值。变量：默认值 添加函数默认值：放在函数参数列表最后
8.less文件中引入别的less的文件 @import '路径'
9.使用&代表前边所有的父级，常用于伪类，伪元素
10.匹配模式：公共区域 .s1(@_){}
11.守卫： ；表示或者
and 表示与
not 表示取反
Sass
1.文件名后缀为scss
2.声明变量使用$
3.声明混合器使用 @mixin + 名称
4.使用混合器 @include
Bootstrap
1.生产环境指上线环境
2.开发环境指工作环境
3.img占位符 src = ‘holder.JS/150x150？bg=#f00’ 必须使用十六进制
Git
1.①电脑任何一个目录下的环境都叫工作区
②从工作区转到暂存区
③本地仓库
④远程仓库
2.git config --global user.name 配置
git config -l 查看配置列表
3.配置工作区，在空文件夹中右键 git bash here
git init 仓库初始化，有master表示配置成功
工作区在 .git以外的所有环境，不包含.git目录，因为.git包含暂存区以及本地仓库
4.touch 文件名 创建文件
git ls-files 查看暂存区文件目录
git add 文件名 在暂存区添加
-A 表示all
git commit -m ‘信息’ 提交至本地仓库，暂存区有变化才可以使用
5.文件名后有：A已经添加到了暂存区
U还没添加到暂存区，还在工作区，未跟踪状态
M文件修改了，待提交到本地仓库
6.git log 查看提交过的日志 git log --oneline 精简版
7.历史回滚 git reset --hard 版本号
8.git rm --cache 删除暂存区中的文件
9.创建文件夹 mkdir 文件名
10.cd 进入文件夹
cd .. 退出文件夹
11.git status
红色：工作在工作区，待提交到暂存区
绿色：状态在暂存区，待提交到本地仓库
白色：工作树是干净的，没有任何东西可以提交了
红+红：工作区中的文件有过修改，要么提交到暂存区进行更新，要么把刚才更新内容的操作回退
红+绿：绿：从暂存区退回到工作区
12.删除子分支必须在主分支上操作
13.创建子分支 git branch name
切换分支 git checkout name
删除分支 git branch -D name
14.往gitee库中推送
git remote add 别名 gitee地址
git push -u 别名 分支名
15.复制库中的文件 git clone
ES6
1.严格模式 'use strict'
2.在严格模式下变量的声明一定要有变量声明标识符
3.函数内部的this不允许指向window
4.eval方法没有返回值，eval是一个作用域函数
5.严格模式下对象不允许有重复属性，函数不允许有重复形参
6.create方法下设置和获取属性使用set，get，自动设置和获取，不需要调用，value和writable与set和get属性值有冲突
7.defineproperty只能设置一个属性，属性名为字符串,defineproperties可以设置多个属性，
create、defineproperty、defineproperties中有三个属性值：- writable:设置修改的权限
- configurable:设置可以删除的属性
- enumerable:设置可以遍历的属性
8.Object.create()可以帮我们生成一个对象，通过传参，可以将生成的对象的原型指向第一个参数;
9.使用bind方法修改this指向，不会立即执行。fn.bind( )(形参)；
10.let不能重复声明变量，在块级作用域中，不存在变量提升
11.const声明常量必须有初始值，常量一般为全大写
12.数组的解构 let [变量1，变量2...] = arr；
13.对象的解构 变量要与属性名一致
14.模板字符串：声明` ` ,替换数值使用${ }
15.箭头函数的this是静止的，没有自己的this指向，而是继承父作用域的this
16.箭头函数不能创建构造函数，不能使用arguments
17.箭头函数只有一个形参时，可以不写（）,如果只有一条语句，可以省略{ }
18.使用rest参数代替arguments，一般使用args，rest参数前面需要加上... ,不添加则为普通形参，形参和实参一一对应，剩下的归args所有
19. ...扩展运算符，可以把数组展开以逗号间隔
20.symbol的值是唯一的，symbol值不能与任意数据类型进行计算
21.给对象添加symbol唯一标识符，则使用 [属性名]
22.ES6中提供了一种新的迭代循环：for of，只要数据结构中有iterator就可以使用
23.常见的包含了symbol.iterator：①数组(Array)
②集合(NodeList、HTMLCollection)
③实参集合列表对象(Arguments)
④字符串对象(String)
⑤集合(Set、Map)
24.arr [Symbol.iterator] ( ).next( ); 默认有两个元素，value：表示数组中的元素值；done：表示是否迭代完毕，false表示未完成，true表示迭代完毕
25.for of循环可以直接获取数组的元素，想要获取下标则要借助数组原型上的entries方法：for(let [index,item] of arr.entries())
26.Set集合可以自动进行数组去重，再利用扩展运算符转换为数组
27.给Set集合：添加元素 add( ) 删除元素 delete( ) 是否包含元素 has( ) 清空集合 clear( )
28.Map集合传入的是二维数组，方法同Set，获取属性 get( ); 设置属性 set( );
29.在类中要想给所有实例化对象添加一些初始值属性，就要借助于构造器，每一个类中只能有一个构造器
Class 类名{
constructor(形参){给实例化对象添加属性
};
call( ){在原型身上加的方法，由实例化对象进行调用
}
static 属性 该属性加在函数对象上,则只有函数对象可以调用，实例化对象无法调用
}
30.继承使用extends关键字 Class 子类 extends 父类{
constructor(同super形参){
super(父类的形参);用来继承父类的初始化属性，在构造器的绝对第一行！相当于复制父类的构造器
}
}
31.构造器在类中不是必须要存在的，作用是给构造函数添加属性
32.浅拷贝：复制原来的对象，不管修改新对象还是旧对象的属性值都会改变另一个对象的属性值，因为浅拷贝复制的是对方的内存地址，所以新老对象共用一个内存
33.深拷贝：复制原来的对象，不管修改新对象还是旧对象的属性值都不会对另一个对象产生影响
34.Number.isNaN( );判断是不是NaN
Number.isFinite( );判断是不是有限数
Math.trunc( );舍掉数字后的小数
35.Object.assign({}, obj1);合并数组，将后面的对象向前面的对象合并
Node
1.直接创建buffer：let 变量名 = Buffer.alloc(数字)；
不安全创建Buffer let 变量名 = Buffer.allocUnsafe(数字)；
2.Buffer.from( )；可以将字符串转化为buffer
3.文件写入方式：①异步写入：writeFile('文件路径'，'文件写入的内容'，回调函数)，回调函数有一个默认的参数error，当向磁盘目录中写入文件时，发生错误，参数表示一个错误对象，否则为null
②同步写入：writeFileSync('文件路径'，'写入的内容')
③流式写入：createWriteStream('文件路径')，再通过write( )方法写入内容，再通过close( )方法关闭写入流
4.文件读取方式：①readFile('文件路径'，'回调函数')；回调函数有两个参数(error，data),data用来查看读取的内容，返回的是buffer对象
②readFileSync('文件路径')
③const rs = createReadStream('文件路径')，rs.on('data',回调函数)；回调函数有一个参数chunk，返回的是buffer
5.复制文件通过pipe方法，rs.pipe(ws);
6.文件移动和文件重命名：通过rename方法，如果第二个参数为文件名称，则为重命名，如果为路径，则为文件的移动。rename('文件旧路径'，'文件新路径'，回调函数)；回调函数的参数为error
7.文件的删除：通过unlink方法，第一个参数为文件名，第二位回调函数，参数为error
8.文件夹的操作：文件夹创建fs.mkdir('创建的路径'，'回调函数');文件夹读取fs.readdir('文件路径',回调函数)；文件夹删除fs.rmdir('文件路径'，'回调函数')
9.__dirname:表示当前文件所在文件夹的绝对路径
HTTP
1.请求类型：get(主要用于获取数据) post(主要用于表单提交) put delete
2.？后面是查询字符串
3.createServer方法有个回调函数，回调函数有两个参数，request和response
4.当响应内容为乱码现象时，则需要设置响应头，
response.writeHead(200,{'content-type':'text/html;charset=utf-8'});
response.setHeader('content-type','text/html;charset=utf-8');
5.url.parse(request.url,true);可以将请求路径中的信息返回一个对象，再通过query进行查找
Npm
1.module.exports 函数暴露
Express
1.中间件：MiddleWare是一个函数，它可以访问请求对象(request)，响应对象(response)和web应用中处于请求-响应循环流程中的中间件，一般被命名为next的变量，中间件定义中必须有next( );
本地存储
分为localStorage、sessionStorage、cookie、indexDB
Cookie:存储在浏览器所在计算机中的文本
1.不同浏览器中的cookie是不共享的
2.向服务器发送请求时,会自动携带当前域名下的cookie,传递给服务器,服务器在返回结果时设置在cookie在客户端浏览器中保存,cookie保存的数据不能超过4k,最多只能保存50个cookie
3.状态保持(校验用户身份)
当登录的时候,后端给返回一个cookie存到浏览器当中,在次发请求的时候请求头会自动携带这个cookie
用来校验用户身份做状态保持的,为什么需要做状态保持? 因为HTTP请求是无状态请求
4.可以存储数据 - 通过 document.cookie 来保存和读取数据,存储4K左右的数据,每个域名下只能存储50个cookie,可以设置过期时间
Session:服务器端的技术
1.session默认是依赖于cookie的
2.session存在于服务器端,但是通过cookie传递ID,保存的数据数据理论上没有任何限制
3.因为cookie不安全,所以诞生了session
4.工作原理:当登录的时候,后端校验用户成功之后,会在服务器生成一个session ID,通过响应头设置cookie,把这个sessionID带回浏览器,当再次发送请求的时候,携带着这个cookie(存的是sessionID)发送到服务器,服务器接收到请求之后,拿着这个sessionID 去 session这个容器中对比,可以识别出你的身份,session相当于是给cookie做了一个补充
Token(令牌)
1.工作原理:当登录的时候,后端校验完用户名密码之后,会生成一个token,通过加密算法生成的,例如 base64 SHA256 等一些列加密方式,生成之后返回给前端,当再次发送请求的时候,请求头携带token到服务器,服务器解密token之后就可以知道你是谁
2.token与session的区别:
<1>token是允许跨域的,session不允许跨域
<2>token不需要再服务器创建容器,直接拿着令牌进行解密即可
session在服务器要创建容器的,服务器有可能是集群,集群需要涉及到这个session容器内容的信息同步问题
JWT Token(token升级版)
1.由三部分组成:头部(header)、有效载荷(payload)、签名(signature) -> xxxxxxxxx.xxxxxxxxxx.xxxxxxxxx
2.主要是用来做多点登录的(PC、pad、phone同时登录就叫多点登录)
MongoDB
1.连接数据库:mongoose.connect('mongodb://127.0.0.1/数据库名')
2.连接集合:mongoose.connection.on('open',()=>{
let userSchema = new mongoose.Schema({
})
let usermodel = mongoose.model('集合名',userSchema,'集合名')
})
Ajax：关键词搜索,用户名的唯一性验证,新闻的异步加载
1.使用jquery方式发送ajax（get、post）请求，有四个参数，参数1：请求地址；参数2：要请求的数据；参数三：回调函数，回调函数包含两个参数error和data，data是响应体数据；参数四：响应回来的数据类型
2.readyState:是xhr对象的一个属性,属性值为0,1,2,3,4
0:表示xhr对象的建立初始化
1:表示调用了open,完成了打开请求
2:表示调用了send,完成了发送请求
3:表示正在返回数据中
4:所有的数据完全响应完毕
3.通过CORS方式解决跨域问题
response.setHeader('Access-Control-Allow-Origin','*')
response.setHeader('Access-Control-Allow-Header','*')
4.取消ajax请求使用abort();
5.通过占位符发送的请求,可以通过request.params获得,通过请求字符串发送的请求,可以通过request.query获得
6.原生ajax
// 创建XMLHttpRequest的实例对象
var xhr = new XMLHttpRequest();
// 设置请求信息
xhr.open(method, url);
// 发送请求
xhr.send();
// 接收响应体
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
if(xhr.status == 200) {
console.log(xhr.responseText);//表示响应体的结果
console.log(xhr.status); //输出响应状态码
console.log(xhr.statusText); //响应状态字符串
console.log(xhr.getAllResponseHeaders());//获取响应头
}
}
}
Promise
1.then方法
返回值一定是一个promise对象: 1.返回一个非promise对象,是一个成功的promise,结果值就是return的值
2.throw xxx ,是一个失败的promise,结果值就是xxx
3.返回一个promise对象: 你成功我成功，你成功的结果就是我成功的结果,你失败我也失败，你失败的结果也是我失败的结果
2.async函数
async函数返回值都是一个promise对象,
函数返回值:1.非promise async函数的结果是一个成功的promise,return的值就是promise的结果值
2.promise对象 async函数的结果由return的promise的状态决定,保持一致
3.throw async函数的结果是一个失败的promise,promise的结果值就是throw的值
await相当于then
await 非promise值,则表达式整体的结果值就是非promise值
await promise对象,如果是成功的promise,则可以获取成功的结果值,如果是失败的promise,则会报错,可以在try,catch中捕获
await下面的代码都是异步的
1.自定义Promise
/**
* @param {*} executor 构造器函数
*/
function Promise(executor) {
this.PromiseState = 'pending';
this.PromiseResult = undefined;
this.callbacks = [];
let resolve = (value) => {
if (this.PromiseState !== 'pending') return;
this.PromiseState = 'fulfilled';
this.PromiseResult = value;
if (this.callbacks.length) {
this.callbacks.forEach(item => {
item.success();
})
}
}
let reject = (reason) => {
if (this.PromiseState !== 'pending') return;
this.PromiseState = 'rejected';
this.PromiseResult = reason;
if (this.callbacks.length) {
this.callbacks.forEach(item => {
item.fail();
})
}
}
try {
executor(resolve, reject);
} catch (e) {
reject(e)
}
}
/**
* @param {*} onResolve :成功的回调
* @param {*} onReject :失败的回调
*/
Promise.prototype.then = function (onResolve, onReject) {
if (typeof onResolve !== 'function') {
onResolve = v => v
}
if (typeof onReject !== 'function') {
onReject = r => new Promise((resolve, reject) => {
reject(r)
})
}
return new Promise((resolve, reject) => {
let changeState = (stateFn) => {
setTimeout(() => {
let rs = stateFn(this.PromiseResult);
if (rs instanceof Promise) {
//当函数只有一个形参时，调用的时候可以不传参，默认使用形参
rs.then(resolve, reject);
} else {
resolve(rs);
}
})
}
if (this.PromiseState === 'fulfilled') {
changeState(onResolve);
}
if (this.PromiseState === 'rejected') {
changeState(onReject);
}
//此处只知道Promise的状态为pending，但是因为异步原因无法判断接下来要变为resolve还是reject，所以先将要执行的回调执行结果存入一个回调函数中，因为没法二次进入判断，所以p的状态一确定就可以立即返回then方法的结果。
if (this.PromiseState === 'pending') {
this.callbacks.push({
success: () => {
changeState(onResolve);
},
fail: () => {
changeState(onReject);
}
})
}
})
}
Promise.prototype.catch = function (onReject) {
return this.then(null, onReject);
}
// 成功的promise
Promise.resolve = function (params) {
return new Promise((resolve, reject) => {
if (params instanceof Promise) {
params.then(resolve, reject)
} else {
resolve(params)
}
})
}
// 失败的promise
Promise.reject = function (params) {
return new Promise((resolve, reject) => {
reject(params);
})
}
// 只要有失败的promise就是失败的
Promise.all = function (promiseArr) {
let resultArr = [promiseArr.length];
let count = 0;
return new Promise((resolve, reject) => {
promiseArr.forEach((item, index) => {
item.then(value => {
resultArr[index] = value;
count++;
if (count === promiseArr.length) {
resolve(resultArr);
}
}, reason => {
reject(reason);
})
})
})
}
// 竞速
Promise.race = function (promiseArr) {
return new Promise((resolve, reject) => {
promiseArr.forEach(item => {
item.then(value => {
resolve(value)
}, reason => {
reject(reason)
})
})
})
}
Axios
1.axios(params):函数形式
axios({}) 配置对象形式
axios('/server') 直接写url
2.axios.get() axios.post()
axios.get(url, config)
axios.post(url, data, config)
query参数可以写在config里面
3.配置对象配置项
method 请求类型
url URL
baseUrl URL的基础结构
params 设置query参数
headers 设置请求头
data 设置请求体
timeout 设置超时时间
4.拦截器
请求拦截器
axios.interceptors.request.use(config => {
<!-- token携带在请求头中 -->
config.headers.token = token
return config
}, err => {})
响应拦截器
axios.interceptors.response.use(response => {
return response
}, error => {
<!-- 失败的统一处理 -->
return Promise.reject(error)
})
React 基础
1.特点:①声明式编码②组件化编码③引入了jsx语法,编写高效④内置diff算法,运行高效⑤复用性高
2.只能有一个根标签
3.识别jsx语法需要在script标签上加 type="text/babel"
4.null,undefined,true,false,空对象在jsx中无法渲染
5.条件渲染可以通过if,else / 三元表达式 / 逻辑与&&
6.列表渲染通过map方法遍历数组,必须要给列表项添加一个唯一的key属性,推荐使用id作为key,尽量不要使用index作为key
7.使用jsx语法时,需要传入一个函数作为事件处理函数
8.获取事件源要使用e.target,this指向undefined。阻止默认行为不能使用return false,要使用e.preventDefault()
9.原生js的input的onchange事件是在失焦时触发,jsx中是发生改变时触发
10.组件从概念上类似于JavaScript函数,他接受参数(即"props"),内部可以有自己的数据(即"state"),并返回用于描述页面展示的React元素.
11.脚手架开发的特点:①更安全 ②更方便 ③更高效
12.创建脚手架命令: npm i create-react-app -g
创建项目 create-react-app project
Vue2 基础
1.Vue的优点:页面变化的时候操作虚拟DOM, 更新页面使用的是 fragment(文档碎片:理解成一个容器)
2.methods 和 computed 区别
<1> methods 需要调用 computed不需要
<2> 计算属性会把结果缓存在内存中,只要依赖的数据不发生变化,就不会重新计算
3.computed 和 watch 的区别
<1>
computed 是计算属性,计算出来是一个属性,这个属性是自身不存在,然后计算得出得
watch 是监视,对已存在数据的监视
<2>
computed 中不能存在异步,因为计算属性的值依赖return
watch 中是可以存在异步的,监视到行为之后,可以延时出处理,执行操作
4.v-if和v-show
v-if 条件不成立的时候,直接在DOM中不渲染
v-show 隐藏和显示是通过 css 的 display 属性来控制的
适用场景:
当需要频繁的去切换显示隐藏的地方我们用 v-show
不频繁的时候适用v-if
5.class有三种写法:字符串形式,数组形式,对象形式
6.style有两种写法:字符串形式,对象形式
7.事件绑定传参:
当@click绑定事件的时候,不书写小括号的时候,直接就是把这个函数传到的底层
书写小括号的时候,底层给你传的内容包裹了一层,包裹的这层函数的return的值才是真正传到底层上的值,只要加小括号,底层上就包裹一层
可以理解为
不加小括号的时候,函数是vue底层帮我们调用的,加小括号是函数名加小括号,是我们自己调用,当传入的内容加小括号,且加了this
@click="this.testHandler($event, 自定义参数)",此时这里的this指向window,非严格模式下指向window,严格模式下指向undefined
8.修饰符
.stop 修饰符 阻止事件冒泡
.prevent 修饰符 阻止默认行为
.capture 默认事件是冒泡的,加.capture修饰符,事件变为捕获触发
.self 阻止事件冒泡的,它里面套了好几层随便冒泡,但是到它自己这一层不再冒泡
.once 事件只触发一次
.passive 用在滚轮事件上
当滚轮滚动的时候,会触发一个事件,如果在这个回调中有非常耗时的操作
例如说: 循环打印10万次'i love you',此时等待这个耗时的操作执行完毕之后,才能页面滚动(这是正常的)
当加了.passive之后,先去滚了页面,在执行这个回调操作
.enter 键盘事件回车修饰符
9.过渡和动画:唯一区别就是在类名中把transition换成animation,并且animation有关键帧
过渡步骤:
1. 将要过渡的元素放到 transition 标签中 (这个标签是vue提供的)
2. 书写类名
v-enter 进入前 v-leave 结束前
v-enter-to 进入后 v-leave-to 结束后
v-enter-active 过程中 v-leave-active 过程中
3. 如果页面中过多个过渡的元素,给 transition 标签添加 name 属性
类名v-开头 变成 transition的name属性值开头-
动画属性:
animation-name 指定要绑定到选择器的关键帧的名称
animation-duration 动画指定需要多少秒或毫秒完成
animation-timing-function 设置动画将如何完成一个周期,完成动画的速率曲线 - ease 先快后慢 linear 匀速直线
animation-delay 设置动画在启动前的延迟间隔
animation-iteration-count 定义动画的播放次数 - infinite 无限次
animation-direction 指定是否应该轮流反向播放动画 - reverse 反向
animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state 指定动画是否正在运行或已暂停 running - 运行中 paused - 暂停
10.生命周期钩子函数:创建前、创建后、挂载前、挂在后、更新前、更新后、销毁前、销毁后
beforeCreate,created: 创建前后指的不是实例的创建 创建前,获取不到数据 创建后,可以获取到数据
beforeMount,mounted: 挂载前后指的是DOM的挂载 挂载前,获取不到DOM元素 挂载后,可以获取到DOM元素
注意: mounted 钩子非常常用,一般我们会把网络请求放到 mounted 中
beforeUpdate,updated: 更新前后,不是数据的更新前和更新后,只有数据已经变化完之后才能出触发 beforeUpdate 和 updated
更新前和更新后指的是DOM更新
beforeDestroy,destroyed:销毁前和销毁后,并不是销毁了实例,而是把实例和DOM之间的关系斩断了
11.自定义过滤器:
全局注册:Vue.filter('自定义过滤器名',(arg)=>{过滤规则}) --> arg可以获取到管道符前面的数据
局部注册:filter:{ 自定义过滤器名(arg){过滤规则} }
12.自定义指令:
全局注册:Vue.directive('指令名',(el,binding)=>{}) --> el是放置了自定义指令的DOM元素,binding是关于指令的对象
13.自定义插件:
定义插件:本质上就是给插件暴露一个install方法
使用插件:本质上就是调用插件的install方法
14.自定义组件:
定义组件:const VueComponent = Vue.extend({配置对象})
注册组件:Vue.component('自定义组件名',VueComponent)
使用组件:在页面使用组件标签
15.数据代理：将配置项中的data的数据代理到vm实例上
16.数据劫持：在给vm实例获取值、设置值的时候可以拦截到(本质上是给data中的数据设置和获取值)
目的就是为了在获取数据、修改数据的时候，拦截到这个过程进行页面的更新
Vue2 脚手架
1.脚手架命令:
npm i -g @vue/cli
vue create project
2.public 和 assets 都是静态资源,assets会被webpack处理,public不会被webpack处理
3.关闭ESLint校验
①. eslint-disable no-unused-vars
②. package.json 中 配置 esLint 规则
③. vue.config.js 中 配置
lintOnSave: false
关闭校验
4.父子组件间传参
<1> props:在子组件标签上通过v-bind绑定,有三种方式
(1)数组形式 props:['abc']
(2)对象形式 props:{ abc:String }
(3)配置对象形式 props:{ required:true , type:String , default:如果是引用数据类型,则default需要写成函数形式,return一个对象 }
<2> 自定义事件:
系统事件
事件类型 - 有限个数 click mouseenter ...
触发机制 - 浏览器触发的,触发之后会给一个事件对象,$event 就是事件对象
自定义事件
事件类型 - 无限个数
触发机制 - 自己使用 `$emit` 触发 , 参数自己给 , 自定义事件的 $event 是传递过来的参数 , 自定义事件没有事件对象 , 且只能传递一个参数
<3> v-model:父子组件数据同步
通过:value 以及自定义事件 @input实现底层逻辑,子组件的props接参必须使用`value`,触发自定义事件的事件类型必须是`input`,再使用v-model绑定数据,实现数据同步
<4> .sync:父子组件数据同步
用过v-bind绑定数据,再通过`@update:数据名`传递数据,子组件通过props接收数据,通过$emit触发@update:数据名,实现底层逻辑,父组件中使用:数据名.sync的形式实现父子组件数据同步
<5> $attrs: 可以获取到绑定在组件上的所有属性,除去props接收的属性、style、class类名
使用时通过v-bind="$attrs"直接将这个对象绑定在组件上
注意：v-bind不能简写
$listeners: 可以接收到绑定在组件的所有事件
在使用的时候使用v-on="$listeners"直接将这个对象绑定在组件上即可
注意:v-on不能简写
<6> $refs: 可以拿到所有绑定ref属性的组件,拿到组件就可以拿到组件的数据
$children: 可以获取当前组件的所有子组件,得到一个数组
$parent: 可以获取当前组件的直接父组件,只要获取到组件实例,就可以修改数据
注意:$parent不建议使用,因为当前组件可以有多个父组件
<7> mixin:混入
暴露一个对象,vue对象可以配置什么,mixin就可以配置什么,
使用: mixins:[引入mixin的名称]
如果在组件中有重复的内容,组件中的内容会覆盖mixin的内容
注意:钩子函数不会发生覆盖,mixin的钩子函数在组件之前执行
<8> provide/inject：祖先组件和后代组件的通信
provide可以理解成广播,广播只能广播一次,且后代组件接收不到更新的数据(除了引用数据类型的属性)
inject接收数据,类似props
<9> slot:插槽 -> 父子组件之间的传参:传递html、css
普通插槽: v-slot:fefault
具名插槽: v-slot:name值
作用域插槽: v-slot:name值="{ 子组件绑定的数据 }"
5.事件绑定与解绑
$on - 获取到组件实例，绑定事件，留下回调
注意: $on 可以对相同的事件类型进行多次绑定
$off - 解绑事件
$off() - 当前组件实例上的事件全部解绑
$off('事件类型') - 解绑某一个事件类型
$off('事件类型', 回调) - 解绑某一个事件的某一个回调
$once绑定的事件只能触发一次，触发一次之后自动解绑
6.组件实例 vc 和 vue 实例 vm 之间的关系
VueComponet.prototype = Object.create(Vue.prototype)
7.$bus:跨组件通信
<1> 安装总线
new Vue({
beforeCreate() {
Vue.prototype.$bus = this;
}
})
<2> 接收数据
this.$bus.$on('事件类型', 回调)
<3> 发送数据
this.$bus.$emit('事件类型', 参数)
8.PubSub:跨组件通信
<1> 安装
npm i pubsub-js -S
<2> 接收数据
import PubSub from 'pubsub-js'
PubSub.subscribe('消息类型', 回调)
<3> 发送数据
import PubSub from 'pubsub-js'
PubSub.publish('消息类型', 参数)
> 注意: pubsub 在回调当中第一个参数永远是消息类型，从第二个参数开始才是真实传递的参数
9.vuex
组件调用actions
this.$store.dispatch('actions')
辅助函数
<1>普通
mapState 和 mapGetters 映射的内容映射在 computed 当中
mutaions 和 actions 映射的内容映射在 methods 当中
<2>模块化
mapState映射会多一层模块化名称,其余的不变
<3>命名空间：在模块化的配置中添加namespaced:true属性
(1) ...mapState({xxx:state=>state.空间名.xxx})
...mapGetters(['空间名/xxx']) --> ...mapGetters('空间名', ['xxx'])
...mapActions(['空间名/xxx']) --> ...mapGetters('空间名', ['xxx'])
(2)使用createNamespacedHelpers辅助函数
import { createNamespacedHelpers } from 'vuex'
const { mapState, mapActions, mapGetters } = createNamespacedHelpers('空间名')
...mapState({ xxx:state=>state.xxx })
...mapGetters(['xxx'])
...mapActions(['xxx'])
10.导航守卫
<1>.全局前置守卫:当一个导航触发时，全局前置守卫按照创建顺序调用
const router = new VueRouter({ ... })
router.beforeEach((to,from,next)=>{
from - 当前导航正要离开的路由
to - 即将要进入的路由对象
next() - 放行
next(false) - 不放行
next('/') - 相当于重定向
next({ path: '/' }) - 相当于重定向
})
<2>.全局解析守卫
router.beforeResolve()
和 router.beforeEach类似,区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用
<3>.全局后置钩子:函数本身不会改变导航
router.afterEach((to,from)=>{
...
})
<4>.路由独享的守卫:在路由配置上直接定义beforeEnter守卫
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
...
}
}
]
})
<5>.组件内的守卫
beforeRouteEnter(to, from, next) {
不能获取组件实例 this
因为当守卫执行前，组件实例还没被创建
},
beforeRouteUpdate(to, from, next) {
可以访问组件实例 this
},
beforeRouteLeave(to, from, next) {
导航离开该组件的对应路由时调用
可以访问组件实例 this
}
<6>.完整的导航解析流程
导航被触发。
在失活的组件里调用 beforeRouteLeave 守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。
11.vm.$nextTick(()=>{}) -> 等待DOM更新
12.vm.$forceUpdate() -> 强制刷新
13.$set(目标对象,属性名,属性值) -> 添加响应式属性
Vue3 基础
1.创建 vue3 vite 项目命令: npm init vue@latest
2.setup:是一个钩子,最早执行,只执行一次,代替了原来的beforeCreate和created
在setup中获取不到this,在页面中用到的数据及方法都要放在return中
3.ref:经过ref包裹之后的数据会变成响应式数据
修改ref数据的时候,需要.value修改
4.原对象修改的时候拦截不到设置值和获取值,代理对象在设置值和获取值的时候可以拦截到更新页面,修改代理对象本质上还是在修改原对象
5.ref和reactive的区别
不同点:
1.ref可以用于基本数据类型,reactive不能用于基本数据类型
2.对于引用数据类型来说,ref.value就是reactive包裹之后的代理对象,相当于ref包裹对象的时候,将对象交给reactive包裹
3. 在js中使用的时候,ref需要.value使用,reactive直接.属性即可
4. ref对象.value属性改变的时候可以监测到,持有reactive对象的变量,修改地址之后,检测不到
相同点:
1.都可以把引用数据类型变成响应式
2.在模板中使用的时候,都是直接使用
6.watch:
1.监听ref对象监听的是ref对象的value属性,value属性的地址值不发生变化监听不到,直接监听value属性时,地址变化监听不到,只能监听到属性的变化
2.监听多个属性:可以写成数组形式,和函数返回值形式,还可以使用watchEffect,watchEffect只能执行一次异步操作
7.ref:获取绑定ref的组件或者DOM元素,获取时的属性名需与绑定的ref名称一致
8.toRefs:使reactive对象的属性变为响应式
9.组件通信
<1>props:父子组件的通信
通过definProps接收
<2>customEvent:父子组件的通信
通过definEmits接收
组件可以绑定原生事件,默认绑定在根标签上,通过emit接收过后,变为自定义事件,vue3中.native修饰符被移除了
<3>pubsub:代替$bus,通vue2
<4>v-model:父子组件的数据同步
底层通过:modelValue绑定数据,@update:modelValue实现数据同步
<5>attrs:
可以接收绑定在组件上除props接收过的数据和emit接收过的事件外的数据和事件
<6>ref:
获取组件,如果要拿到组件的数据,组件需要通过definExpose
模板事件绑定$parent,函数参数设为parent可以获取到父组件
<7>provide-inject:祖孙组件通信
provide('消息类型',接收数据)
孙组件通过inject函数返回值发送数据
<8>slot:同vue2
<9>pinia
1.npm i pinia
2.import { createPinia } from 'pinia'
3.export default createPinia()
模块化
import { definStore } from 'pinia'
const useStore = definStore({
id:模块名
state(){},
actions:{}
getters:{}
})
export default useStore
10.路由
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory();
routes: [],
srocllBehavior() {
return { top:0, left:0 }
}
})
11.scoped
不加scoped的样式是用于全局的
加scoped会将样式限制在当前组件和子组件的根标签上 -> 当加了scoped,当前组件的标签和子组件的根标签上加了一个自定义属性: data-v-06e9b7ae,06e9b7ae是一个hash值,目的是为了保证属性值的唯一 ,通过属性选择器添加样式,只有有改属性的元素会采用该样式
如果不想设置全局样式,且需要限制在当前组件,需要使用深度作用选择器
深度选择器:
1.css
>>>
.box >>> .wrapper {}
>>> .wrapper {}
2.less
/deep/
.box /deep/ .wrapper {}
/deep/ .wrapper {}
3.less 和 scss 都可以使用
::v-deep()
.box ::v-deep(.wrapper) {}
::v-deep(.wrapper) {}
vue2和vue3差异:
vue2中 -> ::v-deep .wrapper {}
vue3中 -> ::v-deep(.wrapper) {}
数组方法
1.push 功能 往数组末尾处添加成员
参数 不限个数
返回值 返回数组的长度,修改了原数组
2.pop 功能 数组末尾删除一个成员
参数 没有参数
返回值 删除的成员,修改了原数组
3.unshift 功能 数组的开头添加成员
参数 不限个数
返回值 返回数组的长度,修改了原数组
4.shift 功能 数组的开头删除一个成员
参数 没有参数
返回值 删除的成员,修改了原数组
5.splice splice这个方法能实现添加、删除、修改数组的功能
arr = [22, 54, 86, 73, 85, 4, 9, 7];
①删除
从下标为2的位置开始删除,删除至数组末尾,返回删除成员组成的数组,修改了原数组
arr.splice(2)
从下标为2的位置开始删除,删除3个成员,返回删除成员组成的数组,修改了原数组
arr.splice(2, 3)
②新增
从下标为2的位置开始删除0个成员,插入一个成员25
返回删除成员组成的数组(删除0个成员就是空数组),修改了原数组
arr.splice(2, 0, 25)
arr.splice(2, 0, 25, 47)
③修改
从下标为2的位置删除3成员,插入25和47两个成员,,返回删除成员组成的数组,修改了原数组
arr.splice(2, 3, 25, 47)
6.reverse 功能 反转数组
参数 没有参数
返回值 返回原数组,修改了原数组
arr.reverse()
7.concat 功能 拼接数组
参数 数组
返回值 原数组与传入数组拼接后的新数组,不改变原数组
arr.concat([5, 9, 7])
8.join 功能 数组成员以传入字符串为间隔拼接成字符串
传空串直接数组成员拼接成字符串
不传参数,默认以逗号为间隔拼接成字符串
参数 字符串(可以不传)
返回值 拼接后的字符串,不修改原数组
arr.join("abc") // **** 注意空串和空白串
arr.join(" ")
arr.join("")
arr.join()
9.slice 功能 裁剪数组
传参数一下标,从传入下标开始获取到数组的末尾
传两个参数,从参数一下标开始获取,获取到参数二下标位置,但不包含下标二位置成员
如果是负数,从右往左数下标,最后一个成员下标为-1
参数
参数一 下标 (可以为负数)
参数二 下标 (可以为负数)
返回值 返回获取后的数组,原数组不变
arr.slice(2)
arr.slice(2, 5)
arr.slice(-2)
arr.slice(-6, -3)
10.for..in 遍历数组(for..of只可以遍历数组不能遍历对象,for..in遍历数组只能得到索引,for..of遍历数组可以得到每个值)
for (var index in arr) {
console.log(idx, arr[index]);
}
11.forEach 功能 遍历数组
参数 函数
函数参数一 当前成员
函数参数二 下标
函数参数三 当前数组
返回值 没有返回值,不改变原数组
arr.forEach(function (item, index, currentArr) {
console.log(item, index, currentArr);
})
12.some 功能 检测数组成员是否满足检测函数条件(检测函数的返回值控制)
参数 函数
函数参数一 当前成员
函数参数二 下标
函数参数三 当前数组
返回值 检测结果布尔值(如果有满足检测函数的返回true,不满足的返回false),不改变原数组
var arr = [2, 5, 7, 3, 4];
var res = arr.some(function (item, index, currentArr) {
console.log(item, index, currentArr);
return item > 6; // 检测条件
})
13.every 功能 检测所有的数组成员是否满足检测函数条件(检测函数的返回值控制)
只有当数组中所有成员满足检测条件时,才返回true
遇到不满足条件的直接返回false,后续成员不再检测
参数 函数
函数参数一 当前成员
函数参数二 下标
函数参数三 当前数组
返回值 检测结果布尔值,不改变原数组
var arr = [2, 5, 7, 3, 4];
var result = arr.every(function (item, index, currentArr) {
console.log(item, index, currentArr);
// return true;
return item < 7;
})
14.map 功能 映射一个新的函数
所有的成员都可以进行逻辑处理,得到处理每个成员后的结果组成的数组
参数 函数
函数参数一 当前成员
函数参数二 下标
函数参数三 当前数组
返回值 返回映射关系后的新数组,不改变原数组
var arr = [2, 5, 7, 3, 4];
var result = arr.map(function (item, index, currentArr) {
console.log(item, index, currentArr);
// return true;
// return index;
// return index + 2; // return了个映射关系
return item + 2; // return了个映射关系
})
15.filter 功能 过滤数组成员
所有的成员都可以进行逻辑处理,满足条件(检测函数的返回值)的会组成新数组
参数 函数
函数参数一 当前成员
函数参数二 下标
函数参数三 当前数组
返回值 满足过滤条件的新数组,不改变原数组
var arr = [2, 5, 7, 3, 4];
var result = arr.filter(function (item, index, currentArr) {
console.log(item, index, currentArr);
// return true; // 过滤的条件
return item > 4;
})
16.find 功能 查找出符合检测条件的成员,找到符合条件的就不再继续寻找了
找到第一个符合检测条件(测函的返回值)的
参数 函数
函数参数一 当前成员
函数参数二 下标
函数参数三 当前数组
返回值 符合条件的成员,不改变原数组
var arr = [2, 5, 7, 3, 4];
var result = arr.find(function (item, index, currentArr) {
console.log(item, index, currentArr)
// return true;
return item > 6; // 条件
})
17.findIndex功能 查找出符合检测条件的成员下标,找到符合条件的就不再继续寻找了
找到第一个符合检测条件(测函的返回值)的下标
参数 函数
函数参数一 当前成员
函数参数二 下标
函数参数三 当前数组
返回值 符合条件的成员下标,不改变原数组
var arr = [2, 5, 7, 3, 4];
var result = arr.findIndex(function (item, index, currentArr) {
console.log(item, index, currentArr)
// return true;
return item > 6; // 条件
})
18.reduce 功能 累加
参数一:回调函数
参数1:累加的结果值
参数2:每一个成员
参数3:索引
参数4:原数组
参数二:累加初始值
返回值 最终累加的结果值
const totalAge = arr.reduce((prev, item, index, currentArr) => {
console.log(prev, item, index, currentArr)
return prev + item.age
}, 0)
console.log(totalAge)
19.indexOf 功能 在数组中查找成员,如果找到返回下标,如果找不到返回-1
参数 要查找的成员
返回值 下标,找不到返回-1
var arr = [7, 8, 6, 4, 9];
var result = arr.indexOf(12);
console.log(result);
应用场景
数组去重
var arr = [7, 8, 5, 2, 5, 6, 8, 2];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if ( newArr.indexOf(arr[i]) == -1 ) { // 新数组当中没有旧数组当前成员
newArr.push(arr[i]); // 新数组末尾添加成员
}
}
console.log(newArr);
20.includes 功能 在数组中查出成员,如果找到返回true,如果找不到返回false
参数 要查找的成员
返回值 数组中包含查找成员返回true,否则返回false
var arr = [7, 8, 6, 4, 9];
var result = arr.includes(6);
应用场景
数组去重
var arr = [7, 8, 5, 2, 5, 6, 8, 2];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if ( !newArr.includes(arr[i]) ) {
newArr.push(arr[i]);
}
}
console.log(newArr);
21.Array.from
功能 将伪数组转为一个真正的数组
参数 伪数组
返回值 伪数组转成的新数组
function add () {
console.log(arguments); // arguments伪数组没有forEach方法
var res = Array.from(arguments); // 转成一个新的真数组就可以调用forEach
console.log(res);
res.forEach(function (item) {
console.log(item);
})
}
add(3, 5);
22.Array.of
功能 创建数组
var arr1 = Array.of();
console.log(arr1);
var arr2 = Array.of(3, 7, 5);
console.log(arr2);
var arr3 = Array.of(3, "哈哈", 5, true);
console.log(arr3);
console.log(new Array(3)); // new Array(3) -> [und,und,und]
var arr4 = Array.of(3); // 这里的三就是数组中的一个成员
console.log(arr4);
23.toString 将数组转化成字符串
24.valueOf 返回自身
这两个方法在引用数据类型运算的时候会用上
25.sort 排序,改变原数组
String 方法
1.concat 连接数组
stringObject.concat(string1,string2,...,stringn)
2.indexOf 检索字符串:返回某个指定的字符串值在字符串中首次出现的位置
如果可以检索到,则返回检索到的索引值,如果检索不到则返回-1
stringObject.indexOf(检索字符串,字符串开始检索的位置)
3.slice 切片:可提取字符串的某个部分,并返回被提取的部分
stringObject.slice(start,end)
start 要抽取的片断的起始下标。如果是负数，则该参数规定的是从字符串的尾部开始算起的位置。
end 紧接着要抽取的片段的结尾的下标。若未指定此参数，则要提取的子串包括 start 到原字符串结尾的字符串。如果该参数是负数，那么它规定的是从字符串的尾部开始算起的位置。
4.split 把一个字符串分割成字符串数组。
stringObject.split(分割使用的字符串)
5.substring 提取字符串中介于两个指定下标之间的字符
stringObject.substring(start,stop)
start 必需。一个非负的整数，规定要提取的子串的第一个字符在 stringObject 中的位置。
stop 可选。一个非负的整数，比要提取的子串的最后一个字符在 stringObject 中的位置多 1。如果省略该参数，那么返回的子串会一直到字符串的结尾。
方法返回的子串包括 start 处的字符，但不包括 stop 处的字符。
6.toUpperCase 将字符串转换为大写
7.toLowerCase 将字符串转换为小写
8.tostring 返回字符串
9.valueOf 返回String对象的原始值
扩展知识点
1.[].slice.call(lis) 将伪数组转换为真数组
2.节点类型共有12种,我们关注4种:元素节点、属性节点、文本节点、注释节点
children --> 所有的子元素
childNodes --> 所有的子节点
nodeType nodeName nodeValue
元素节点 1 标签名大写 null
属性节点 2 属性名 属性值
文本节点 3 #text 文本的内容
注释节点 8 #comment 注释的内容
3.Object.keys(obj): 得到对象自身可枚举的属性名的数组，从而遍历拿到对象中所有的属性
4.obj.hasOwnProperty(prop): 判断prop是否是obj自身的属性
5.documentfragment
是一个容器，这个容器本身进入不了页面，它内部的所有东西会进去页面，在内存中干活，批量更新
1、可以把原来的元素的子节点，转移到documentfragment 节点当中，原来的里面就没有了
2、去处理documentfragment 中的子元素节点数据
3、最后把documentfragment 节点 追加到原来的元素当中
跨域
什么是跨域?
违反了同源策略的叫跨域
什么是同源策略?
协议、域名、端口号是否相同
注意: 跨域会发生在哪里?
跨域只会发生在浏览器端,服务端是不会跨域 浏览器发请求的时候跨域,浏览器会发什么请求 普通请求 - a 标签、form 表单 ajax 请求 - 为了局部刷新出现的技术,当前页面不改变,发送网络请求,拿到数据,修改当前页面部分内容 只有 ajax 请求会发生跨域
解决跨域:
devServer: {
proxy: {
// 标识
'/api': {
// 带有 /api 这个标识的就放行,进行转发
target: 'http://127.0.0.1:3000',
// 路径重写 - 因为接口的路径中没有/api,而/api是标识,在路径中需要去掉,所以要重写
pathRewrite: { '^/api': '' }
}
}
}
防抖函数:
function debounce(fn, time) {
var timer = null;
return function () {
if (timer) {
clearTimeout(timer);
}
setTimeout(fn, time);
};
}
节流函数:
function throttle(fn, time) {
var flag = true;
return function () {
if (flag) {
setTimeout(function () {
flag = true;
fn();
}, time);
flag = false;
}
};
}
深拷贝函数:
function deepClone(data) {
function isObject(obj) {
return ( typeof obj === 'object' || typeof obj === 'function') && obj != null
}
// 判断数据是否为引用数据类型
if(isObject(data)) {
return data
}
// 判断数据是否为函数
if(typeof data === 'function') {
return new Function('return' + data.tostring())
}
// 判断数据是数组
let newObj = Array.isArray(data) ? [] : {}
for(let key in data) {
// 利用递归函数实现深拷贝
newObj[key] = deepClone(data(key))
}
return newObj
}
