何小仙

web前端知识点总结html，css，js，vue，react/面试题会经常问到

一阶段

1.网络中使用最多的图片格式有哪些
- gif 支持动画，只有全透明和不透明两种模式，只有256种颜色
- jpg 采用有损压缩算法，体积较小，不支持透明，不支持动画
- png 采用有损压缩算法，体积也相对较小，支持透明背景，不支持动画
- svg 一般会保存颜色及形状相对简单的图片，可任意放大图形显示，边缘异常清晰
- BMP 无损压缩格式，画质最好，文件太大，不利于网络传输
2.请简述css盒子模型
- 在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分，这就是盒子模型。
3.视频/音频标签的使用
- 视频
```
    
```
  - 属性： controls 控件、autoplay: 自动播放谷歌和火狐静音下支持 ie支持、muted 静音播放、loop 循环、poster 未播放前显示的内容
- 音频
```
    
```
  - 属性： controls 控件、autoplay 自动播放谷歌不支持，火狐静音下支持 ie支持、loop 循环播放、muted 静音播放
4.HTML5新增的内容有哪些
- h5的语法
  - DOCTYPE可以使用小写
  - 单标签没有结束标签
  - 可以省略结束的标签: li、dt、dd、p、option、colgroup(用于对表格中的列进行组合，以便对其进行格式化)、thead、tbody、tfoot、tr、td、th
  - 可以省略的标签 html head body tbody
- 新增标签 特点：语义化，ie8及以下不生效
  - header标签头部
  - section 划分板块
  - article 与上下文无关的内容
  - aside 可以放侧边工具栏
  - nav 导航
  - figure和figcaption 类似于dl标签
  - footer 底部
  - main 比较重要的部分
  - mark 标记默认是黄色的高亮，可以修改样式内联
- 多媒体标签
  - 音频
```
  <audio src="课堂示例/梦然-少年.mp3" controls autoplay loop muted>audio> 内联
  <audio controls>
    <source src="课堂示例/梦然-少年.ogg" type="audio/ogg">source>
    <source src="课堂示例/梦然-少年.mp3" type="audio/mpeg">source>
    你的浏览器不支持此文件，换个电脑吧
  audio>
```
    - controls 控件
    - autoplay 自动播放谷歌不支持，火狐静音下支持 ie支持
    - loop 循环播放
    - muted 静音播放
  - 视频
```
    <video src="课堂示例/qr.ogg" controls height="300" autoplay loop muted>
    video>
     <video controls>
        <source src="课堂示例/wje.mp4" type="video/mp4">source>
        <source src="课堂示例/wje.ogg"  type="video/ogg">source>
        <source src="课堂示例/wje.webm" type="video/webm">source>
    video>
```
    - controls 控件
    - autoplay: 自动播放谷歌和火狐静音下支持 ie支持
    - muted 静音播放
    - loop 循环
    - poster 未播放前显示的内容
- 表单新增
  - type类型
    - email 邮件格式
    - number 限制输入是数字 min最小值 max最大值 step 每次增加的数
    - url 地址路径或者网址都可以
    - color 色块
    - time 时间
    - range 滑动条
  - 属性
    - required 必填
```
 <input type="text" required autofocus>
```
    - placeholder 提示信息
    - autocomplete 自动提示 on提示 off不提示
```
  <input type="text" name="test" autocomplete="on" >
```
    - autofocus 自动聚焦只能写一个
    - multiple 多选
```
<input type="file" multiple>
```
    - pattern 正则限制输入的内容类型
```
 <input type="text" pattern="[0-9]"> 限制输入0-9之间的数
```
5.HTML5 新增的语义化标签有哪些
- header 头部
- section 划分板块
- article 与上下文无关的内容
- aside 可以放侧边工具栏
- nav 导航
- figure和figcaption 类似于dl标签
- footer 底部
- main 比较重要的部分
- mark 标记默认是黄色的高亮，可以修改样式内联
6.Css3新增的特性
- css3选择器
  - 属性选择器
    - [属性名] 可以选择到官方或者自定义的属性
    - [属性名=“属性值”] 匹配属性值
    - [属性名~=""] 包含该值必须单独出现的
    - [属性名*=""] 只要包含该值就行
    - [属性名^=""] 以该值开头
    - [属性名$=""] 以该值结尾
  - 伪类选择器
    - 结构性伪类选择器（child系列）
      1. E:first-child E必须是父元素里面的第一个孩子
      2. E:last-child E必须是父元素里面的最后一个孩子
      3. E:nth-child(n) 不匹配前面的元素类型，如果对应的位置是该元素才匹配
      4. E:only-child 必须只有他自己一个孩子
    - 结构性的伪类选择（type系列）
      1. E:first-of-type 匹配到该元素中的第一个孩子
      2. E:last-of-type 匹配到该元素的最后一个孩子
      3. E:nth-of-type(n) 匹配到该元素的第几个孩子
        n可以是表达式 2n 3n 2n+1 even(偶数) odd(奇数)
      4. E:nth-last-of-type(n) 匹配到该元素的倒数第几个
    - 目标伪类：结合锚点使用
    - 状态伪类选择器
      1. :enabled 元素可编辑
      2. :disabled 元素不可编辑
      3. :checked 选中
      4. ::selection 高亮状态一般修改字体颜色和背景色
    - 动态伪类选择器
      1. :link 未访问前
      2. :visited 访问过后
      3. :hover 鼠标滑过
      4. :active 鼠标点击之后
  - 层级选择器
    - 后代选择器选择器选择器
    - 子项选择器选择器>选择器
    - 相邻的兄弟选择器+选择器紧挨着的兄弟
    - 相邻的兄弟们选择器~选择器紧挨着的弟弟们
- css3属性
  - 阴影
    1. box-shadow:x轴偏移 y轴偏移模糊距离阴影的颜色阴影的位置（outset/inset）;
    2. text-shadow:x轴偏移 y轴偏移模糊距离阴影的颜色;
  - 透明
    - rgba 设置透明度
      1. 里面的内容不会被模糊
    - opacity:0-1; 0完全透明 1不透明
      1. 里面的内容也会被模糊
      2. 可以设置图片的模糊
      3. 过渡效果对display的隐藏和出现没有效果，可以通过设置opacity的值
  - 背景
    - 背景图的原点 background-origin
    1. padding-box 默认值背景图从padding区域开始显示
    2. content-box 背景图从content区域开始显示
    3. border-box 背景图从border边框区域开始显示
    - 背景图的裁切 background-clip
    1. border-box 边框之外裁切
    2. padding-box padding之外裁切
    3. content-box 内容区开始裁切
    - 背景图大小的设置 background-size
  - 圆角 border-radius
    1. 一个值四个角
    2. 两个值对角
    3. 三个值左上角右上角/左下角右下角
    4. 四个值左上角右上角右下角左下角（顺时针的角度）
    5. 正圆 border-radius: 50%/100%;
  - 图片边框 border-image
    1. border-image:图片路径偏移重复
    2. border-image-source:url() 图片的路径
    3. border-image-slice:数值图片的裁切不要加单位
    4. border-image-repeat:平铺(repeat) 铺满(round) 拉伸(stretch)默认
  - 过渡 transition：transition-property transition-duration transition-delay transition-timing-function(顺序不固定，当只有一个时间的时候，表示过渡时间，两个时间第一个表示过渡时间，第二个表示延迟时间)
    - transition-property 需要过渡的属性
    - transition-duration 过渡所需要的时间 s(秒)/ms(毫秒) 1s=1000ms
    - transition-delay 过渡延迟时间 s(秒)/ms(毫秒)
    - transition-timing-function 过渡效果
      1. linear: 匀速
      2. ease: 逐渐慢下来
      3. ease-in: 加速
      4. ease-out: 减速
      5. ease-in-out 先加速后减速
  - 动画 animation：animation
    - 使用：animation: 动画名动画持续时间延迟时间动画效果执行次数
      - animation-name: 动画名
      - animation-duration: 动画的持续时间 s/ms
      - animation-delay: 动画的延迟时间 s/ms
      - animation-timing-function: 动画的效果
      - animation-iteration-count: 具体的数值/infinite(无限循环)
      - anmiation-direction: 动画执行的方向
        
        normal 正向
        
        reverse 反向
        
        alternate 正向和反向交替运动
      - animation-play-state 动画是否播放
        
        running 播放默认值
        
        paused 暂停
    - 定义动画
