面试题总结(一)

vue的特点

1.国人开发的一个轻量级框架
2.双向数据绑定，在数据操作方面更简单
3.视图，数据，结构分离，不需要进行逻辑代码的修改，只需要操作数据就可以完成操作
4.组件化，方便封装和复用
5.虚拟DOM，不再使用原生的DOM操作节点，极大解放DOM操作

vue常用的指令和用法

1.v-model：双向数据绑定，一般用于表单元素
2.v-for：对数组和对象进行循环操作
3.v-on：进行事件的绑定，v-on：事件名 = ‘事件函数’。简写 @事件名 = ‘事件函数’
4.v-if/v-show = ‘Boolean’ ：用来显示和隐藏标签元素
区别：
v-show：通过给DOM元素设置display:none; 属性来实现
v-if：通过动态的添加和删除DOM元素来实现显示和影藏
5.v-bind：属性名 = “”进行属性的绑定。最常用的是:class,:style。：属性名 是简写形式
6.v-text/v-html 插值，区别是v-html可以识别标签，v-test不识别
7.v-once:只绑定一次

vue中父子组件传值

父组件向子组件:通过props属性，子组件通过props的属性接收从父组件传过来的值， 父组件传值的时候用tbind将子组件中绑定为data
子组件向父组件:使用事件绑定，通过this. $emit(方法来触发父组件在相应位置监听事件

vue-loader

是vue文件的一个加载器，将template/js/style转换成js模块。
用途: js可以写es6、style样式可以scss或less、template可以加jade

axios

npm install axios -ave装好，js中使用impor进来, 然后.get或.post。
成功返回在then函数中,失败则是在.catch函数中

vue常用的修饰符及作用

.prevent: 提交事件不再重载页面；
.stop: 阻止单击事件冒泡；
.self: 当事件发生在该元素本身而不是子元素的时候会触发；
.capture: 事件侦听，事件发生的时候会调用
.once：只会触发一次

MVVM开发模式的理解

MVVM分为Model，View，ViewModel
Model: 代表数据模型,数据和业务逻辑都在ModeI层中定义;
View: 代表UI视图，负责数据的展示;
ViewModel: 负责监听Model中数据的改变并且控制视图的更新，处理用户交互操作

前端如何优化网站性能

1.减少http请求数量
2.控制资源文件加载优先级
3.利用浏览器缓存
4.减少DOM操作
5.图标使用iconfont替换image标签

如何避免回调地狱

1.模块化，将回调函数转化成一个独立的函数
2.使用Promise
3.使用async和await

npm install xx -g -D -S

npm install xx：
不会配置到package.json，你需要自己require，之后运行npm install命令时，不会自动安装xx
npm install xx –D：
即写入devDependencies对象（里面的插件只用于开发环境，不用于生产环境）dev开头——开发环境，记住这个就行
npm install xx –S：
即写入dependencies对象（生产环境）
npm install xx –g：
即全局安装，你可以在任意文件夹使用这个xx，否则会报错”xx不是内部或外部的命令，也不是可运行的程序“

一次完整的http请求过程

1.域名解析
2.发送TCP的三次握手
3.建立TCP连接后发送http请求
4.服务器响应请求，浏览器获取html代码
5.解析html代码，请求资源
6.渲染并呈现给用户

link和@import的区别

1.link是HTML标签，除了可以加载css代码还可以定义其他事物，而@import属于css范畴，只可以加载css
2.link引入css时，与页面同时加载，而@import需等页面加载完后才加载
3.link无兼容性问题，@import在低版本的浏览器不兼容
4.link可以使用js操作DOM元素改变样式，而@import不可以

水平且垂直居中的方法

1.通过绝对定位的方式 absolute + 负margin

parent{
	position:relative;
}
child{
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-(子盒子宽的一半);
	margin-top:-(子盒子高的一半);
}

2.通过绝对定位的方式 absolute + margin auto

parent{
	position:relative;
}
child{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
}

3.absolute + transform （过渡）

parent{
	position:relative;
}
child{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}

4.table-cell实现水平垂直居中: table-cell middle center组合使用

parent{
	display:table-cell;
	text-align:center;
	vertiacl-align:middle;
}

5.弹性盒子的方式

parent{
	display:flex;
	justify-content:center;
	align-items:center;
}

border-box于content-box的区别

标准盒子模型:宽度=内容的宽度(content) + border + padding + margin
即：border-box 的 width 和 height 包括 padding 和 border
低版本IE盒子模型:宽度=内容宽度( cont ent+ bor der+padding) + margin
即：content-box 的 width 和 height 不包括 padding 和 border

css选择器与可以继承的属性

选择器：
id选择器(#box)，类选择器(.box)，标签选择器(div)，
子选择器(ul>li)，后代选择器(li a)，通配符选择器(*)，
伪类选择器(a:hover，li:nth-child)
可以继承的属性：font-size，font-family等字体属性
不可以继承的属性：border，padding，margin，width，height

css3新属性

background-image，background-size，background-repeat
文字阴影：text-shadow
圆角：border-radius
边框图片：border-image
盒子阴影：box-shadow

Px em rem 的区别

1、px实际上就是像素，与物理像素有一定的区别，用px设置字体大小，比较精确，但是有缺点，当浏览器页面缩放时，px并不能跟随变大。当前网页的布局就会被打破。
2、em是根据基准来缩放字体的大小。em是相对单位，一般都是以的字体大小作基准的。em是相对于父元素的属性来计算的，这样就会存在一个问题，就是每一层父元素都必须有它的数值。
3、而rem不同，rem是相对于根元素html,而此时我们只需要以rem为基准就可以了

强制类型转换与隐式类型转换

强制类型转换：Boolean,Number,String,parselnt,parseFloat
隐式类型转换：+,-,== , !

如何添加，移除，移动，复制，创建和查找节点

1）创建新节点：
createElement() //创建一个具体的元素
2)添加，移除
appendChild() //添加
removeChild() //移除
3)查找
document.getElementsByTagName() //通过标签名称获取的是数组
document.getElementsByName() //通过元素的Name属性的值
document.getElementByld) /通过元素ld，唯一性
document.querySelector("#id")查找元素，唯一性
document.querySelectorAll("#id”)查找元素，获取的是数组