详细面试题(1)

vue特点

1.是一款轻量级框架

2.双向数据分离，操作数据更简单

3.视图，数据，结构分离

4.组件化，方便封装和复用

5.虚拟DOM

vue父子组件传值

父组件传子组件使用props；子组件传父组件使用$emit

父组件引用子组件时，绑定v-bind把需要传递给子组件的数据，在props数组中定义一下，子组件就可以使用props数组中定义好的数据

子组件传父组件，利用$emit触发父组件传递过来的方法时，可以将子组件的数据当做参数传递给父组件

v-show和v-if指令的区别

v-show通过css中display：none；控制隐藏

v-if删除dom元素

频繁切换某节点使用v-show；不频繁切换某节点使用v-if

vue指令以及用法

v-model双向数据绑定 v-for循环 v-if v-show显示与隐藏 v-on事件 v-once只绑定一次

vue-loader以及它的用途

vue文件的一个加载器，将template/js/style转换成js模块。

用途：解析和转换.vue文件

axios怎么使用

Axios是一个基于 promise 的 HTTP 库

1.第一种方式全部导入

npm install axios --save安装

js中使用import引入 人后get或post方法，返回在.then函数中成功，失败在.catch函数中

2.方式按需引入

apm i axios 安装axios

main.js中加入以下代码

//引入axios

impotr axios  from 'axios'

//设置 axios 请求的根路径

axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/';

//挂载到原型上

Vue.prototyte.$http=axios

单页面应用和多页面应用区别

单页面：用户体验好，快，内容的改变不需要重新加载整个页面

多页面：指一个应用多个页面，页面跳转时整页刷新

vue常见的修饰符与作用

.stop：防止事件冒泡

.prevent：防止执行预设行为

.capture：事件捕获由外到内

.self：只触发自己范围内的事件，不包含子元素

.once：只会触发一次

MVVM开发模式

Model：代表数据模型

View：代表视图

ViewModel：负责监听

前端如何优化网站性能

使用精灵图；合并css和js文件；采用lazyLoad(懒加载)；控制资源文件加载优先级；浏览器储存在本地；减少DOM操作；图标使用lconFont替换image标签

vue样式绑定语法

对象方法：v-bind：class="{’'orange:‘isRipe’}"

数组方法：v-bind：class="{class1，class2}"

行内样式：v-bind：style="{color：color}"

如何避免回调地狱

使用promise

使用aync await

使用npm有哪些好处

1.通过npm，可以安装和管理项目依赖，并且能够指明依赖项的版本号

2.可以通过package.json文件来管理项目信息，配置脚本，以及指明依赖的具体版本

3.npm install xx -S 项目上线使用安装的插件

4.npm install xx -D 开发项目是使用的插件

5.npm uninstall xx 卸载插件

6.项目转化的时候，不会把node_modules包发过去，通过npm install安装依赖的包

vue每个生命周期具体适合那些场景

beforeCreate：data和methods中的数据没有初始化的情况下使用

create：data和methods中的数据初始化完毕，调用methods方法和操作data中的数据是使用

beforeMount：内存编译好了模板，但是还没有挂载到页面上时使用

mounted：通过插件操作Don节点时使用

beforeUpdate：页面还没有和最新的数据同步时使用

updated：页面和data中最新的数据同步时使用

beforeDestory：从运行阶段进入销毁阶段，这时data和methods，指令都可以用的状态下使用

destroyed：组件已经被销毁了时使用

vue页面跳转

this.$router.pust

如何清除数组里面重复的元素

创建一个空数组arr2[]

用for循环遍历arr1数组，把遍历到数放在arr2数组中

用indexof方法如果遍历到数没有在arr2中存在，就是用push方法添加到数组中，

如果存在就继续遍历

一次完整的HTTP事务过程

1.域名解析

2.发起TCP的3次捂手

3.建立TCP连接后发起http请求

4.服务器端响应http请求，浏览器得到html代码

5.浏览器解析html代码，并请求html代码中的资源

6.浏览器对页面进行渲染呈现给用户

link和@import的区别

都是外部引用css的方式

1.link能够加载css，也可以定义RSS等其他事务；@import只能加载css

2.link引用css是，在页面载入时同时加载；@import等页面加载完毕后才会加载

3.link无兼容问题；@import低版本无法使用

4.link支持javascript控制DOM改变样式；@import不支持

cookie，sessionStorage和localStorage的区别

cookies是储存在用户本地终端上的数据，数据始终在同源的http请求中携带，会在浏览器和服务器之间来回传递

sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存

存储大小：

cookie数据大小不超过4k

sessionStorage和localStorage储存数据大约5M或更大

有期时间：

cookie 设置cookie过期时间之前一直有效，即使窗口或浏览器关闭

sessionStorage 储存持久数据，浏览器关闭后数据不会丢失除非主动删除数据