```
    @keyframes 动画名{
           
      from{
           } ==>0%
      to{
           }==>100%
    }
    关键帧分的是时间
    @keyframes 动画名{
           
      0%{
           
        css属性:css属性值
      }
      10%{
           } 0.5s
      20%{
           } 1s
      30%{
           }
      100%{
           }
    }
```
  - 渐变
    - 线性渐变
      - background-image/background:linear-gradient(方向,颜色1,颜色2……)
      - 渐变方向
        
        to bottom 向下
        
        to right 向右
        
        to top 向上
        
        to left 向左
        
        to right bottom 向右下角
        
        to left top 向左上角
        
        to right top 向右上角
        
        to left bottom 向左下角
        
        数值+deg(角度)
      - 设置百分比
        /* 0%-40% 是红色的纯色 40%-60% 红色到蓝色渐变 60%-100% ；蓝色的纯色*/ background: linear-gradient(red 40%, blue 60%);
      - 重复性的线性渐变
        
        background:repeating-linear-gradient(red 40%, blue 60%);
    - 径向渐变
      - bakrgound-image/background:radial-gradient(位置,颜色1,颜色2)
      - 位置
        
        center 中心
        
        水平方向：left/center/right
        
        垂直方向：top/center/bottom
      - 兼容写法
        background: radial-gradient(left, red, blue); background: -webkit-radial-gradient(left, red, blue); background: -ms-radial-gradient(left, red, blue);
      - 重复性的径向渐变
        
        background: repeating-radial-gradient(red 20%, yellow 40%);
7.清除浮动的方式有哪些？请说出各自的优点
- 额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both）不推荐
  - 优点：通俗易懂，方便
  - 缺点：添加无意义标签，语义化差
- 父级添加overflow属性（overflow：hidden）不推荐
  - 优点：代码简洁
  - 缺点：内容增多的时候容易造成不会自动换行导致内容被隐蔽掉，无法显示要溢出的元素
- 给父级设置高度
  - 优点：简单，代码少，容易掌握
  - 缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
- 父级div定义overflow:auto(必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度)
  - 优点：简单，代码少，浏览器支持好
  - 缺点：内部宽高超过父级div时，会出现滚动条。
- 使用after伪元素清除浮动（推荐使用）
```
    .clear:after{
                
        content:"";       
        display:block;       
        clear:both;       
        height:0;       
        overflow:hidden;       
        visibility:hidden     
    }
```
  - 优点：符合闭合浮动思想，结构语义化正确
  - 缺点：ie6-7不支持伪元素：after，使用zoom：1触发hasLayout
8.定位的属性值有何区别
- static 默认值
- relative 相对定位，参考自己本身的位置，不会脱离文档流，文字不能被遮挡
- absolute 绝对定位，参考有定位属性(除了static)的祖先元素,定位元素通过一层一层向上找，找到有定位的祖先元素，如果找到body依然没有找到有定位的祖先元素，参考浏览器窗口(子绝父相)，脱离文档流，且文字能被遮挡，块级元素设置margin:0 auto;会失效，内联元素设置定位转换成块元素
- fixed 固定定位，参考浏览器的窗口，不会跟随滚动条的滚动而滚动，脱离文档流，
  宽度自适应的时候，宽度不显示，可以通过设置width:100%
- 粘性定位 sticky，参考浏览器的窗口，没有达到top值之前正常显示，达到top值之后类似于固定定位，不会跟随滚动条滚动而滚动
9.子元素如何在父元素中居中
- 定位+margin：auto 父元素position: relative 子元素position: absolute left:0;top:0;right:0;bottom:0;margin: auto;
- 定位+margin-left+margin-top 父元素position: relative 子元素position: absolute left:50%; top:50%; margin-left: -当前盒子宽度的一半; margin-top: -当前盒子高度的一半;
- 定位+transfrom（子元素未知宽高）父元素 position: relative 子元素 position: absolute left:50%; top:50%; transform: translate(-50%,-50%);
- 弹性盒子父元素 display: flex; justify-content: center; align-items: center;
- flex+margin: auto 父元素 display: flex; 子元素 margin:auto;
10.border-box与content-box的区别
- border-box
  - padding和border被包含在定义的width和height之内。
  - 对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度；即 ( Element width = width + margin)
  - 此属性表现为怪异模式下的盒模型
- content-box
  - padding和border不被包含在定义的width和height之内。
  - 对象的实际宽度等于设置的width值和border、padding之和；即 ( Element width = width + border + padding + margin)
  - 此属性表现为标准模式下的盒模型
11.元素垂直居中
- 如果是图片，直接设置img的属性vertical-align: middle;前提是需要设置父级元素为块级元素并且设置高度
- 如果是单行文本，可以通过设置子元素的line-height值等于父元素的height，这种方法适用于子元素为单行文本的情况。
- 通过定位父元素 position: relative 子元素 position: absolute top:50%; transform: translateY(-50%);
- 通过伪元素:before实现CSS垂直居中
```
	父元素:before{
		content:"";
		display:inline-block;
		vertical-align:middle;
		height:100%;
	}
```
- 通过display:table实现,给父元素设置display:table，子元素display：table-cell的方式实现CSS垂直居中
- 通过display:flex实现，给父元素设置display:flex; 子元素 align-self:center
12.如何让chrome浏览器显示小于12px的文字
- -webkit-transform:scale(0.833); 0.833 是缩放比例
13.Css选择器有哪些，哪些属性可以继承，优先级如何计算？css3新增的伪类有哪些
- css选择器
  - id 选择器（ # myid）
  - 类选择器（.myclassname）
  - 标签选择器（div, h1, p）
  - 相邻选择器（h1 + p）
  - 子选择器（ul > li）
  - 后代选择器（li a）
  - 通配符选择器（ * ）
  - 属性选择器（a[rel = “external”]）
  - 伪类选择器（a: hover, li: nth - child）
