前端面试（总结）

时间 2019-11-11

标签前端面试总结栏目快乐工作繁體版

原文原文链接

HTML/CSS部分javascript

一、什么是盒子模型？php

一个空间由几部分组成：边框、内边距、外边距、内容。css

二、行内元素有哪些？块级元素有哪些？空元素有哪些？html

行内元素：a、b、span、img、input、strong、select、label、em、button、textarea前端

块级元素：div、ul、li、p、h1、h2、h3、h4、h5、h6vue

空元素：input、img、br、hr、meta、linkjava

三、css元素的垂直居中node

<1>divParent{position:relative}jquery

divChild{webpack

width:400px;

height:400px;

position:absolute;

top:50%;

left:50%;

margin-left:-200px;

margin-top:-200px;

}

<2>divBox{

display:table-cell;

Vertical:middle;

Text-align:center;

}

<3>divParent{

Width:800px;

Height:800px;

Display:flex;

Justify-content:center;

Align-items:center;

}

<4>divParent{

Width:800px;

Height:800px;

Position:relative;

}

divChild{

Width:200px;

Height:200px;

Position:absolute;

Margin:auto;

Top:0;

Bottom:0;

Left:0;

Right:0;

}

四、什么是css Hack？

通常针对不一样浏览器写不一样的css，就是css Hack。分为三种：条件hack、属性hack、选择符hack；

条件hack

属性hack

.test{

Color:#909090\9;/*IE8*/

}

五、什么是优雅降级和渐进加强？

优雅降级：开始构建完整的项目，后期针对低版本浏览器进行兼容；

渐进加强：针对低版本浏览器构建页面，保证最基本功能，而后针对高级浏览器进行效果、交互等改进和追加功能达到更好的体验。

六、 display属性和 visibility属性的区别？

Display：inlin-block像内联元素同样显示,none不显示不占空间,block像块级元素同样显示;

Visibility:hidden;仅仅是视觉上透明不显示，空间位置占据

7、对CSS3有了解吗？列举几个CSS3的新特性并简要描述

CSS3做为CSS技术的升级版本，着力于模块化发展，将规范分解为一些小的模块，如选择器、盒子模型、列表模块、背景和边框等；并加入了不少新的模块和属性，好比赋值选择器、文字阴影、边框圆角、边框阴影、渐变、过渡、多栏布局、2D/3D转换、动画等。

其中，CSS3提供了一些复杂选择器，用于实现页面复杂状况下的元素选择，如属性选择器，一些伪类和伪元素选择器；渐变用于为元素设置渐变效果的背景；转换能够实现元素的变换，好比位移、缩放、旋转等；过渡能够实现简单的动画效果；动画属性则能够实现复杂的动画，能够实现逐帧制做动画。

8、CSS中link 和@import的区别是？

(1) link属于HTML标签，而@import是CSS提供的;

(2) 页面被加载的时，link会同时被加载，而@import被引用的CSS会等到引用它的CSS文件被加载完再加载;

(3) import只在IE5以上才能识别，而link是HTML标签，无兼容问题;

(4) link方式的样式的权重高于@import的权重.

9、box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box。

content-box：让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定，设置width/height属性指的是content部分的宽/高

border-box：让元素维持IE传统盒模型（IE6如下版本和IE6~7的怪异模式）。设置width/height属性指的是border + padding + content

十、右边固定宽度，左边自适应

第一种：

第二种：

11、浏览器的内核分别是什么?

IE: trident内核

Firefox：gecko内核

Safari：webkit内核

Opera：之前是presto内核，Opera现已改用Google Chrome的Blink内核

Chrome：Blink(基于webkit，Google与Opera Software共同开发)

12、sessionStorage 、localStorage 和 cookie 之间的区别

共同点：用于浏览器端存储的缓存数据

不一样点：

(1)、存储内容是否发送到服务器端：当设置了Cookie后，数据会发送到服务器端，形成必定的宽带浪费；

web storage,会将数据保存到本地，不会形成宽带浪费；

(2)、数据存储大小不一样：Cookie数据不能超过4K,适用于会话标识；web storage数据存储能够达到5M;

(3)、数据存储的有效期限不一样：cookie只在设置了Cookid过时时间以前一直有效，即便关闭窗口或者浏览器；

sessionStorage,仅在关闭浏览器以前有效；localStorage,数据存储永久有效；

(4) 、做用域不一样：cookie和localStorage是在同源同学口中都是共享的；sessionStorage不在不一样的浏览器窗口中共享，即便是同一个页面；

13、你所了解到的Web攻击技术

（1）XSS（Cross-Site Scripting，跨站脚本攻击）：指经过存在安全漏洞的Web网站注册用户的浏览器内运行非法的HTML标签或者JavaScript进行的一种攻击。
（2）SQL注入攻击
（3）CSRF（Cross-Site Request Forgeries，跨站点请求伪造）：指攻击者经过设置好的陷阱，强制对已完成的

Javascript部分

一、数组去重的经常使用方法

//遍历数组法