localStorage 数据在当前浏览器窗口关闭后自动删除

css盒子模型

标准盒子模型：宽度=内容宽度(content)+边框(border)+内边距(padding)+外边距(margin)

盒子宽200px，padding:10px

如果设置box-sizing：border-box；那盒子的实际宽度就是本身宽度200px

如果设置box-sizing：content-box；那盒子的实际宽度就是200+10+10=220px

css属性继承

文字属性都可以继承；高不能继承但是行高可以继承

比如：font-size；font-family；color

css3新特性

文字阴影：text-shadow

盒子阴影：box-shadow

边框圆角：border-radius

边框图片：border-image

定义自己的字体：font-face属性

px与em的区别

px是值固定的，em会继承父级元素的字体大小

div里边套一个div，里边的div水平垂直居中

1.flex布局：父盒子设置 display: flex;
justify-content: center;
align-items: center;

2.定位：父盒子设置：position: relative;

            子盒子设置：position: absolute;

				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%); 

3.父盒子设置： text-align: center;
display: table-cell;
vertical-align: middle;

子盒子设置：display: inline-block;

创建路由步骤

第一步安装路由插件npm i vue-router

第二步引入路由import VueRouter from ‘vue-router’
// 安装路由功能Vue.use(VueRouter)

第三步注册路由
/**

创建路由规则

当用户请求不同的path值时，显示不同的组件（将不同的组件内容显示在·)
*/
const routes=[
{path:’/home’,component:Home},
{path:’/about’,component:About}
]

第四步创建路由实例
//创建 router 实例 ，然后传routes配置
const router = new VueRouter({
routes
})

JS中typeof返回哪些数据类型

object：对象

Number：数字

Function：函数

Boolean：布尔

string：字符串

symbol：符号

Underfind

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

强制类型转换： 明确调用内置函数，强制把一种类型的值转换为另一种类型

强制类型转换主要有：

Boolean：转换成布尔型；注意:只有0,null,NaN undefined,false转换成false,其他均为true

Number：Number只能将纯数字的字符串转换成数字,其他的字符串或转义字符均转换成NaN

String：可以将xx转换成字符串

parseInt：将字符串转换成整数

parseFloat： 转换字符串成为浮点数

隐式类型转换： 在使用算术运算符时，运算符两边的数据类型可以是任意的，比如，一个字符串可以和数字相加。之所以不同的数据类型之间可以做运算，是因为 JavaScript 引擎在运算之前会悄悄的把他们进行了隐式类型转换。

隐式类型转换主要有：+、–、==、!

JS的事件流模型都有什么

事件流包含三个阶段：

事件捕捉阶段：事件开始由顶层对象触发，然后逐级向下传播，直到目标的元素；

处于目标阶段：处在绑定事件的元素上；

事件冒泡阶段：事件由具体的元素先接收，然后逐级向上传播，直到不具体的元素；

1.点击事件：onclick

2.改变事件：onchange

3.选中事件：onselect

4.获取焦点事件：onfocus

5.失去焦点事件：onblur

6.载入文件事件：onload

7.卸载文件事件：onunload

8.鼠标覆盖事件：onmouseover

9.鼠标离开事件：onmouseout

10.鼠标双击事件：ondbclick

11.键盘按下事件：onkeydown

12.键盘按下并释放事件：onkeypress

13.键盘某个键放开事件：onkeyup

14.图片下载被用户中断事件：onabort

15.页面内容被改变时触发事件：onbeforeunload

BOM对象有哪些，window对象

1.window对象，是JS的最顶层对象，其他的BOM对象都是window对象的属性;

子对象	说明
document	文档对象，用于操作页面元素
location	地址对象，用于操作URL地址
navigator	浏览器对象，用于获取浏览版本信息
history	历史对象，用于操作浏览历史
screen	屏幕对象，用于操作屏幕宽度高度

简述ajax及基本步骤

简述AJAX: AJAX即"Asynchronous Javascript And XML”(异步JavaScript和XML)，是指一种创建交互式网页应用的

网页开发技术。通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。这意味着可以在不重新

加载整个网页的情况下，对网页的某部分进行更新。

创建ajax对象

var xhr=new XMLHttpRequest();

连接地址