- 可以继承
  - 字体类：
    1. font-family：字体类型；
    2. font-weight:字体加粗；
    3. font-size:字体大小
    4. font-style: 字体样式
  - 文本类:
    1. color:颜色
    2. text-indent: 缩进（只对块级元素生效）
    3. text-align:对齐方式
    4. line-height:行高
    5. word-spacing:字之间的距离；
    6. letter-spacing:字符之间的距离；
    7. text-decoration:文本修饰
  - 列表：
    1. list-style-type:列表类型
    2. list-style-image:图标路径
    3. list-style-position:图标的位置
    4. list-style:none;去掉列表符号
- 优先级就近原则，样式定义最近者为准; 载入样式以最后载入的定位为准;
- 优先级为: !important > id > class > tag(标签选择器) important 比内联优先级高
- css3新增的伪类
- 结构性伪类选择器（child系列）
  1. E:first-child E必须是父元素里面的第一个孩子
  2. E:last-child E必须是父元素里面的最后一个孩子
  3. E:nth-child(n) 不匹配前面的元素类型，如果对应的位置是该元素才匹配
  4. E:only-child 必须只有他自己一个孩子
- 结构性的伪类选择（type系列）
  1. E:first-of-type 匹配到该元素中的第一个孩子
  2. E:last-of-type 匹配到该元素的最后一个孩子
  3. E:nth-of-type(n) 匹配到该元素的第几个孩子
    n可以是表达式 2n 3n 2n+1 even(偶数) odd(奇数)
  4. E:nth-last-of-type(n) 匹配到该元素的倒数第几个
- 目标伪类：结合锚点使用
- 状态伪类选择器
  1. :enabled 元素可编辑
  2. :disabled 元素不可编辑
  3. :checked 选中
  4. ::selection 高亮状态一般修改字体颜色和背景色
- 动态伪类选择器
  1. :link 未访问前
  2. :visited 访问过后
  3. :hover 鼠标滑过
  4. :active 鼠标点击之后
14.网页中有大量图片加载很慢你有什么办法进行优化？
- 图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载
- 如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载
- 如果图片为css图片，可以使用CSSsprite（精灵图），SVGsprite（精灵图），Iconfont（字体图标）（精灵图，小图标…）
- 如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验
- 如果图片展示区域小于图片的真实大小，则应该在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致
15.行内元素/块级元素有哪些？
- 行内元素在同一行显示，不可以设置宽高，宽高由内容撑开，padding margin 左右显示准确，上下显示不准确，margin:0 auto,不生效，可以给内联元素添加一个外层的盒子形成一个大的区域，给该盒子设置text-align:center的居中属性，添加浮动可以解决内联元素之间的间歇，也能将内联元素的元素类型转换为块元素，例如span b strong i em a u del img
- 块级元素可以设置宽高，盒模型属性都生效，独占一行，一般作为容器，例如：ES6新增的header footer section等以及常用的div p ul li h1-h6 ol dl dt dd
16.浏览器的标准模式和怪异模式区别？
- 盒模型：
  - 在怪异模式下，盒模型为IE模型。盒子所占区域宽度=width(宽)+margin(左右)，高度等同
  - 在标准模式下，盒模型为W3C模型。盒子所占区域宽度=width(宽)+padding(左右)+border(左右)+margin(左右)，高度等同
- 行内元素的垂直对齐方式：标准模式下vertical-align属性默认取值是baseline；怪异模式下vertical-align属性默认取值是bottom。
- 字体样式：标准模式下，表格中的字体样式会被继承；怪异模式下，表格中的字体样式不会被继承。
- 元素溢出的处理：标准模式下，overflow取值默认为visible；怪异模式下，当内容超出容器高度时，会把容器拉伸。
- ！important:标准模式下，IE7+认识！important声明；怪异模式下，IE6/7/8都不认识！important声明。
- 行内元素的宽高：标准模式下，给行内元素设置wdith和height都不会生效；怪异模式下会生效。
- 水平居中：使用margin:0 auto在标准模式下可以使元素水平居中，但在怪异模式下却会失效。
- 怪异模式下，颜色值必须用十六进制标记法。
17.margin和padding在什么场合下使用
- margin：用来调整盒子到盒子之间的距离，不会撑大显示的区域，但是会影响到别的盒子
  - 使用场景：需要在border外侧添加空白时；空白处不需要背景（色）时；上下相连的两个盒子之间的空白，需要相互抵消时；
- padding：用来调整子元素（内容）在父元素（盒子）内的位置，会把盒子撑大，如果不想被撑大，要在原来宽高的基础上减去对应方向的padding值
  - 使用场景：需要在border内测添加空白时；空白处需要背景（色）时；上下相连的两个盒子之间的空白，希望等于两者之和时；
18.弹性盒子布局属性有哪些请简述?
- 父元素：
  - 主轴方向 flex-direction
    - row 主轴从左向右默认值
    - row-revese 主轴从右向左
    - column 主轴从上到下
    - column-reverse 主轴从下到上
  - 主轴方向排列方式 justify-content
    - flex-start 主轴起点默认值
    - flex-end 主轴终点
    - center 居中
    - space-between 两端对齐
    - space-around 中间的留白是两边的2倍
    - space-evenly 平均分配留白
  - 交叉轴排列方式 align-items
    - stretch 拉伸默认值 去掉子元素的高度
    - flex-start 交叉轴的起点
    - flex-end 交叉轴的终点
    - center 居中
  - 换行 flex-wrap
    - nowrap 不换行,默认值，会将子元素压缩
    - wrap 换行
    - wrap-reverse 反向换行
  - 多行之间的排列方式 align-content
    - stretch 拉伸默认值需要去掉子元素的高
    - flex-start 主轴起点依次排列
    - flex-end 主轴终点依次排列
    - center 居中
    - space-between 两端对齐
    - space-around 中间的两端的2倍
    - space-evenly 平均分配
- 子元素：
  - 重写子项对应的交叉轴的对齐方式 align-self
    - stretch 拉伸默认值去掉子元素的高度
    - flex-start 交叉轴的起点
    - flex-end 交叉轴的终点
    - center 居中
  - 放大 flex-grow
    - 0 不放大
    - 数值填充剩余的空间
  - 压缩 flex-shrink
    - 1 压缩
    - 0 不压缩
    - 实现导航的滚动效果
      1. 子项的宽度超出了父容器的宽度
      2. 设置子项不压缩 flex-shrink:0;
      3. 父元素设置溢出显示滚动条 overflow-x:auto;
  - 子项的宽度 flex-basis:数值+px 类似于宽度
  - 排序 order 数值值越大越向后，可以设置负数
19.怎么实现标签的禁用
- style=“pointer-events: none”
20.flex布局原理
- flex 是 flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。当为父盒子设置为flex布局之后，子元素的float、clear、vertical-align属性将失效。
- 采用flex布局的元素，称为flex容器（flex container），简称“容器”。他的所有子元素自动成为容器成员，称为flex项目（flex item），简称“项目”。
- 总结：flex布局就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。
21.px与rem的区别
- px：px 实际上就是像素，用px设置字体大小时，比较稳定和精确
  - px像素（Pixel），相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
- em：em 就是根据基准来缩放字体的大小 em的值并不是固定的；em会根据父级元素的字体大小变化
  - em 是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
- rem： rem 是根据根元素字体大小变化，这样就意味着，我们只需要在根元素确定一个参考值。一般情况下将根元素的字体大小设置为html{font-size:100px} rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。
22.网页的三层结构有哪些
- 网页的结构层：
  - 由 HTML 或 XHTML 之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。”