Function unique1(array){

Var str1=[];

For(var i=0;i<array.length;i++){

If(str1.indexOf(array[i])==-1){

Str1.push(array[i])

}

Return str1;

}

//先排序相邻去除法

Function unique2(array){

Array.sort();

Var str2=[array[0]];

For(var i=0;i<array.length;i++){

If(array[i]!==str2[str2.length-1]){

Str2.push(array[i])

}

Return str2;

}

//对象键值对法

Function unique3(array){

Var obj={},str3=[];

For(var i=0;i<array.length;i++){

If(!obj[array[i]]){

Str3.push(array[i]);

Obj[array[i]]=1;

}

Return str3;

}

二、克隆函数

Function clone(obj){

Var o;

Switch(typeOf obj){

Case “undefined”:

Break;

Case “string”:o=obj+””;

Break;

Case “number”:o=obj-0;

Break;

Case “boolean”:o=obj;

Break;

Case “object”:

If(obj===null){

o=null;

}else {

If(Object.prototype.toString.call(obj).slice(8,-1)===”Array”){

O=[];

For(var i=0;i<obj.length;i++){

O.push(clone(obj[i]))

}

}else{

O={};

For(var key in obj){

O[key]=clone(obj[key])

}

Break;

Default :o=obj;

Break;

}

Return o;

}

3、排序

//冒泡排序
function subSort(arr1){
    for(var i=0;i<arr1.length;i++){
        for(var j=0;j<arr1.length-1;j++){
            if(arr1[j]>arr1[j+1]){//相邻元素对比
                var temp=arr1[j+1];
                arr1[j+1]=arr1[j];
                arr1[j]=temp;
            }
        }
    }
    return arr1;
}
var arr1=[3,5,9,8,11,55,22,44,12,23]
console.log(subSort(arr1))

//选择排序
function selectionSort(arr2){
    var temp,minIndex
    for(var i=0;i<arr2.length-1;i++){
        minIndex=i;
        for(var j=i+1;j<arr2.length;j++){
            if(arr2[j]<arr2[minIndex]){
                minIndex=j
            }
        }
        temp=arr2[i]
        arr2[i]=arr2[minIndex]
        arr2[minIndex]=temp
    }
    return arr2
}
var arr2=[3,44,38,5,47,15,36,26,27,2,46,4,19,50,48];
console.log(selectionSort(arr2));

//插入排序
function insertionSort(array) {
    for (var i = 1; i < array.length; i++) {
        var key = array[i];
        var j = i - 1;
        while ( array[j] > key) {
            array[j + 1] = array[j];
            j--;
        }
        array[j + 1] = key;
    }
    return array;
}
var arr3=[3,44,38,5,47,15,36,26,27,2,46,4,19,50,48];
console.log(insertionSort(arr3));

4、DOM操做——怎样添加、移除、移动、复制、建立和查找节点。

（1）建立新节点

createDocumentFragment() //建立一个DOM片断

createElement() //建立一个具体的元素

createTextNode() //建立一个文本节点

（2）添加、移除、替换、插入

appendChild()

removeChild()

replaceChild()

insertBefore() //并无insertAfter()

（3）查找

getElementsByTagName() //经过标签名称

getElementsByName() //经过元素的Name属性的值(IE容错能力较强，

会获得一个数组，其中包括id等于name值的)

getElementById() //经过元素Id，惟一性

5、建立ajax的过程

(1)建立`XMLHttpRequest`对象,也就是建立一个异步调用对象.

(2)建立一个新的`HTTP`请求,并指定该`HTTP`请求的方法、`URL`及验证信息.

(3)设置响应`HTTP`请求状态变化的函数.

(4)发送`HTTP`请求.

(5)获取异步调用返回的数据.

(6)使用JavaScript和DOM实现局部刷新.

Function loadShow(){

Var xmlHttp;

If(window.MXLHTTPRequest){

xmlHttp=new XMLHTTPRequest();

}else{

xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”)

};

xmlHttp.onreadystatechange=function(){

If(xmlHttp.readyState===4&&xmlHttp.status===200){

Document.getElementById(“ID”).innerHTML=xmlHttp.responseText

}

};

xmlHttp.open(‘GET’,’demo.php’,true);

xmlHttp.send()

}

$.ajax({

Url:”请求地址”，

dataType:”xml jsonp json text html script”,//数据类型

Anysnc:”true”,//是否异步

Data:{‘’:’’},

Type:”GET”,//请求格式

Beforesendfunction(){},

Success:function(){},

Completefunction(){},

Error:function(){}

})

6、ajax的缺点

（1）ajax不支持浏览器back按钮。

（2）安全问题 AJAX暴露了与服务器交互的细节。

（3）对搜索引擎的支持比较弱。

（4）破坏了程序的异常机制。

（5）不容易调试。

7、GET和POST的区别，什么时候使用POST？

GET：通常用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，通常在2000个字符

POST：通常用于修改服务器上的资源，对所发送的信息没有限制。

GET方式须要使用Request.QueryString来取得变量的值，而POST方式经过Request.Form来获取变量的值，也就是说Get是经过地址栏来传值，而Post是经过提交表单来传值。

然而，在如下状况中，请使用 POST 请求：

没法使用缓存文件（更新服务器上的文件或数据库）

向服务器发送大量数据（POST 没有数据量限制）

发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

8、HTTP状态码：

100 Continue 继续，通常在发送post请求时，已发送了http header以后服务端将返回此信息，表示确认，以后发送具体参数信息

200 OK 正常返回信息

201 Created 请求成功而且服务器建立了新的资源

202 Accepted 服务器已接受请求，但还没有处理

301 Moved Permanently 请求的网页已永久移动到新位置。

302 Found 临时性重定向。

303 See Other 临时性重定向，且老是使用 GET 请求新的 URI。

304 Not Modified 自从上次请求后，请求的网页未修改过。

400 Bad Request 服务器没法理解请求的格式，客户端不该当尝试再次使用相同的内容发起请求。

401 Unauthorized 请求未受权。

403 Forbidden 禁止访问。

404 Not Found 找不到如何与 URI 相匹配的资源。

500 Internal Server Error 最多见的服务器端错误。

503 Service Unavailable 服务器端暂时没法处理请求（多是过载或维护）。

9、javascript继承的优缺点：

（1）原型链继承：字面量重写原型会中断关系，子类型没法给超类型传参

function Animal(){

　　　this.species = "动物";

}

function Cat(name,color){

　　　this.name = name;

　　　this.color = color;

}

Cat.prototype = new Animal();

//咱们将Cat的prototype对象指向一个Animal的实例。

Cat.prototype.constructor = Cat;

//它至关于彻底删除了prototype 对象原先的值，而后赋予一个新值

　　var cat1 = new Cat("大毛","黄色");

　　alert(cat1.species); // 动物

（2）借用构造函数继承：能够传参，但没有原型，没法复用

function Animal(){

　　　this.species = "动物";

　}

function Cat(name,color){

　　　Animal.apply(this, arguments);

//使用call或apply方法，将父对象的构造函数绑定在子对象上

　　　this.name = name;

　　　this.color = color;

　}

　var cat1 = new Cat("大毛","黄色");

　alert(cat1.species); // 动物

（3）组合继承（原型链和构造函数）

10、简述一次完整的HTTP请求是怎样一个过程？

（1）域名解析：解析域名为对应的ip地址（首先浏览器自身DNS缓存，没有则会针对系统DNS缓存，再没有则尝试读取hosts文件）

（2）发起tcp3次握手（得到ip地址后，浏览器会以一个随机端口向服务器的web程序发起tcp请求连接）

（3）创建tcp链接后发起http请求

（4）服务器端响应HTTp请求，浏览器获得html代码

（5）浏览器解析HTML代码，渲染呈现给用户

11、先后端数据交互的4种方式：

（1）利用cookie对象

Cookie是服务器保存在客户端的一小段数据信息。使用cookie有一个前提，就是客户端浏览器容许使用cookie并对此作出相应设置。（通常不同意使用cookie）

《后台代码》

Cookie cookie=new Cookie(“name”,”Hello”);

Response.addCookie(cookie);

《前台代码》

Cookie[] cookies=request.getCookie();

for(int i=0;i<cookies.length;i++){

If(cookies[i].getName().toString().equals(“name”)){

Out.print(cookies[i].getValue());

}

12、tap和click事件的区别？

二者都会在点击时触发，但在web移动端click会有200-300ms的延时，因此要用tap代替click做为点击事件，singleTap和doubleTap分别做为单次点击和双击，可是使用tap会带来点透事件(事件穿透)。

13、es6的新特性：

<1>默认参数

<2>使用${NAME}语法来表示模板字符

<3>多行字符串

14、如何获取浏览器URL查询字符串中的参数

function showWindowHref(){

var sHref = window.location.href;

var args = sHref.split('?');

if(args[0] == sHref){

return "";

}

var arr = args[1].split('&');

var obj = {};

for(var i = 0;i< arr.length;i++){

var arg = arr[i].split('=');

obj[arg[0]] = arg[1];

}

return obj;

}

var href = showWindowHref(); // obj

console.log(href['name']); // xiaoming

15、js操做字符串函数

concat() – 将两个或多个字符的文本组合起来，返回一个新的字符串。

indexOf() – 返回字符串中一个子串第一处出现的索引。若是没有匹配项，返回 -1 。

charAt() – 返回指定位置的字符。

lastIndexOf() – 返回字符串中一个子串最后一处出现的索引，若是没有匹配项，返回 -1 。

match() – 检查一个字符串是否匹配一个正则表达式。

substr() 函数 -- 返回从string的startPos位置，长度为length的字符串

substring() – 返回字符串的一个子串。传入参数是起始位置和结束位置。

slice() – 提取字符串的一部分，并返回一个新字符串。

replace() – 用来查找匹配一个正则表达式的字符串，而后使用新字符串代替匹配的字符串。

search() – 执行一个正则表达式匹配查找。若是查找成功，返回字符串中匹配的索引值。不然返回 -1 。

split() – 经过将字符串划分红子串，将一个字符串作成一个字符串数组。

length – 返回字符串的长度，所谓字符串的长度是指其包含的字符的个数。

toLowerCase() – 将整个字符串转成小写字母。

toUpperCase() – 将整个字符串转成大写字母。

16、什么是跨域？跨域请求资源的方法有哪些？

//什么是跨域？

因为浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不一样即为跨域。存在跨域的状况：

网络协议不一样，如http协议访问https协议。

端口不一样，如80端口访问8080端口。

域名不一样，如qianduanblog.com访问baidu.com。

子域名不一样，如abc.qianduanblog.com访问def.qianduanblog.com。

域名和域名对应ip,如www.a.com访问20.205.28.90.

//跨域请求资源的方法：

(1)、porxy代理

定义和用法：proxy代理用于将请求发送给后台服务器，经过服务器来发送请求，而后将请求的结果传递给前端。

实现方法：经过nginx代理；

注意点：1、若是你代理的是https协议的请求，那么你的proxy首先须要信任该证书（尤为是自定义证书）或者忽略证书检查，不然你的请求没法成功。

(2)、CORS 【Cross-Origin Resource Sharing】

定义和用法：是现代浏览器支持跨域资源请求的一种最经常使用的方式。

使用方法：通常须要后端人员在处理请求数据的时候，添加容许跨域的相关操做。以下：

res.writeHead(200, {

"Content-Type": "text/html; charset=UTF-8",

"Access-Control-Allow-Origin":'http://localhost',

'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',

'Access-Control-Allow-Headers': 'X-Requested-With, Content-Type'

});

(3)、jsonp

定义和用法：经过动态插入一个script标签。浏览器对script的资源引用没有同源限制，同时资源加载到页面后会当即执行（没有阻塞的状况下）。

特色：经过状况下，经过动态建立script来读取他域的动态资源，获取的数据通常为json格式。

实例以下：

function testjsonp(data) {

console.log(data.name); // 获取返回的结果 }</script>

var _script = document.createElement('script');

_script.type = "text/javascript";

_script.src = "http://localhost:8888/jsonp?callback=testjsonp";

document.head.appendChild(_script);</script>

缺点：

　　1、这种方式没法发送post请求（这里）

2、另外要肯定jsonp的请求是否失败并不容易，大多数框架的实现都是结合超时时间来断定。

17、Array 对象方法

concat() 链接两个或更多的数组，并返回结果。

join() 把数组的全部元素放入一个字符串。元素经过指定的分隔符进行分隔。

pop() 删除并返回数组的最后一个元素。

shift() 删除并返回数组的第一个元素

push() 向数组的末尾添加一个或更多元素，并返回新的长度。

unshift() 向数组的开头添加一个或更多元素，并返回新的长度。

reverse() 颠倒数组中元素的顺序。

slice() 从某个已有的数组返回选定的元素

sort() 对数组的元素进行排序

splice() 删除元素，并向数组添加新元素。

toSource() 返回该对象的源代码。

toString() 把数组转换为字符串，并返回结果。

toLocaleString() 把数组转换为本地数组，并返回结果。

valueOf() 返回数组对象的原始值

18、相关程序计算题

判断一个字符串中出现次数最多的字符，统计这个次数

var str = 'asdfssaaasasasasaa';var json = {};for (var i = 0; i < str.length; i++) {

if(!json[str.charAt(i)]){

json[str.charAt(i)] = 1;

}else{

json[str.charAt(i)]++;

}

};var iMax = 0;var iIndex = '';for(var i in json){

if(json[i]>iMax){

iMax = json[i];

iIndex = i;

}

} console.log('出现次数最多的是:'+iIndex+'出现'+iMax+'次');

19、$(document).ready()方法和window.onload有什么区别？

(1)、window.onload方法是在网页中全部的元素(包括元素的全部关联文件)彻底加载到浏览器后才执行的。

(2)、$(document).ready() 方法能够在DOM载入就绪时就对其进行操纵，并调用执行绑定的函数。

20、jQuery的事件委托方法bind 、live、delegate、on之间有什么区别？

<1>、bind 【jQuery 1.3以前】

定义和用法：主要用于给选择到的元素上绑定特定事件类型的监听函数；

语法：bind(type,[data],function(eventObject))；

特色：

　　(1)、适用于页面元素静态绑定。只能给调用它的时候已经存在的元素绑定事件，不能给将来新增的元素绑定事件。

　　(2)、当页面加载完的时候，你才能够进行bind()，因此可能产生效率问题。

实例以下：$( "#members li a" ).bind( "click", function( e ) {} );

<2>、live 【jQuery 1.3以后】

定义和用法：主要用于给选择到的元素上绑定特定事件类型的监听函数；

语法：live(type, [data], fn);

特色：

　　(1)、live方法并无将监听器绑定到本身(this)身上，而是绑定到了this.context上了。

　　(2)、live正是利用了事件委托机制来完成事件的监听处理，把节点的处理委托给了document，新添加的元素没必要再绑定一次监听器。

　　(3)、使用live（）方法但却只能放在直接选择的元素后面，不能在层级比较深，连缀的DOM遍历方法后面使用，即$(“ul”").live...能够，但$("body").find("ul").live...不行；

实例以下：$( document ).on( "click", "#members li a", function( e ) {} );

<3>、delegate 【jQuery 1.4.2中引入】

定义和用法：将监听事件绑定在就近的父级元素上

语法：delegate(selector,type,[data],fn)

特色：

　　(1)、选择就近的父级元素，由于事件能够更快的冒泡上去，可以在第一时间进行处理。

　　(2)、更精确的小范围使用事件代理，性能优于.live()。能够用在动态添加的元素上。

实例以下：

$("#info_table").delegate("td","click",function(){/*显示更多信息*/});

$("table").find("#info").delegate("td","click",function(){/*显示更多信息*/});

<4>、on 【1.7版本整合了以前的三种方式的新事件绑定机制】

定义和用法：将监听事件绑定到指定元素上。

语法：on(type,[selector],[data],fn)

实例以下：$("#info_table").on("click","td",function(){/*显示更多信息*/});参数的位置写法与delegate不同。

说明：on方法是当前JQuery推荐使用的事件绑定方法，附加只运行一次就删除函数的方法是one()。

.bind(), .live(), .delegate(),.on()分别对应的相反事件为：.unbind(),.die(), .undelegate(),.off()

commonJS和AMD

CommonJS标准规定，一个单独的文件就是一个模块，模块内将须要对外暴露的变量放到exports对象里，能够是任意对象，函数，数组等，未放到exports对象里的都是私有的。用require方法加载模块，即读取模块文件得到exports对象。

1、var str = 'Hi';

function sayHi(name) {

console.log(str + ', ' + name + '!');

}

module.exports = sayHi;

2、var Hi = require('./hi');

Hi('Jack'); // Hi, Jack

AMD（Asynchronous Module Definition）异步加载模块。AMD标准规定，用define来定义模块，用require来加载模块：

define(id, [depends], factory);

require([module], callback);

例：define(['module1', 'module2'], function (module1, module2) {

return { … };

});

第一个参数id是你的模块名，上例省略。事实上这个id没什么用，就是给开发者看的。

第二个参数[depends]是该模块所依赖的其余模块，上例中该模块依赖另两个模块module1和module2。若是你定义的模块不依赖其余任何模块，该参数能够省略。

第三个参数factory，生产出（即return出）一个对象供外部使用（我看到有的资料里将该参数命名为callback，感受callback语义方面有点暧昧，命名成factory更贴切）。

require(['yourModule1', 'yourModule2'], function (yourModule1, yourModule2) {

});

第一个参数是须要加载的模块名，能够是一个数组，意思是加载多个模块。加载模块时，若是该模块的define里有[depends]参数，就会先加载[depends]里指定的依赖模块。加载完[depends]里的依赖模块后，运行define里的factory方法获得该模块的实例。而后将该实例依次传入第二参数callback做为参数。

第二个参数callback回调函数，参数是根据第一个参数，依次加载模块后获得的实例对象。等第一个参数指定的模块所有加载完后，会执行该callback。

es6箭头函数

() => console.log('Hello')

function(){

console.log(“hello”)

}

VUE框架部分

一、v-show指令和v-if指令的区别？

条件渲染指令，与v-if不一样的是，不管v-show的值为true或者false，元素都会存在于HTML代码中，而v-if只有在为true时才会在HTML代码中存在，v-show设置css的style值

二、<style scoped></style>css代码只在当前组件起做用

三、指令keep-alive含义：在vue-router中写keep-alive保留状态，避免从新渲染

四、Vue.js组件

Vue.component(‘componentName’,{})//先注册组件

五、Vue.js（是一套构建用户界面的渐进式框架。与其余重量级框架不一样的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，而且很是容易学习，很是容易与其它库或已有项目整合。另外一方面，Vue 彻底有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

六、Vue.js特色：

简洁：页面由HTML模板+Json数据+Vue实例组成

数据驱动：自动计算属性和追踪依赖的模板表达式

组件化：用可复用、解耦的组件来构造页面

轻量：代码量小，不依赖其余库

快速：精确有效批量DOM更新

模板友好：可经过npm，bower等多种方式安装，很容易融入

七、vue的经常使用指令有哪些？

v-if、v-show、v-else、v-for、v-bind、v-on、v-model

8、vue router动态路由怎么传值，用什么获取？

9、vuex核心概念？

state => 基本数据
getters => 从基本数据派生的数据
mutations => 提交更改数据的方法，同步！
actions => 像一个装饰器，包裹mutations，使之能够异步。
modules => 模块化Vuex

1、active-class是哪一个组件的属性？嵌套路由怎么定义？

答：vue-router模块的router-link组件。

2、怎么定义vue-router的动态路由？怎么获取传过来的动态参数？

答：在router目录下的index.js文件中，对path属性加上/:id。使用router对象的params.id

3、vue-router有哪几种导航钩子？

答：三种，

一种是全局导航钩子：router.beforeEach(to,from,next)，做用：跳转前进行判断拦截。

第二种：组件内的钩子；

第三种：单独路由独享组件

4、scss是什么？在vue.cli中的安装使用步骤是？有哪几大特性？

答：css的预编译。

使用步骤：

第一步：用npm 下三个loader（sass-loader、css-loader、node-sass）

第二步：在build目录找到webpack.base.config.js，在那个extends属性中加一个拓展.scss

第三步：仍是在同一个文件，配置一个module属性

第四步：而后在组件的style标签加上lang属性，例如：lang=”scss”

有哪几大特性:1、能够用变量，例如（$变量名称=值）；2、能够用混合器，例如（）3、能够嵌套

5、mint-ui是什么？怎么使用？说出至少三个组件使用方法？

答：基于vue的前端组件库。npm安装，而后import样式和js，

vue.use（mintUi）全局引入。在单个组件局部引入：import {Toast} from ‘mint-ui’。

组件一：Toast(‘登陆成功’)；

组件二：mint-header；

组件三：mint-swiper

6、v-model是什么？怎么使用？ vue中标签怎么绑定事件？

答：能够实现双向绑定，指令（v-class、v-for、v-if、v-show、v-on）。

vue的model层的data属性。绑定事件：<input @click=doLog() />

7、axios是什么？怎么使用？描述使用它实现登陆功能的流程？

答：请求后台资源的模块。npm install axios -S装好，

而后发送的是跨域，需在配置文件中config/index.js进行设置。

后台若是是Tp5则定义一个资源路由。js中使用import进来，

而后.get或.post。返回在.then函数中若是成功，

失败则是在.catch函数中

8、axios+tp5进阶中，调用axios.post(‘api/user’)是进行的什么操做？axios.put(‘api/user/8′)呢？

答：跨域，添加用户操做，更新操做。

9、什么是RESTful API？怎么使用?

答：是一个api的标准，无状态请求。请求的路由地址是固定的，

若是是tp5则先路由配置中把资源路由配置好。标准有：.post .put .delete

10、vuex是什么？怎么使用？哪一种功能场景使用它？

答：vue框架中状态管理。在main.js引入store，注入。

新建了一个目录store，….. export 。

场景有：单页应用中，组件之间的状态。音乐播放、登陆状态、加入购物车

11、mvvm框架是什么？它和其它框架（jquery）的区别是什么？哪些场景适合？

答：一个model+view+viewModel框架，数据模型model，viewModel链接两个

区别：vue数据驱动，经过数据来显示视图层而不是节点操做。

场景：数据操做比较多的场景，更加便捷

12、自定义指令（v-check、v-focus）的方法有哪些？它有哪些钩子函数？还有哪些钩子函数参数？

答：全局定义指令：在vue对象的directive方法里面有两个参数，一个是指令名称，另一个是函数。组件内定义指令：directives钩子函数：bind（绑定事件触发）、inserted(节点插入的时候触发)、update（组件内相关更新）钩子函数参数：el、binding

13、说出至少4种vue当中的指令和它的用法？

答：v-if：判断是否隐藏；v-for：数据循环出来；v-bind:class：绑定一个属性；v-model：实现双向绑定

14、vue-router是什么？它有哪些组件？

答：vue用来写路由一个插件。router-link、router-view

15、导航钩子有哪些？它们有哪些参数？

答：导航钩子有：a/全局钩子和组件内独享的钩子。b/beforeRouteEnter、afterEnter、beforeRouterUpdate、beforeRouteLeave

参数：有to（去的那个路由）、from（离开的路由）、next（必定要用这个函数才能去到下一个路由，若是不用就拦截）最经常使用就这几种

16、Vue的双向数据绑定原理是什么？

答：vue.js 是采用数据劫持结合发布者-订阅者模式的方式，经过Object.defineProperty()来劫持各个属性的setter，getter，在数据变更时发布消息给订阅者，触发相应的监听回调。

具体步骤：

第一步：须要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter

这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化

第二步：compile解析模板指令，将模板中的变量替换成数据，而后初始化渲染页面视图，并将每一个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变更，收到通知，更新视图

第三步：Watcher订阅者是Observer和Compile之间通讯的桥梁，主要作的事情是:1、在自身实例化时往属性订阅器(dep)里面添加本身2、自身必须有一个update()方法3、待属性变更dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。

第四步：MVVM做为数据绑定的入口，整合Observer、Compile和Watcher三者，经过Observer来监听本身的model数据变化，经过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通讯桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变动的双向绑定效果。

ps：16题答案一样适合”vue data是怎么实现的？”此面试题。

17、请详细说下你对vue生命周期的理解？

答：总共分为8个阶段建立前/后，载入前/后，更新前/后，销毁前/后。

建立前/后：在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$el尚未。

载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但仍是挂载以前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。

更新前/后：当data变化时，会触发beforeUpdate和updated方法。

销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，可是dom结构依然存在

18、请说下封装 vue 组件的过程？

答：首先，组件能够提高整个项目的开发效率。可以把页面抽象成多个相对独立的模块，解决了咱们传统项目开发：效率低、难维护、复用性等问题。

而后，使用Vue.extend方法建立一个组件，而后使用Vue.component方法注册组件。子组件须要数据，能够在props中接受定义。而子组件修改好数据后，想把数据传递给父组件。能够采用emit方法。

19、你是怎么认识vuex的？

答：vuex能够理解为一种开发模式或框架。好比PHP有thinkphp，java有spring等。

经过状态（数据源）集中管理驱动组件的变化（比如spring的IOC容器对bean进行集中管理）。

应用级的状态集中放在store中；改变状态的方式是提交mutations，这是个同步的事物；异步逻辑应该封装在action中。

20、vue-loader是什么？使用它的用途有哪些？

答：解析.vue文件的一个加载器，跟template/js/style转换成js模块。

用途：js能够写es6、style样式能够scss或less、template能够加jade等

21、请说出vue.cli项目中src目录每一个文件夹和文件的用法？

答：assets文件夹是放静态资源；components是放组件；router是定义路由相关的配置;view视图；app.vue是一个应用主组件；main.js是入口文件

22、vue.cli中怎样使用自定义的组件？有遇到过哪些问题吗？

答：第一步：在components目录新建你的组件文件（smithButton.vue），script必定要export default {

第二步：在须要用的页面（组件）中导入：import smithButton from ‘../components/smithButton.vue’第三步：注入到vue的子组件的components属性上面,components:{smithButton}第四步：在template视图view中使用，<smith-button> </smith-button>问题有：smithButton命名，使用的时候则smith-button。

23、聊聊你对Vue.js的template编译的理解？

答：简而言之，就是先转化成AST树，再获得的render函数返回VNode（Vue的虚拟DOM节点）

详情步骤：

首先，经过compile编译器把template编译成AST语法树（abstract syntax tree 即源代码的抽象语法结构的树状表现形式），compile是createCompiler的返回值，createCompiler是用以建立编译器的。另外compile还负责合并option。

而后，AST会通过generate（将AST语法树转化成render funtion字符串的过程）获得render函数，render的返回值是VNode，VNode是Vue的虚拟DOM节点，里面有（标签名、子节点、文本等等）

24、vue的组件是怎么定义的？父组件怎么给子组件传值？

答：首先注册vue.components，第一个参数是组件名称，第二个参数是选项。

直接绑定一个属性，而后在子组件props里面接收

25、使用过element.ui吗？说下它其中两个组件的使用方法？

答：使用过用过一个布局的，它是由24份，它的写法是:span后面带的数字它占24份里面的宽度。:offset是它

的间距，后面也是跟数字，也是从24份里面取的。input按钮，标签是el-input，后面type跟上一个属性就是显示不一样按钮的类型，有默认的default

（默认的）、success（成功的）、warning（警告）、danger（危险）、info（）、primary（）

26、说下你对mvvm的理解？双向绑定的理解?

答：mvvm就是vm框架视图、m模型就是用来定义驱动的数据、v通过数据改变后的html、vm就是用来实现双向绑定

双向绑定:一个变了另一个跟着变了，例如：视图一个绑定了模型的节点有变化，模型对应的值会跟着变

27、说出你所使用过的vue指令

答：v-on（监听事件、@change、@click）、v-if（判断的）、v-show（显示/隐藏）、v-bind（绑定属性、:disabled、:src）

28、你以为怎样的自定义组件是完善的？至少说出4点

答：第一点、能够通用

第二点、代码尽可能简洁

第三点、容易修改

第四点、功能要多一点

1、请说下具体使用vue的理解？

答：1、使用vue没必要担忧布局更改和类名重复致使的js重写，由于它是靠数据驱动双向绑定，底层是经过Object.defineProperty() 定义的数据 set、get 函数原理实现。2、组件化开发，让项目的可拓展性、移植性更好，代码重用性更高，就好像农民工建房子，拿起本身的工具包就能够开工。项目经理坐等收楼就好。3、单页应用的体验零距离接触安卓原生应用，局部组件更新界面，让用户体验更快速省时。4、js的代码无形的规范，团队合做开发代码可阅读性更高。

2、你以为哪些项目适合vue框架？

答：1、数据信息量比较多的，反之相似企业网站就无需此框架了。

2、手机web和app应用多端共用一套界面的项目，由于使用vue.cli+webpack后的前端目录，很是有利于项目的跨平台部署。

3、怎么理解MVVM模式的这些框架？

答：1、M就是Model模型层，存的一个数据对象。2、V就是View视图层，全部的html节点在这一层。3、VM就是ViewModel，它经过data属性链接Model模型层，经过el属性链接View视图层。

4、PC端项目你会在哪些场景使用Vue框架？

答：上万级数据须要瀑布流更新和搜索的时候，由于数据庞大的时候，用原生的dom操做js和html都会有列表的html布局，迭代很困难。再一个dom节点的大面积添加会影响性能。那么vue为何解决这些问题呢？

第一：只需用v-for在view层一个地方遍历数据便可，无需复制一段html代码在js和html两个地方。第二：vue经过Virtual Dom就是在js中模拟DOM对象树来优化DOM操做。

vuex
1、vuex有哪几种属性？

答：有五种，分别是 State、 Getter、Mutation 、Action、 Module

2、vuex的State特性是？

答：

1、Vuex就是一个仓库，仓库里面放了不少对象。其中state就是数据源存放地，对应于与通常Vue对象里面的data

2、state里面存放的数据是响应式的，Vue组件从store中读取数据，如果store中的数据发生改变，依赖这个数据的组件也会发生更新

3、它经过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中

3、vuex的Getter特性是？

答：

1、getters 能够对State进行计算操做，它就是Store的计算属性

2、虽然在组件内也能够作计算属性，可是getters 能够在多组件之间复用

3、若是一个状态只在一个组件内使用，是能够不用getters

4、vuex的Mutation特性是？

答：

1、Action 相似于 mutation，不一样在于：

2、Action 提交的是 mutation，而不是直接变动状态。

3、Action 能够包含任意异步操做

5、Vue.js中ajax请求代码应该写在组件的methods中仍是vuex的actions中？

答：

1、若是请求来的数据是否是要被其余组件公用，仅仅在请求的组件内使用，就不须要放入vuex 的state里。

2、若是被其余地方复用，这个很大概率上是须要的，若是须要，请将请求放入action里，方便复用，并包装成promise返回，在调用处用async await处理返回的数据。若是不要复用这个请求，那么直接写在vue文件里很方便。

6、不用Vuex会带来什么问题？

答：

1、可维护性会降低，你要想修改数据，你得维护三个地方

2、可读性会降低，由于一个组件里的数据，你根本就看不出来是从哪来的

3、增长耦合，大量的上传派发，会让耦合性大大的增长，原本Vue用Component就是为了减小耦合，如今这么用，和组件化的初衷相背。

生命周期
1、什么是vue生命周期？

答： Vue 实例从建立到销毁的过程，就是生命周期。也就是从开始建立、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，咱们称这是 Vue 的生命周期。

2、vue生命周期的做用是什么？

答：它的生命周期中有多个事件钩子，让咱们在控制整个Vue实例的过程时更容易造成好的逻辑。

3、vue生命周期总共有几个阶段？

答：它能够总共分为8个阶段：建立前/后, 载入前/后,更新前/后,销毁前/销毁后

4、第一次页面加载会触发哪几个钩子？

答：第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

5、DOM 渲染在哪一个周期中就已经完成？
答：DOM 渲染在 mounted 中就已经完成了。

6、简单描述每一个周期具体适合哪些场景？

答：生命周期钩子的一些使用方法： beforecreate : 能够在这加个loading事件，在加载实例时触发 created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用 mounted : 挂载元素，获取到DOM节点 updated : 若是对数据统一处理，在这里写上相应函数 beforeDestroy : 能够作一个确认中止事件的确认框 nextTick : 更新数据后当即操做dom

axios
1、axios的特色有哪些？

答：

1、Axios 是一个基于 promise 的 HTTP 库，支持promise全部的API

2、它能够拦截请求和响应

3、它能够转换请求数据和响应数据，并对响应回来的内容自动转换成 JSON类型的数据

4、安全性更高，客户端支持防护 XSRF

2、axios有哪些经常使用方法？

答：

1、axios.get(url[, config]) //get请求用于列表和信息查询

2、axios.delete(url[, config]) //删除

3、axios.post(url[, data[, config]]) //post请求用于信息的添加

4、axios.put(url[, data[, config]]) //更新操做

3、说下你了解的axios相关配置属性？

答：

`url`是用于请求的服务器URL

`method`是建立请求时使用的方法,默认是get

`baseURL`将自动加在`url`前面，除非`url`是一个绝对URL。它能够经过设置一个`baseURL`便于为axios实例的方法传递相对URL

`transformRequest`容许在向服务器发送前，修改请求数据，只能用在'PUT','POST'和'PATCH'这几个请求方法

`headers`是即将被发送的自定义请求头

headers:{'X-Requested-With':'XMLHttpRequest'},

`params`是即将与请求一块儿发送的URL参数，必须是一个无格式对象(plainobject)或URLSearchParams对象

params:{ID:12345},

`auth`表示应该使用HTTP基础验证，并提供凭据

这将设置一个`Authorization`头，覆写掉现有的任意使用`headers`设置的自定义`Authorization`头

auth:{

username:'janedoe',

password:'s00pers3cret'

'proxy'定义代理服务器的主机名称和端口

`auth`表示HTTP基础验证应当用于链接代理，并提供凭据

这将会设置一个`Proxy-Authorization`头，覆写掉已有的经过使用`header`设置的自定义`Proxy-Authorization`头。

proxy:{

host:'127.0.0.1',

port:9000,

auth::{

username:'mikeymike',

password:'rapunz3l'

}