xhr.open(‘get’,‘http://localhost:3000/first’);

发送请求

xhr.send();

获取服务端响应的数据

xhr.οnlοad=function(){}

HTTP状态消息200 302 304 403 404 500分别表示什么?

200:请求已成功，请求所希望的响应头或数据体将随此响应返回。

302:请求的资源临时从不同的URI响应请求。由于这样的重定向是临时的，客户端应当继续向原有地址发送以后的请求。只有在Cache-Control或 Expires 中进行了指定的情况下，这个响应才是可缓存的。

304:如果客户端发送了一个带条件的GET请求且该请求已被允许，而文档的内容(自上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个状态码。304响应禁止包含消息体，因此始终以消息头后的第一个空行结尾。

403:服务器已经理解请求，但是拒绝执行它。

404:请求失败，请求所希望得到的资源未被在服务器上发现。

500:服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。一般来说，这个问题都会在服务器端的源代码出现错误时出现。

JS字符串操作数据

indexOf()	返回字符串中第一个子串第一处出现的索引，没有则返回-1
lastlndexOf()	返回字符串中一个子串最后一处出现的索引，没有则返回-1
charAt()	返回指定位置的字符
substr()	返回从指定开始，指定长度的字符串
slice()	指定字符串开始，字符串结束，切割并返回新的字符串
replace()	用来查找匹配一个正则表达式的字符串，然后使用新字符串代替匹配的字符串。
split()	字符串变数组
join()	数组变字符串
toLowerCase()	将整个字符串转成小写字母
toLowerCase()	将整个字符串转成大写字母
concat()	将两个或多个字符的文本结合，返回新的字符串
length	返回字符串的长度

GET和POST的区别

get：一般用于查询数据，使用URL传递参数，由于浏览器对地址栏长度有限，所以对使用get方式所发送的信息的数量有限制，同时浏览器会记录（历史记录，缓存）中会保留请求地址的信息，包括地址后面的数据

post：一般用于向服务器发送数据，对所发送的数据的大小理论上是没有限制，浏览器会缓存记录地址，但是不会记录post提交的数据。post可以发送纯文本、URL编码格式、二进制格式的字符串，形式多样。

JS中数组常用的方法

方法	解释
push()	后增
unshift()	前增
pop()	后删
shift()	前删
splice()	splice(index,length,增加的元素1,增加的元素2…,增加的元素N) 表示从index开始删除length个元素，并从index开始新增元素1~N，放回被删除的元素组成的数组
concat()	拼接数组
slice()	剪切：slice(开始,结束) 返回从开始(包括)，到结束(不包括)之间的数组成的新数组
join()	数组转换为字符串：console.log(a.join(’,’))
sort()	排序：按照ascii码排序
reverse()	用于颠倒数组中元素的顺序。var a = [1,3,2,7,6] ;console.log(a.reverse()) // [6,7,2,3,1]
filter()	过滤:返回数组中满足条件的元素组成的新数组
map()	格式化数组:根据需求格式化原数组，返回格式化后的数组.
every()	对数组的每一项都运行给定的函数，若每一项都返回 ture,则返回 true
some()	对数组的每一项都运行给定的函数，若存在一项或多项返回 ture,则返回 true
forEach()	遍历数组

Es6新增的方法

方法	解释
find()	找到数组中第一次满足条件的元素，并返回，若找不到则返回undefined
findIndex()	findIndex()的作用同indexOf()，返回第一个满足条件的下标，并停止寻找,区别是findIndex() 的参数为一个回调函数,且一般用于对象数组
includes()	返回一个布尔值。 参数是一个value,一般用于简单数组。对于复杂数组，则可以使用some()方法替代includes()方法
Array.isArray()	用来判断一个元素是否为数组

添加、移除、移动、复制、创建和查找节点

创建新节点：createElement()创建一个具体的元素

		createTextNode()创建一个文本节点

		createDocumentFragment()创建一个dom片段

添加：appendChild()

移除：removeChild()

替换：replaceChild()

插入：insertBefore()

复制：cloneNode()

查找节点
document.getElementsByTagName()	通过标签名称获取；获取的是数组
document.getElementsByName()	通过元素的Name属性的值
document.getElementByld()	通过元素ld，唯—性
document.querySelector(’#id’)	查找元素唯—性
document.querySelectorAll(’#id’)	查找元素；获取的是数组

详细解释：https://blog.csdn.net/qi1271199790/article/details/53869508

this的典型应用

1.在html元素事件属性中使用

<input type="button" onclick="showInfo(this); " value="点击一下"/>

2.构造函数

function Animal (name,color) {
this.name = name;
this.co1or = color ;
}

3.input点击，获取值

<input type="button" id="text" value="点击一下"/>
<script type="text /javascript ">
var btn = document.getElementById("text ");
btn.onclick = function( {
alert(this.value); //此处的this是按钮元素
}
</script>

|

详细解释：https://blog.csdn.net/qi1271199790/article/details/53869508

this的典型应用

1.在html元素事件属性中使用

<input type="button" onclick="showInfo(this); " value="点击一下"/>

2.构造函数

function Animal (name,color) {
this.name = name;
this.co1or = color ;
}

3.input点击，获取值

<input type="button" id="text" value="点击一下"/>
<script type="text /javascript ">
var btn = document.getElementById("text ");
btn.onclick = function( {
alert(this.value); //此处的this是按钮元素
}
</script>