- 网页的样式层：
  - 该层指示结构化HTML文档如何看待网站的访问者，并由CSS（层叠样式表）定义。这些文件包含有关如何在Web浏览器中显示文档的样式说明。样式层通常包括基于屏幕大小和设备更改站点显示的媒体查询。网站的所有视觉样式都应位于外部样式表中
- 网页的行为层：
  - 行为层使网站具有交互性，允许页面响应用户操作或基于一组条件进行更改。JavaScript是行为层最常用的语言，但CGI和PHP也经常被使用。当开发人员引用行为层时，大多数都是指在Web浏览器中直接激活的层。
23.请简述媒体查询
- 媒体指的就是各种设备 (移动设备, PC设备)，查询指的是要检测属于哪种设备，媒体查询就是通过查询当前属于哪种设备, 让网页能够在不同的设备下正常的预览
- 语法 @media 关键字设备类型 and (媒体特性){}
- 关键字：all(所有的设备类型)/only(限定某种设备)/not(排除设备)
- 设备类型：
  - all(所有的设备)
  - screen 显示器移动设备笔记本
  - print 打印设备
- 媒体类型
  - 最小宽度 min-width 大于最小宽度
  - 最大宽度 max-width 小于最大宽度
- 书写说明
  - and两侧必须有空格
  - 媒体特性属性值后面不要加分号
  - 多个媒体特性之间用 and 连接
- viewport视口
  - 视口 viewport
    - 布局视口，默认情况下，布局视口的宽是980px，设置css样式的样式是作用在布局视口
    - 可视视口设备的宽度 device-width
    - 完美/理想视口 width=device-width 布局视口和设备宽度一样
  - initial-scale 初始缩放比例默认值1
  - minimum-scale 最小缩放比例默认值1
  - maximum-scale 最大缩放比例默认值1
  - user-scalable 用户是否可以手动缩放 no/0 不缩放
24.rem缺点
- 有局限性，IE8及以下版本不支持
- 对pc页面来讲使用次数不多
- 数据量大：所有的图片、盒子都需要给一个准确的值，才能保证不同机型的适配；
25.常见的兼容性一阶段内容中记几个
- 在ie浏览器中，a标签套图片会自带边框 ie10及以下
  - 解决：去掉边框 img{border:none}
- 图片自带底部3px的留白
  - 解决：
    1. vertical-align: bottom/middle/top 给图片添加
    2. display:block; 给图片添加
    3. font-size:0; 给父元素添加
- 表单元素对齐不一致
  - 解决：
    1. 设置怪异盒模型
    2. 设置浮动
- 透明度 opacity 在ie浏览器中不支持 0-1
  - 解决：
    1. opacity的值照常设置，适应正常的浏览器
    2. 单独设置ie中透明属性：filter:alpha(opacity=value);取值范围 value: 1-100(整数)1 完全透明 100不透明
26.垂直与水平居中的方式
- 水平居中：
  - 行内元素：为该行级元素的父元素设置text-align:center样式
  - 块级元素：为其自身设置margin:auto样式
- 垂直居中：
  - 行内元素：line-height: 父元素的高度
  - 块级元素：
    1. 父元素 position:relative;子元素：position:absolute;top:50%;left:50%; transform:translate(-50%,-50%);
    2. 父元素：display:flex;justify-content: center; align-items:center;
27.三栏布局方式两边固定中间自适应
- 绝对定位法：将左右两边使用绝对定位，绝对定位使其脱离文档流，后面的center会自然流动到他们上面，然后使用margin属性，留出左右元素的宽度，就可以使中间元素自适应屏幕宽度。
- 自身浮动法：对左右分别使用float:left和float:right，浮动使左右两个元素脱离文档流，中间元素正常在文档流中，使用margin指定左右外边距对其进行一个定位。
- margin负值法：左右两栏均左浮动，左右两栏采用负的margin值。中间栏被宽度为100%的浮动元素包起来。
28.doctype作用
- 声明叫做文件类型定义(DTD),作用是为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。
29.常见的浏览器内核有哪些
- ie浏览器：Trident
- 火狐：Gecko 代码开源
- 苹果 & 谷歌旧版本: Webkit
- 谷歌 & 欧鹏: Blink
30.link和import的区别
- 老祖宗的差别：link属于HTML提供的引用方式，@import是css提供的引用方式，link还可以引入其他文件类型，@import只能引入css文件
  - @import url(“图标路径”); 不可以引入
- 加载顺序的区别：link和HTML是同时加载的，@import是当所有html文件加载后再去加载css文件，所以有时候浏览@import加载CSS的页面时开始会没有样式
- 兼容性 @import只有ie5以上才支持
32.BFC(块级格式化上下文)触发条件
- float:值为left/right
- position的值为absolute和fixed
- display为inline-block（内联块）, table-cell（单元格）, table-caption（表格标题）, flex（弹性盒）, inline-flex（弹性盒）
- overflow的值为hidden/scroll/auto

33.css实现边框三角形

    
    div {
       
          height: 0;
          border-top: 20px solid pink;
          border-right: 20px solid transparent;
          border-bottom: 20px solid transparent;
          border-left: 20px solid transparent; /*透明*/
          width: 0;
    }

二阶段

1.Js基本数据类型有哪些
- 数值类型（number）包含数字
- 字符串类型（string）由单双引号包住的字符串内容会原样输出
- 布尔类型（boolean）只会输出true ，false
- undefined 数值定义但未初始化
- null 空
- Symbol 表示独一无二的值（ES6新增）

2.Ajax如何使用

    btn.onclick = function(){
       
      // 1. 实例化一个XMLHttpRequest对象
      let http = new XMLHttpRequest();
      // 2. 规划一个请求（三要素）
        // 2.1 请求方式 GET || POST
        // 2.2 请求地址
        // 2.3 同步还是异步 可选的参数，如果省略就是异步的请求
      //http.open("GET","http://10.35.170.103/data.php");
      //带有一个请求参数的请求
      http.open("GET",`http://10.35.170.103/data.php?age=${
         age.value}&sex=${
         sex.value}`);
      // 3. 真实的发送请求
      http.send();
      // 4. 接收来自服务器端的响应
      http.onreadystatechange = function(){
       
        //服务器端已将返回的内容交付给客户端手里了
        if(http.readyState === 4){
       
          console.log(http.responseText);
        }
      }
    }

创建XMLHttpRequest对象
- 浏览器使用XMLHttpRequest对象与服务器进行交互，获取数据。一般现在流行的浏览器均支持XMLHttpRequest对象（IE5 和 IE6 使用 ActiveXObject）。
- 语法：
- var xml=new XMLHttpRequest();
- 老版本的IE浏览器的创建方式为：var xml=new ActiveXObject(“Microsoft.XMLHTTP”);
```
    var xml;         
    if (window.XMLHttpRequest) {  			 
        xml=new XMLHttpRequest();  		 
        
    }else{   			
        xml=new ActiveXObject("Microsoft.XMLHTTP");   		
        
    } 
```

向服务器发送请求

get方式提交使用XMLHttpRequest对象的open()方法向服务器发送请求
语法：

open(请求方式,请求地址（get发送的数据拼接在url后面）,true(异步))

    xml.open("get","index.json",true); 			
    xmlH.send();// get请求send保持为空

post方式提交使用XMLHttpRequest对象的open()与send()方法向服务器发送请求
语法：
open(请求方式,请求地址,true(异步))

send()

    xml.open("post","index.json",true); 			
    //如果想要使用post提交数据,必须添加此行 			
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 			//将数据通过send方法传递 			
    xhr.send('name=fox&age=18');

onreadystatechange事件
- 当向服务器发送请求时redyState的值发生改变时触发onreadystatechange事件。
- readyState存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
  - 0: 请求未初始化
  - 1: 服务器连接已建立
  - 2: 请求已接收
  - 3: 请求处理中
  - 4: 请求已完成，且响应已就绪
- status有两种数值，分别表示： 200: “OK” 404: 未找到页面
```
    xml.onreadystatechange(function(){ 
        if(xmlHttp.readyState==4&&xmlHttp.status==200){        	   
            console.log(xhr.responseText); 
        }
    }
```

3.如何判断一个数据是NaN

NaN不是一个数字且数据类型为number，而且不等于自身

可直接采用内置方法isNaN

    function isNaN(n) {
           
        if (n !== n) {
           
            return true;
        } else {
           
            return false;
        }
    }

利用NaN是唯一一个不等于任何自身的特点
```
    var a=NaN; 
    a==a; //false
```

object.is方法

    console.log(Object.is("a", NaN));
    console.log(Object.is(1, NaN));
    console.log(Object.is(NaN, NaN));

4.Js中null与undefined区别
- 相同点：if 判断语句中，两者都会被转换为false
- 不同点：
  - Number转换的值不同，Number(null)输出为0, Number(undefined)输出为NaN
  - null表示一个值被定义了，但是这个值是空值
  - undefined表示缺少值，即此处应该有值，但是还没有定义
5.闭包是什么有什么特性，对页面会有什么影响
- 闭包可以简单理解成“定义在一个函数内部的函数“。当其中一个内部函数在包含它们的外部函数之外被调用时，就会形成闭包。
```
    let fn = (function(){
         
      //局部变量
      var count = 0;
      return function(){
         
        return ++count;
      }
    })()
```
- 本质：外层函数嵌套一个内层函数，内层函数作为外层函数的return语句的返回值。外层函数是自调用函数，并且将自身的返回值（也就是内层函数本身）赋给一个变量。在JS执行环境上下文中调用该变量就等价于调用了内层函数，并且在内层函数中可以访问到外层函数的局部变量又并且外层函数的局部变量不会被多次声明，此时就形成了一种闭包的写法。
- 特点：
  - 函数嵌套函数。
  - 函数内部可以引用外部的参数和变量。
  - 参数和变量不会被垃圾回收机制回收。
- 用处：
  - 常驻内存会增大内存的使用量；
  - 读取函数内部的变量；
  - 这些变量的值始终保持在内存中，不会在外层函数调用后被自动清除。
- 优点：
  - 变量长期驻扎在内存中；
  - 避免全局变量的污染；
  - 私有成员的存在；
- 缺点：会造成内存泄露
6.事件委托是什么？如何确定事件源
- 事件委托还有一个名字叫事件代理，JS高程上讲：事件委托就是利用事件冒泡，只制定一个时间处理程序，就可以管理某一类型的所有事件。
- 将子元素的事情委托给它们的祖先级元素来干，然后使用event.target(低版本IE用的是event.srcElement)来代替已经混乱this关键字
  - 解决动态元素(刚进入页面时，元素不在页面内)无法绑定事件问题
  - 在极端情况下可以提升客户端性能
7.本地存储与cookie的区别
- Cookie 是小甜饼的意思。顾名思义，cookie 确实非常小，它的大小限制为4KB左右。它的主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。
- localStorage 是 HTML5 标准中新加入的技术，它并不是什么划时代的新东西。早在 IE 6 时代，就有一个叫 userData 的东西用于本地存储，而当时考虑到浏览器兼容性，更通用的方案是使用 Flash。而如今，localStorage 被大多数浏览器所支持，如果你的网站需要支持 IE6+，那以 userData 作为你方案是种不错的选择。
- sessionStorage 与 localStorage 的接口类似，但保存数据的生命周期与 localStorage 不同。做过后端开发的同学应该知道 Session 这个词的意思，直译过来是“会话”。而 sessionStorage 是一个前端的概念，它只是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但当页面关闭后，sessionStorage 中的数据就会被清空。
- cookie：兼容性很好，可以灵活的设置数据的生命周期，缺点是操作不方便，需要大量的字符串处理
- localStorage：IE67不认识，永久性存储，只要用户不删除或调用clear方法就永远不会删，操作很方便
- sessionStorage：兼容性与localStorage一样，但是存储时间是会话（在当前标签页无论跳转到该网站的哪一个页面都能获取到，但关闭浏览器就会销毁，并且在其他标签页面中是获取不到的）
- 三者的异同

特性	Cookie	localStorage	sessionStorage
数据的生命期	一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效	除非被清除，否则永久保存	仅在当前会话下有效，关闭页面或浏览器后被清除
存放数据大小	4K左右	一般为5MB	同左
与服务器端通信	每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题	仅在客户端（即浏览器）中保存，不参与和服务器的通信	同左
易用性	需要程序员自己封装，源生的Cookie接口不友好	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持	同左

8.ES6新特性
- const和let
- 模板字符串
- 箭头函数
- 函数的参数默认值
- 对象和数组解构
- for…of 和 for…in
- ES6中的类
9.Let与var与const的区别
- var声明的变量会挂载在window上，而let和const声明的变量不会；
- var声明变量存在变量提升，let和const不存在变量提升；
- let和const声明变量都没有函数作用域的概念，而是遵守块级作用域的概念；
- 同一作用域下let和const不能声明同名变量，而var可以；
- let 有暂存死区（在声明之前就使用变量，就会报错，这就是暂时性死区）
- 【let和const关键字：let和const声明变量都没有函数作用域的概念，而是遵守块级作用域的概念，并且没有变量提升的操作，不能重复声明。const是声明常量版的let，let有暂时性死区的特性。】
10.数组方法有哪些请简述
- push(新值) 向数组的尾端插入一个新的元素
- unshift(新值) 向数组的前端插入一个新的元素
- pop() 删掉数组中最后一个元素
- shift() 删掉数组中第一个元素
- splice(删除的下标,1) 从某一个下标上删除一个元素，有副作用
- splice(要插入的下标,0,要插入的数据) 从中间插入一个元素
- concat() 拼接数组，返回值为合并成的新数组，原数组不会改变
- join() 将数组转换为字符串，参数为分隔符，原数组不会改变
- reverse() 颠倒数组中元素的顺序，会改变原数组
- slice(start,end) 通过开始下标和结束下标截取数组元素，原数组不会发生改变
- toString() 将数组转换为字符串可以被join完美代替
- sort() 通过Unicode进行排序，在原数组上排序，不生成副本
```
   var arr = [1, 5, 6, 1, 3, 4, 11, 2, 5]
   //排序 固定写法 升序
   arr.sort(function(num1, num2) {
      return num1 - num2;
   })
   console.log(arr);
   //排序 固定写法 降序
   arr.sort(function(num1, num2) {
      return num2 - num1;
   })
   console.log(arr);
```
- arr.forEach(callback) 遍历数组,无return 即使有return，也不会返回任何值，并且会影响原来的数组
- arr.map(callback) 映射数组(遍历数组),有return 返回一个新数组。
- arr.filter(callback) 过滤数组，返回一个满足要求的数组
11.Json如何新增/删除键值对
- JSON是什么： JSON (JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。
- JSON规则：
  - 1.必须是字符
  - 2.基础格式参考js中的对象（array和object）
  - 3.对象格式的key部分必须放在双引号中，单引号不行
  - 4.不允许出现没有意义的逗号
  - 5.不能出现undefined、NaN，可以出现null
  - 6.不能出现单引号
- 字符串转JSON（正解析）： Var obj = JSON.parse(JSON格式的字符串)
- JSON转字符串（反解析）： Var str = JSON.stringify(对象)
- 删除： delete json对象[“属性名”];
- 增加： json对象[“属性名”]=属性值例如：myObject[age]=10;//即可添加上age属性
12.什么是面向对象请简述
- 面向对象就是将问题抽象成若干object对象，然后去对这些对象编程，将对象的属性和操作封装到类中，让它们具有一定的功能。具有抽象性、封装性、继承性、多态性的特点。类是具有相同或相似性质的对象的抽象。因此，对象的抽象是类，类的具体化就是对象，也可以说类的实例是对象。
- 面向对象是把构成问题的的事物分解成各个对象，建立对象不是为了完成一个步骤，而是为了描述某个事物在整个解决问题的过程中的行为。
- 优点：易维护、复用、扩展
- 缺点：性能低：因为在创建类的实例需要很大的开销。
13.普通函数和构造函数的区别
- 返回值类型的区别：
  - 构造函数是没有返回值类型的
  - 普通函数是有返回值类型的，即使函数没有返回值，返回值类型也要写上void。
- 函数名的区别：
  - 构造函数的函数名必须要与类名一致，习惯首字母大写
  - 普通函数的函数名只要符合标识符的命名规则即可。
- 调用方式的区别：
  - 构造函数是在创建对象的时候由new关键字调用的
  - 普通函数是由我们使用对象调用的，一个对象可以调用多次普通函数
- 作用上的区别：
  - 构造函数用于初始化一个对象。
  - 普通函数是用于描述一类事物的公共行为。
14.请简述原型/原型链/继承
- 原型：每一个构造函数都有一个prototype属性，这个属性会在生成实例的时候，成为实例对象的原型对象。javascript的每个对象都继承另一个对象，后者称为“原型”（prototype）对象。
- 原型链：每一个对象都有一个__proto__属性，对象的属性和方法，有可能定义在自身，也有可能定义在它的原型对象。由于原型本身也是对象，又有自己的原型，所以形成了一条原型链（prototype chain）。（“原型链”的作用是：读取对象的某个属性时，JavaScript 引擎先寻找对象本身的属性，如果找不到，就到它的原型去找，如果还是找不到，就到原型的原型去找。如果直到最顶层的Object.prototype还是找不到，则返回undefined。举例来说，如果让某个函数的prototype属性指向一个数组，就意味着该函数可以当作数组的构造函数，因为它生成的实例对象都可以通过prototype属性调用数组方法。）
- 继承：继承就是在子类构造函数中继承父类构造函数的私有属性和原型属性。我们在子类构造函数中使用call或apply方法调用父类构造函数并改变其this指向为子类构造函数的this，此时子类的构造函数就继承了父类的私有属性和私有方法。将父类的实例化对象赋值给子类的原型对象，此时子类就继承了父类的原型属性和原型方法。
15.Promise的理解
- Promise是一种异步操作的解决方案，将写法复杂的传统的回调函数和监听事件的异步操作，用同步代码的形式表达出来。避免了多级异步操作的回调函数嵌套。
  - 1、主要用于异步计算
  - 2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果
  - 3、可以在对象之间传递和操作promise，帮助我们处理队列
- Promise是一个对象，它的内部其实有三种状态。
  - 初始状态（ pending ）。
  - 已完成（ resolve）： resolve 方法可以使 Promise 对象的状态改变成成功
  - 已拒绝（ reject ）： reject 方法则是将 Promise 对象的状态改变为失败
- Promise常用的三种方法
  - 第一种：then 表示异步成功执行后的数据状态变为resolve
  - 第二种：catch表示异步失败后执行的数据状态变为reject
  - 第三种：all表示把多个没有关系的Promise封装成一个Promise对象使用then返回一个数组数据。
- Promise 构造函数有两个变量 resolve 用于返回异步执行成功的函数 reject 用于返回异步执行失败的函数,配合then与catch一起使用
16.Promise在哪里使用过
- 1.Ajax异步请求的时候
- 2.函数嵌套层级多的时候使用promise，优点在于，回调函数变成了链式写法，程序的流程可以看得很清楚，而且有一整套的配套方法，可以实现许多强大的功能。
17.请简述async的用法
- async 用于声明一个 function 是异步的，而 await 用于等待一个异步方法执行完成，async返回的是一个Promise对象。
- async的主要作用是回调地狱的处理看起来比promise更美观，而且使用async来传参的时候比较方便。
- async函数必须要等到方法体中所有的await声明Promise函数执行完后，async函数才会得到一个resolve状态的Promise对象。
- async/await在遇到异步请求的情况下，能让代码以看似同步的方式来解决异步回调
- 使用步骤：
  - 1、定义一个需要进行异步等待的方法，并在方法前加"async"关键字
  - 2、在这个内部有异步请求的方法中用await等待相应的请求完成。
  - 3、在这个异步请求的方法中返回一个Promise对象，并封装resolve和reject方法
jQuery相关的知识
- jQuery:类库(工具箱):宗旨是write less do more，功能：DOM操作，DOM获取，动画，数据交互(ajax),链式调用
- jQuery对象到底是啥？是一个类数组。所有数组成员都是原生JS节点。jQuery和原生js节点的属性和方法互不通用。是一个兼容多浏览器的javascript库（函数库），核心理念是write less,do more(写的更少，做的更多)。
- 特点：是一个快速的简洁的javascript框架，可以简化查询DOM对象、处理时间、制作动画、处理Ajax交互过程
  - 1.提供了强大的功能函数
  - 2.解决浏览器兼容性问题
  - 3.纠正错误的脚本知识
  - 4.体积小，使用灵巧（只需引入一个js文件）
  - 5.易扩展、插件丰富
- 作用：
  - 程序员角度：简化Javascript和Ajax编程，能够使程序员从设计和书写繁杂的JS应用中解脱出来，将关注点转向功能需求而非实现细节上，从而提高项目的开发速度。
  - 用户体验角度：改善了页面视觉效果，增强了与页面的交互性，体验更绚丽的网页物资方便地选择页面元素(模仿CSS选择器更精确、灵活) 动态更改页面样式/页面内容(操作DOM，动态添加、移除样式) 控制响应事件(动态添加响应事件) 提供基本网页特效(提供已封装的网页特效方法) 快速实现通信(ajax)。
- jQuery获取方式： jQuery库文件不需要安装，只需使用

三阶段

Vue

1.Vue的核心是什么
- 数据驱动和组件化
2.请简述你对vue的理解
- 定义：vue是一套构建用户界面的渐进式的自底向上增量开发MVVM框架，Vue的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。通过尽可能简单的API实现响应的数据绑定和组合的视图组件。
- 优点：轻量级、高效率、上手快、简单易学、文档全面而简洁
- 目的：解决数据绑定问题；Vue.js主要的目的是为了开发大型单页面应用；支持组件化，也就是可以把页面封装成为若干个组件，把组件进行拼装，这样是让页面的复用性达到最高
- 核心思想：数据驱动、组件化
- 优势：简洁：HTML模板 + Vue实例 + JSON数据；轻量：17kb，性能好；设计思想：视图与数据分离，无需操作DOM；社区：大量的中文资料和开源案例
3.请简述vue的单向数据流
- 数据从父级组件传递给子组件，只能单向绑定。子组件内部不能直接修改从父级传递过来的数据。
  所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。
  每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。
4.Vue常用的修饰符有哪些
- 按键修饰符 .up,.down,.ctrl,.enter,.space等等
  - 语法：@click.修饰符=‘fn()’
- 事件修饰符
  - prevent修饰符：阻止事件的默认行为（submit提交表单）
  - stop修饰符：阻止事件冒泡
  - capture修饰符：与事件冒泡的方向相反，事件捕获由外到内
  - self：只会触发自己范围内的事件，不包含子元素
  - once：只会触发一次
  - 注意：修饰符可以串联使用
5.v-text与{ {}}区别
- v-text是操作网页元素中的纯文本内容，{ {}}是它的另外一种写法，v-text与{ {}}等价，{ {}}叫模板插值，v-text叫指令，有一点区别就是，在渲染的数据比较多的时候，可能会把大括号显示出来，俗称屏幕闪动。
- 解决屏幕闪动的方法：
  1. 使用v-text渲染数据；
  2. 使用{ {}}语法渲染数据，但是同时使用v-cloak指令（用来保持在元素上直到关联实例结束时候进行编译），v-cloak并不需要添加到每个标签，只要在el挂载的标签上添加就可以,并且为[v-cloak]添加css样式为display:none;
6.v-on可以绑定多个方法吗
- 可以绑定多个方法，中间用逗号隔开
7.Vue循环的key作用
- vue中循环需加 :key=“唯一标识” ，唯一标识可以指item里面id、index 等，因为vue组件高度复用增加key可以标识组件的唯一性，为了更好地区别各个组件，key的作用主要是为了高效的更新虚拟DOM
- 为遍历数组或元素中的唯一标识，增加或删减元素时，通过这个唯一标识key判断是否是之前的元素，vue会直接对已有的标签进行复用，不会整个的将所有的标签全部重新删除和创建,只会重新渲染数据，然后再创建新的元素直到数据渲染完为止
8.什么是计算属性
- 首先它是一种属性，其次它有“计算”这个特殊性质。每次取得它的值的时候，它不像普通属性那样直接返回结果，而是经过一系列的计算之后再返回结果。同时只要在它的当中引用了data中的某个属性，当这个属性发生变化时，计算属性会自动重新执行。
9.Vue单页面的优缺点
- 优点：
  - 用户体验好，快，内容的改变不需要重新加载整个页面，对服务器压力较小。
  - 前后端分离，比如vue项目
  - 完全的前端组件化，前端开发不再以页面为单位，更多地采用组件化的思想，代码结构和组织方式更加规范化，便于修改和调整；
- 缺点：
  - 不支持低版本浏览器
  - 首次加载页面的时候需要加载大量的静态资源，这个加载时间相对比较长。
  - 不利于SEO（搜索引擎）优化，单页页面，数据在前端渲染，就意味着没有 SEO。
  - 页面导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）

10.Vuex是什么？怎么使用？在那种场景下使用

Vuex是一个专为 Vue.js 应用程序开发中管理的一个模式。通过创建一个集中的数据存储，方便程序中的所有组件进行访问。

使用：

在store下的index.js中 Vue.use(Vuex)

创建store实例

 export default new Vuex.Store({
           
   state: {
           },//存放数据
   mutations: {
           },//修改数据的值
   actions: {
           },//执行异步操作请求数据
   modules: {
           },//让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。
   getters:{
           }//计算属性
 })

vuex只能用于单个页面中不同组件（例如兄弟组件）的数据流通。

11.Vue中路由跳转方式（声明式/编程式）
- 使用this.$router全局路由的push()方法进行路由跳转–称之为编程式跳转；
- 使用router-link进行跳转路由–称之为声明式跳转

12.跨域的解决方式

方法1.后端解决跨域CORS（跨域资源共享）(在server.js中添加)

    app.use("/", (req, res, next) => {
         
        res.header('Access-Control-Allow-Origin', '*');
        res.header('Access-Control-Allow-Headers', 'Content-Type,Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
        res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE,OPTIONS');
        next()
    })

方法2.使用JQuery提供的jsonp

网页中添加一个script元素，向服务器请求json数据，这种做法不受同源策略的限制，服务器接收到请求后，把数据放在一个指定名字的回调函数里传递回来

    methods: {
          
      getData () {
          
        var self = this 
        $.ajax({
          
          url: 'http://f.apiplus.cn/bj11x5.json', 
          type: 'GET', 
          dataType: 'JSONP', 
          success: function (res) {
          
            self.data = res.data.slice(0, 3) 
            self.opencode = res.data[0].opencode.split(',') 
          } 
        }) 
      } 
    }

方法3.proxyTable解决跨域（项目使用vue-cli脚手架搭建）

在vue.config.js中中添写如下代码

    proxy: {
           
        '/api': {
           
          target: 'http://localhost:3000/', //对应自己的接口
          changeOrigin: true,
          ws: true,
          pathRewrite: {
           
            '^/api': ''
          }
        } 
    }

13.Vue的生命周期请简述
- Vue实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。
14.Vue生命周期的作用
- 生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易完成指定逻辑。每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。（ps：生命周期钩子就是生命周期函数）例如，如果要通过某些插件操作DOM节点，如想在页面渲染完后弹出广告窗，那我们最早可在mounted 中进行。
15.DOM渲染在哪个生命周期阶段内完成
- DOM渲染在mounted中就已经完成了，原因：在created的时候，视图中的html并没有渲染出来，所以此时如果直接去操作html的dom节点，一定找不到相关的元素，而在mounted中，由于此时html已经渲染出来了，所以可以直接操作dom节点。
16.Vue路由的实现
- hash模式和 history模式
17.Vue路由模式hash和history，简单讲一下
- hash模式：hash模式url里面永远带着#号，我们在开发当中默认使用这个模式
- history模式：history模式没有#号，是个正常的url适合推广宣传。
- 区别
  - url显示
    - hash：有#，很low
    - history：无#，好看
  - 回车刷新
    - hash：可以加载到hash值对应页面
    - history：一般就是404刷新掉了
  - 支持版本
    - hash：支持低版本浏览器和IE浏览器
    - history：HTML5新推出的API

18.Vue路由传参的两种方式，params和query方式与区别

params方式

匹配参数（在路由规则中）
- 动态路径参数
  - 使用动态路由匹配中的动态路径参数来进行路由配置
  - 注意：动态路径参数以冒号:开头
```
  {
              path: '/info:aa',name: 'Info',component: Info} //在router下的index.js中,aa表示随意绑定的参数
```

发送数据（绑定参数）

声明式

  <router-link :to="{name:'tema',params:{id:'参数1',name:'参数2'}}">index</router-link>

编程式(推荐)

  this.$router.push({
             name:'tema',params:{
             id:'参数1',name:'参数2'}})

注意：params只能通过路由配置中的name属性来引用路由

接收数据（获取路由传入参数）

  {
           {
           this.$route.params.id}} //在接收页面添加,id指的是在路由规则里绑定的参数

query方式

路由参数不需要添加内容

发送数据（绑定参数）

声明式

    <router-link :to="/home?id=参数1&name=参数2">index</router-link>
    //通过name引用路由
    <router-link :to="{name:'tema',query:{id:'参数1',name:'参数2'}}">index</router-link>（推荐）
    //通过path引用路由
    <router-link :to="{path:'/home',query:{id:'参数1',name:'参数2'}}">index</router-link>

编程式

    this.$router.push("/home?id=参数1&name=参数2");
    //通过name引用路由
    this.$router.push({
             name:'tema',query:{
             id:'参数1',name:'参数2'}});
    //通过path引用路由
    this.$router.push({
             path:'/home',query:{
             id:'参数1',name:'参数2'}});

接收数据（获取路由传入参数）

  {
           {
           this.$route.query.id}} //在接收页面添加,id指的是在路由规则里绑定的参数

prams和query方式与区别
- 用法上的：query可以用name也可以用path来引入，params要用name来引入，接收参数都是类似的，分别是this. $r o u t e . q u e r y . n a m e 和 t h i s .$ route.params.name。
- url展示上：params类似于post，query更加类似于我们ajax中get传参，说的再简单一点，前者在浏览器地址栏中不显示参数，后者显示，所以params传值相对安全一些。

19.Vue数据绑定的几种方式
- 普通文本绑定：双大括号法/插值表达式 { {}}或者使用v-text指令绑定，以文本的形式输出
- 解释HTML标签的绑定：使用v-html绑定
- 将数据绑定到标签的属性上：使用v-bind :属性名=“变量”来绑定

20.Vue注册一个全局组件

全局组件

作用域：全局范围内均可使用
建议：组件名（字母全小写且必须包含一个连字符）

语法

    Vue.component('name',{
           
        template:'
'
    })

位置：创建实例前定义全局组件
template的设置
- template:‘html代码’
- template:’#template1’ 引用template内容

数据的定义：

    data:function(){
           
        return {
           a:1,b:2}
    }

函数的定义：

    methods:{
           
        函数名:function(){
           }
    }

21.Vue的路由钩子函数/路由守卫有哪些

全局前置守卫

当一个导航触发时，全局前置守卫(在进入组件之前)按照创建顺序调用。
vue-router 提供的 router.beforeEach（(to，from，next)=>{}）可以方便地实现全局前置导航守卫
- to：即将要进入的目标路由对象
- from:当前导航正要离开的路由
- next:下一步执行

    router.beforeEach((to,from,next)=>{
       
    //根据用户的登录状态限制用户是否能跳转到首页面
        if(to.path=="/login"||to.path=="/register"){
       
            next()
        } else {
       
            alert("当前为付费页面 请登录后访问！")
            next("/login")
        }
    })

全局后置钩子
- 当一个导航触发时，全局后置钩子(在进入组件之后)调用。
- vue-router提供的router.afterEach((to,from)=>{})实现全局后置守卫
  - to：即将要进入的目标路由对象
  - from:当前导航正要离开的路由
```
    router.afterEach((to,from)=>{
           
        console.log("我是全局后置钩子");
    })
```

路由独享的守卫

与全局前置守卫相比路由独享守卫只是对当前路由进行单一控制参数和全局前置守卫相同

在路由配置上直接定义beforeEnter进行路由独享守卫定义

    {
           
        path:'/shop',
        name:'Shop',
        component:Shop,
        beforeEnter:(to,from,next)=>{
           
            //判断是否登录过
            alert("当前页面是vip页面！请登录")
            next("/login")
        }
    }

组件内的守卫（只对当前组件生效）

beforeRouteEnter在进入组件前调用（不常用）
- 在组件中使用beforeRouteEnter(to,from,next){}来进行进入组建前的钩子

beforeRouteLeave离开路由之前（常用）

在组件中使用beforeRouteLeave(to,from,next){}来进行离开组件的钩子

    beforeRouteLeave(to,from,next){
           
        if(confirm("你确定要离开吗")){
           
        next()
        }else{
           
        //不进行下一步（也就是不从当前路由离开）
            next(false)
        }
    }

22.Vue中如何进行动态路由设置？有哪些方式？怎么获取传递过来的数据？

params方式

匹配参数（在路由规则中）
- 动态路径参数
  - 使用动态路由匹配中的动态路径参数来进行路由配置
  - 注意：动态路径参数以冒号:开头
```
  {
              path: '/info:aa',name: 'Info',component: Info} //在router下的index.js中,aa表示随意绑定的参数
```

发送数据（绑定参数）

声明式

  <router-link :to="{name:'tema',params:{id:'参数1',name:'参数2'}}">index</router-link>

编程式(推荐)

  this.$router.push({
             name:'tema',params:{
             id:'参数1',name:'参数2'}})

注意：params只能通过路由配置中的name属性来引用路由

接收数据（获取路由传入参数）

  {
           {
           this.$route.params.id}} //在接收页面添加,id指的是在路由规则里绑定的参数

query方式

路由参数不需要添加内容

发送数据（绑定参数）

声明式

    <router-link :to="/home?id=参数1&name=参数2">index</router-link>
    //通过name引用路由
    <router-link :to="{name:'tema',query:{id:'参数1',name:'参数2'}}">index</router-link>（推荐）
    //通过path引用路由
    <router-link :to="{path:'/home',query:{id:'参数1',name:'参数2'}}">index</router-link>

编程式

    this.$router.push("/home?id=参数1&name=参数2");
    //通过name引用路由
    this.$router.push({
             name:'tema',query:{
             id:'参数1',name:'参数2'}});
    //通过path引用路由
    this.$router.push({
             path:'/home',query:{
             id:'参数1',name:'参数2'}});

接收数据（获取路由传入参数）

  {
           {
           this.$route.query.id}} //在接收页面添加,id指的是在路由规则里绑定的参数

23.Elementui中的常用组件有哪些？请简述你经常使用的并且他们的属性有哪些？
- Container 布局容器：用于布局的容器组件，方便快速搭建页面的基本结构
  - ：外层容器。当子元素中包含或时，全部子元素会垂直上下排列，否则会水平左右排列
  - ：顶栏容器
  - ：侧边栏容器
  - ：主要区域容器
  - ：底栏容器
- Dropdown 下拉菜单：将动作或菜单折叠到下拉菜单中
  - :下拉按钮
  - 下拉菜单
  - 下拉项
    - divided分隔
- NavMenu 导航菜单：为网站提供导航功能的菜单
  - :导航菜单
  - :导航按钮
  - 标题和名称

web前端知识点总结html，css，js，vue，react/面试题会经常问到

一阶段

二阶段

三阶段

Vue

React

你可能感兴趣的:(大前端,css,javascript,html5,vue.js)