前端面试题（适合vue）

系统管理员 2022-05-21 02:56 206阅读 0赞

**面试题集合**

**1、v-model是什么？ vue中标签怎么绑定事件？**

答：v-model这个指令只能用在表单元素上，可以用他进行双向数据绑定。绑定事件：<input @click=doLog() />

**2、mvvm框架是什么？说说对双向数据绑定的理解？它和其它框架（jquery）的区别是什么？哪些场景适合？**

答：mvvm的**m**模型就是用来定义驱动的数据、v经过数据改变后的html、**vm**就是连接数据和视图，用来实现双向绑定

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

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

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

**3、自定义指令的方法有哪些？它有哪些钩子函数？还有哪些钩子函数参数？**

答：全局定义指令：在vue对象的directive方法里面有两个参数，一个是指令名称，另外一个是函数。组件内定义指令（局部定义指令）：directives

钩子函数：bind（绑定事件触发）、inserted(节点插入的时候触发)、update（组件内相关更新）、componentUpdated（被绑定元素所在模板完成一次更新周期时调用）、unbind（只调用一次，指令与元素解绑时调用）

钩子函数参数：el、binding

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

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

**5、请详细说下你对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结构依然存在

**6、请说下 vue 组件的优点，以及注册使用的过程？**

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

使用**Vue**.component方法注册组件。子组件需要数据，可以在**props**中接受定义。而子组件修改好数据后，想把数据传递给父组件。可以采用**emit**方法。

**7、Vue.js内置的指令，用什么开头？**

v-开头的

**8、CSS隐藏元素的几种方法？说出他们的区别**

display：none  不占据物理位置

visibility:hidden  占据物理位置

opacity:0 透明度为0，占物理位置

9、**CSS清除浮动的几种方法（至少两种）**

使用带clear属性的空元素

使用CSS的overflow属性；

使用CSS的:after伪元素 (用于非IE浏览器)；

**10、例举3种强制类型转换?**

强制parseInt,parseFloat,number

# **11、**数组操作pop()  push()  shift()  unshift() 有什么区别? #

Push()尾部添加   pop()尾部删除

Unshift()头部添加    shift()头部删除

12、**提交表单，有几种方式**

submit提交，Ajax提交form表单

** **

**13、定义一个div，让其在页面中，垂直居中显示**

.box\{

position:absolute;

top:50%;

left:50%;

width:500px;

height:200px;

margin-left:-250px;

margin-top:-100px;

background:red;

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

答：vue-router模块的router-**link**组件。children数组来定义子路由

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

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

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

答：三种，一种是全局导航钩子：router.beforeEach(**to**,**from**,**next**)，

作用：跳转前进行判断拦截。第二种：组件内的钩子；第三种：单独路由独享组件

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

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

**18、你是怎么认识vuex的？**

答：vuex可以理解为一种状态管理的开发模式或者框架，data中的属性需要共享给其他vue组件使用。状态为state集中放在store中； 改变状态的方式是提交mutations，这是个同步的事物； 异步逻辑应该封装在action中。

**19、vuex有哪几种属性？**

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

state => 基本数据(数据源存放地)  
getters => 从基本数据派生出来的数据   
mutations => 提交更改数据的方法，同步！   
actions => 像一个装饰器，包裹mutations，使之可以异步。   
modules => 模块化Vuex

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

如果请求来的数据是不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入vuex 的**state**里。

如果被其他地方复用，这个很大几率上是需要的，如果需要，请将请求放入action里，方便复用

**21、axios是什么？怎么使用？**

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

js中使用**import**进来，然后.get或.post。返回在.then函数中如果成功，失败则是在.catch函数中

** **

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

答：添加用户操作，更新操作。

**23、什么是RESTful API？怎么使用?**

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

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

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

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

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

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

**25、什么是webpack? vue-loader是什么？使用它的用途有哪些？**

答：WebPack可以看做是**模块打包机**：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

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

用途：**js**可以写es6、style样式可以scss或less、template可以加jade等

** **

**26、说几个ajax返回error的原因**

答：1、 dataType错误

类型错误：后台返回的dataType类型和前台写的不一致会跳入error

格式错误：jquery1.4之后对json的格式要求非常严格，json格式错误也会跳入error

2、data不能不写

data为空也一定要传"\{\}"；不然返回的是xml格式的。

3.、传递的参数

必须是ajax支持的编码格式

4、 URL路径问题

路径不能有中文

**27、XMLHttpRequest：XMLHttpRequest.readyState: 状态码的意思**

0 － （未初始化）还没有调用send()方法

1 － （载入）已调用send()方法，正在发送请求

2 － （载入完成）send()方法执行完成，已经接收到全部响应内容

3 － （交互）正在解析响应内容

4 － （完成）响应内容解析完成，可以在客户端调用了

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

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

**29、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。**

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

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

**input**按钮，标签是el-**input**，后面**type**跟上一个属性就是显示不同按钮的类型，有默认的**default**（默认的）、success（成功的）、warning（警告）、danger（危险）、info（）、primary（）

**31、你觉得哪些项目适合vue框架？**

答：1、数据信息量比较多的。

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

**32、PC端项目你会在哪些场景使用Vue框架？那么vue为什么解决这些问题呢？**

答：上万级数据需要瀑布流更新和搜索的时候，因为数据庞大的时候，用原生的dom操作js和html都会有列表的html布局，迭代很困难。再一个dom节点的大面积添加会影响性能。

第一：只需用v-for在view层一个地方遍历数据即可。

第二：vue通过Virtual Dom就是在js中模拟DOM对象树来优化DOM操作。

** **

**33、call（） 和 apply（） 的作用和区别？**

**答：**调用一个对象的一个方法，用另一个对象替换当前对象。

例：blackCat.say.call(whiteDog)

**区别**：call(thisObj，arg1,arg2)

Apply(thisObj，\[arg1,arg2\])

**34、举例说ES6有哪些的新功能？**

** **

**35、ajax请求的时候get 和post方式的区别**

Get 一般用于获取信息

使用URL传递参数

对所发送的信息数量也有限制，一般在2000字符

Post 一般用于修改服务器资源（新建，或者 修改）

对所发送的信息数量无限制

**36、JavaScript中如何检测一个变量是一个String类型？请写出函数实现**

function(obj) \{

return typeof(obj) == “string”;

**37、JSON 的了解？**  
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小。  
格式：采用键值对，例如：\{'age':'12', 'name':'back'\}

**38、如何阻止事件冒泡和默认事件**

**阻止事件冒泡：**event.stopPropagation();

阻止**默认事件：**event.preventDefault();

以上两个都可以用**return false**代替

**39、Ajax数据格式**

文本、HTML、XML 或 JSON

**40、window.load和$(document).ready()的区别**

前者必须在网页中所有元素（元素关联的文件），全部加载到浏览器以后，js才可以访问网页中的任何元素， 全等于===  $(window).load()

后者是Dom就绪就可以访问，但并不意味着，元素所有的关联文件已经下载完毕。

**41、响应式css定义**

@media screen (条件1) and (条件二)

例如：@media screen (min-width:768px) and (max-width:979px)

** **

42**、$this 和this区别**

this，表示当前的上下文对象是一个html对象，可以调用html对象所拥有的属性和方法。  
$(this),代表的上下文对象是一个jquery的上下文对象，可以调用jquery的方法和属性值。

# **43、你有哪些性能优化的方法？**   把CSS样式表置于顶部   把JS脚本置于页面底部   避免使用 CSS 表达式（Expression）   使用外部 JavaScript 和 CSS   削减 JavaScript 和 CSS   用 <link> 代替 @import   剔除重复脚本   减少DOM访问 #

优化图像（背景图片，用css定位，图片全部保存在一张PNG8格式上）  
favicon.ico要小而且可缓存

**44、ajax请求时，如何解析json数据**

使用eval parse,鉴于安全性考虑 使用parse更靠谱

JSON.parse(jsonstr); //可以将JSON字符串反序列化成JSON对象

JSON.stringify(jsonobj); //可以将JSON对象序列化成JSON对符串

# **45、使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）** #

1. **<div** id = "box"**>**

2.          **<div** id = "left\_box"**></div>**

3.          **<div** id = "center\_box"**></div>**

4.          **<div** id = "right\_box"**></div>**

5.  **</div>**

7. \#box\{ **width**:100%;**display**: flex; **height**: 100px; \}

8. \#left\_box,\#right\_box\{ **width**: 200px;**height**: 100px;  \}

9. \#center\_box\{ flex:1; **height**: 100px; \}

# **46、CSS3中各个浏览器内核兼容的设置** #

1. \-moz-：代表FireFox浏览器私有属性

2. \-ms-：代表IE浏览器私有属性

3. \-webkit-：代表safari、chrome浏览器私有属性

4. \-o-：代表opera浏览器私有属性

IE9以下的浏览器不支持HTML5标签，所以需要导入一个html5.js补丁，原理是通过JS来生成HTML5新标签对象。

因为本着移动优先的原则，现在写CSS都会用media query（响应式设计），IE8以下的浏览器不支持media query，这会导致@media 声明的CSS不能生效，因此要导入一个css3-mediaqueries.js补丁。

如下：

<!--\[if lte IE 8\]>

<!\[endif\]-->

/\* 因为条件注释只对IE10以下版本有效（IE11已经取消支持），所以在其他现代浏览器里面会自动忽略，不会加载，因此不会有性能问题 \*/

/\* 因为IE9以下浏览器不支持CSS3，IE9支持一部分，因此不能显示一些CSS3的过渡效果，对此有两种办法，一种是忽略，也就是降级或者是差异化设计。

或者可以用jquery的动画替代，引入方法可以是条件注释，也可以通过检测Navigator来判断IE版本 \*/

###    **47、什么是层叠顺序** ###

诸如border/background一般为装饰属性，而浮动和块状元素一般用作布局，而内联元素都是内容。网页中最重要的是什么？当然是内容

**48、三角形的绘制**

** **

\#triangle-up \{  
    width: 0;  
    height: 0;  
    border-left: 50px solid transparent;  
    border-right: 50px solid transparent;  
    border-bottom: 100px solid red;  
\}

**49、CSS3有哪些新特性？**

CSS3实现圆角（border-radius:8px），阴影（box-shadow:10px），  
对文字加特效（text-shadow），线性渐变（gradient），变换（transform）

Transform： rotate(9deg) //旋转

scale(0.85,0.90) //缩放

translate(0px,-30px) //定位

skew(-9deg,0deg) //倾斜

**50、什么是响应式设计？**

它是关于网页制作的过程中让不同的设备有不同的尺寸和不同的功能。响应式设计是让所有的人能在这些设备上让网站运行正常

**51、写一段css3动画，在5s内，div背景色从red变为blue**

div

width:100px;

height:100px;

background:red;

animation:myfirst 5s;

@keyframes myfirst

from \{background:red;\}

to \{background:yellow;\}

**52、Bootstrap的特性**

响应式设计

栅格布局

完整的类库

jQuery插件

**注意：因为这里要使用大量的html5和css3,所以对浏览器有要求，IE必须9以上。**

** **

**53、什么是boostrap**

Bootstrap是基于html、css、javascript的前端框架，为实现应用程序迅速开发的一套前端框架包

**54**、**div+css的布局较table布局有什么优点？**

改版的时候更方便 只要改css文件。  
页面加载速度更快、结构化清晰、页面显示简洁。  
表现与结构相分离。  
易于优化（seo）搜索引擎更友好，排名更容易靠前。

55、**一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。**

1、图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。

2、如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。

3、如果图片为css图片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技术。

4、如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。

5、如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。

**55**、**CSS3新增伪类有那些？**

p:first-of-type 指定父元素的首个 p 元素。

p:last-of-type  指定父元素的最后一个 p 元素。

p:only-of-type属于父元素的特定类型的唯一子元素的每个 p 元素。

p:only-child    选择属于其父元素的唯一子元素的每个 <p> 元素。

p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。

:enabled、:disabled 控制表单控件的禁用状态。

:checked，单选框或复选框被选中。

**56、Cookie, LocalStorage 与 SessionStorage**三者的异同

<table> 
 <tbody> 
  <tr> 
   <td style="background:rgb(241,241,241);"><p><strong><span style="color:rgb(102,102,102);">特性</span></strong></p></td> 
   <td style="background:rgb(241,241,241);"><p><strong><span style="color:rgb(102,102,102);">Cookie</span></strong></p></td> 
   <td style="background:rgb(241,241,241);"><p><strong><span style="color:rgb(102,102,102);">localStorage</span></strong></p></td> 
   <td style="background:rgb(241,241,241);"><p><strong><span style="color:rgb(102,102,102);">sessionStorage</span></strong></p></td> 
  </tr> 
  <tr> 
   <td style="background:rgb(255,255,255);"><p><span style="color:rgb(102,102,102);">数据的生命期</span></p></td> 
   <td style="background:rgb(255,255,255);"><p><span style="color:rgb(102,102,102);">一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效</span></p></td> 
   <td style="background:rgb(255,255,255);"><p><span style="color:rgb(102,102,102);">除非被清除，否则永久保存</span></p></td> 
   <td style="background:rgb(255,255,255);"><p><span style="color:rgb(102,102,102);">仅在当前会话下有效，关闭页面或浏览器后被清除</span></p></td> 
  </tr> 
  <tr> 
   <td><p><span style="color:rgb(102,102,102);">存放数据大小</span></p></td> 
   <td><p><span style="color:rgb(102,102,102);">4K左右</span></p></td> 
   <td colspan="2"><p><span style="color:rgb(102,102,102);">一般为5MB</span></p></td> 
  </tr> 
  <tr> 
   <td style="background:rgb(255,255,255);"><p><span style="color:rgb(102,102,102);">与服务器端通信</span></p></td> 
   <td style="background:rgb(255,255,255);"><p><span style="color:rgb(102,102,102);">每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题</span></p></td> 
   <td colspan="2" style="background:rgb(255,255,255);"><p><span style="color:rgb(102,102,102);">仅在客户端（即浏览器）中保存，不参与和服务器的通信</span></p></td> 
  </tr> 
 </tbody> 
</table>

**57、高度坍塌产生的原因？如何解决？**

父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。  
但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。

overflow: hidden;

**58、http状态码**

200 - 请求成功

301 - 资源（网页等）被永久转移到其它URL

404 - 请求的资源（网页等）不存在

500 - 内部服务器错误

**59、px和em，rem的区别**

px是一个绝对字体大小，em是根据其父元素的字体大小来设置，1em=16px。那么12px=0.75em, 10px=0.625em，但是用em计算相对复杂；CSS3提供了rem，它也是个相对单位，rem只相对跟节点<html>计算，适用于响应式页面

1. html\{

2.     font-size:62.5%; /\* 10÷16=62.5% \*/

3. \}

4. body\{

5.     font-size:12px;

6.     font-size:1.2rem ; /\* 12÷10=1.2 \*/

7. \}

** **

**60、div垂直居中**

.table \{

display: table;

margin: 5px;

width: 500px;

height: 300px;

background-color: \#ccc;

.cell \{

display: table-cell;

padding: 10px;

vertical-align: middle;

/\*该属性是定义行内元素垂直对齐的，只有行内元素会生效。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。\*/

</style>

<div class="table">

<div class="cell">内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>

</div>

** **

**61、html5有哪些新特性？如何区分 HTML 和 HTML5？**   
HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。  
(1)绘画 canvas;  
(2)用于媒介回放的 video 和 audio 元素;  
(3)本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;  
(4)sessionStorage 的数据在浏览器关闭后自动删除;  
(5)语意化更好的内容元素，比如 article、footer、header、nav、section;  
(6)表单控件，calendar、date、time、email、url、search;

区别：**<!DOCTYPE html>**

** **

**62、CSS选择符CSS选择符有哪些？**

标签选择符  类选择符 id选择符  属性选择符  包含选择符

**63、如何消除一个数组里面重复的元素？**

<table> 
 <tbody> 
  <tr> 
   <td><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p></td> 
   <td><p>// 方法一：</p><p>var arr1 =[1,2,2,2,3,3,3,4,5,6],</p><p>var arr2 = [];</p><p>var len = arr1.length;</p><p>for(var i = 0;i&lt;len; i++){ </p><p>&nbsp;&nbsp;&nbsp;&nbsp;if(arr2.indexOf(arr1[i]) ==&nbsp;-1){ </p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;arr2.push(arr1[i]);</p><p>&nbsp;&nbsp;&nbsp;&nbsp;}</p><p>}</p><p>document.write(arr2); // 1,2,3,4,5,6</p><p>&nbsp;</p></td> 
  </tr> 
 </tbody> 
</table>

**64、 javascript数据类型有哪些?**

js中有六种数据类型，包括五种基本数据类型（Number,String,Boolean,Undefined,Null）,和一种复杂数据类型（Object）。

**65、ajax的优点**

1、最大的一点是页面无刷新，在页面内与服务器通信，给用户的体验非常好。

2、使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。

3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。

**66、请介绍一下XMLhttprequest对象（ajax工作原理、核心思想）**  
Ajax的核心是JavaScript对象XmlHttpRequest。它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。通过XMLHttpRequest对象，Web开发人员可以在页面加载以后进行页面的局部更新。

**67、npm是什么？**

NPM是随同NodeJS一起安装的包管理工具，允许用户从NPM服务器下载别人编写的第三方包到本地使用

与Bower用法相同

**68、css省略号怎么写**

单行

overflow:hidden;

text-overflow:ellipsis;

white-space:nowrap

多行

<div id="con">

<span id="txt">文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略</span>

<span class="t"></span>

</div>

<style>

\#txt\{

display: inline-block;

height: 40px;

width: 250px;

line-height: 20px;

overflow: hidden;

font-size: 16px;

.t:after\{

display: inline;

content: "...";

font-size: 16px;

</style>

**69、什么是闭包**

闭包就是跨作用域访问变量！

var add = (function () \{

var counter = 0;

return function () \{

return counter += 1;

\})();

function myFunction()\{

document.getElementById("demo").innerHTML = add();

</script>

**70、less用过吗？用哪些特性**

变量、混合（mixin）、匹配模式、运算、嵌套等功能

**71**、**轮播图的原理**

一系列的大小相等的图片平铺，利用CSS布局只显示一张图片，其余隐藏。通过计算偏移量利用定时器实现自动播放，或通过手动点击事件切换图片。

**72、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、可以嵌套

**73、SVN是什么？**

是一个开放源代码的版本控制系统 具有上传、下载功能，也可查看历史版本。

**74、怎么理解前后端分离？**

前后端分离的核心：后台提供数据，前端负责显示

**75、Ajax处理跨域的方式有三种：代理、jsonp、XHR2**

**76、什么是node.js？**

运行在服务器端的JavaScript，具有超强的高并发能力

在Java、PHP或者.net等服务器端语言中，会为每一个客户端连接创建一个新的线程。而每个线程需要耗费大约2MB内存。也就是说，理论上，一个8GB内存的服务器可以同时连接的最大用户数为4000个左右。要让Web应用程序支持更多的用户，就需要增加服务器的数量，而Web应用程序的硬件成本当然就上升了。

Node.js不为每个客户连接创建一个新的线程，而仅仅使用一个线程。当有用户连接了，就触发一个内部事件，通过非阻塞I/O、事件驱动机制，让Node.js程序宏观上也是并行的。使用Node.js，一个8GB内存的服务器，可以同时处理超过4万用户的连接。

**77、http协议**

例如：[http://www.abc.com:8080][http_www.abc.com_8080]

http   协议

[www.abc.com][]  域名

8080    端口

**78、字符串插值**

**79、字符串常用方法**

**slice方法返回字符串的片段**  
var str = "ABCDEF";   
str.slice(2,4);   
结果：CD

**substring方法返回位于String对象中指定位置的子字符串。**  
var str = "ABCDEF";   
str.substring(2,4); // 或 str.substring(4,2);   
结果：CD

**Split** **将一个字符串分割为子字符串，然后将结果作为字符串数组返回。**  
var str = "AA BB CC DD EE FF";   
alert(str.split(" "，3));   
结果：   
AA,BB,CC

**concat方法返回字符串值**  
var str = "ABCDEF";   
str.concat("ABCDEF","ABC");   
结果：ABCDEFABCDEFABC

**indexOf方法放回String对象内第一次出现子字符串位置**  
var str = "ABCDECDF";   
str.indexOf("CD"，1); // 由1位置从左向右查找 123...   
结果：2

**80、浏览器对象模型 (BOM)**

一般指的是BOM 的方法和属性

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

**Window 子对象**

document 对象

frames 对象

history 对象

location 对象

navigator 对象

screen 对象

**81、DOM  是HTML 文档对象模型**，通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性

**82、js 定时器有以下两个方法：**

setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。

setTimeout() ：在指定的毫秒数后调用函数或计算表达式。

**83、MVVM和MVC的区别**

MVVM中的View 和 ViewModel可以互相通信。也就是可以互相调用。  
MVC中的是单向通信。也就是View跟Model，必须通过Controller来承上启下

**84、服务端渲染，英文缩写SSR**

Vue.js原来是开发SPA（单页应用）的，但是随着技术的普及，很多人想用Vue开发多页应用，并在服务端完成渲染。可以用Nuxt.js实现，她简化了SSR的开发难度。还可以直接用命令把我们制作的vue项目生成为静态html。

**服务器端渲染的好处**

最主要的原因时SPA（单页应用）不利于搜索引擎的SEO操作。比如你作一个新闻网站，流量的一个主要来源是通过百度、谷歌、bing这些搜索引擎，但是它们对SPA的抓取并不好，特别是百度根本没法抓取到SPA的内容页面，所以我们必须把我们的应用在服务端渲染成适合搜索引擎抓取的页面，再下载到客户端。那Nuxt.js适合作新闻、博客、电影、咨询这样的需要搜索引擎提供流量的项目。

85、**什么是单页应用？**

整个webapp就一个HTML文件，里面的各个功能页面是JavaScript通过hash或者history api来进行路由，并通过ajax 拉取数据实现响应功能。

**优点**：

分离前后端关注点，前端负责界面显示，后端负责数据存储和计算，各司其职，不会把前后端的逻辑混杂在一起；

减轻服务器压力，服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍；

同一套后端程序代码，不用修改就可以用于Web界面、手机、平板等多种客户端；

**缺点**：

SEO问题，现在可以通过Prerender等技术解决一部分；

前进、后退、地址栏等，需要程序进行管理；

书签，需要程序来提供支持；

**86 、ES6定义类和继承**

**class** Person \{   //定义类

constructor(name) \{   //构造函数

**this**.name **=** name;

getName() \{

**return** **this**.name;

**class** Student **extends** Person \{   //继承

constructor(name, grade) \{

**this**.grade **=** grade;  // ReferenceError：如果没有super直接调用this. Grade,会报错

**super**(name);   //子类必须在constructor方法中调用super，否则新建实例会报错，因为子类没有自己的this对象

super 作为函数调用时代表父类的构造函数

**this**.grade **=** grade;

getGrade() \{

**return** **this**.grade;

Let  a = new Student(“Bill” , 5)

**87、样式权重**

第一等：代表内联样式，如: style=””，权值为1000。

第二等：代表ID选择器，如：\#content，权值为100。

第三等：代表类，伪类和属性选择器，如.content，权值为10。

第四等：代表类型选择器和伪元素选择器，如div p，权值为1。

<style>

\#aaa \{

color: red

.bbb \{

color: blue

div p \{

color: \#pink;

</style>

</head>

<body>

<div>

<p id="aaa" class="bbb" style="color:green">我的大学生活</p>

</div>

权重算出来了，但是某个元素到底用哪个样式，还有3个规则,：

1，如果样式上加有!important标记，例如：

<table> 
 <tbody> 
  <tr> 
   <td><p>&nbsp;</p></td> 
   <td><p><span style="color:rgb(51,51,51);">p{&nbsp;color:&nbsp;gray&nbsp;!important}</span></p></td> 
  </tr> 
 </tbody> 
</table>

那么始终采用这个标记的样式。

2，匹配的内容按照CSS权重排序，权重大的优先；

3，如果权重也一样，按照它在CSS样式表里声明的顺序，后声明的优先，例如：

<table> 
 <tbody> 
  <tr> 
   <td><p><span style="color:rgb(51,51,51);">&nbsp;</span></p></td> 
   <td><p><span style="color:rgb(51,51,51);">h1&nbsp;{color:&nbsp;blue}</span></p><p><span style="color:rgb(51,51,51);">h1&nbsp;{color:&nbsp;red}</span></p></td> 
  </tr> 
 </tbody> 
</table>

最终胜出的是color: red。

**88、undefined和null区别**

**null表示"没有对象"，即该处不应该有值。**典型用法是：

（1） 作为函数的参数，表示该函数的参数不是对象。

**undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。**典型用法是：

（1）变量被声明了，但没有赋值时，就等于undefined。

（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。

（3）对象没有赋值的属性，该属性的值为undefined。

（4）函数没有返回值时，默认返回undefined。

var i;

i // undefined

function f(x)\{ console.log(x)\}

f() // undefined

var  o = new Object();

o.p // undefined

var x = f();

x // undefined

**89、语义化HTML**：用最恰当的HTML元素标记的内容。

**<header></header>**：页眉通常包括网站标志、主导航、全站链接以及搜索框。

**<nav></nav>**：标记导航，仅对文档中重要的链接群使用。

**<section></section>**：具有相似主题的一组内容，比如网站的主页可以分成介绍、新闻条目、联系信息等条块。

**<footer></footer>**：页脚，只有当父级是body时，才是整个页面的页脚。

# **90、**[Doctype作用，标准模式与兼容模式的区别][Doctype] #

<!DOCTYPE>声明位于位于HTML文档中的第一行，处于 <html> 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。

标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。

在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

**91、各种浏览器内核**

**Trident**内核代表产品Internet Explorer，又称其为IE内核。（IE、傲游、世界之窗浏览器、腾讯TT）

**Gecko**内核代表作品Firefox

**WebKit**内核代表作品Safari、Chrome

**Presto**内核代表作品OperaPresto

**92、什么叫优雅降级和渐进增强？**

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

优雅降级 graceful degradation：  
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：

a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给

b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要

c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带

**93、attr()和prop()的区别**

**94、data-\*作用**

Html5的自定义属性，用于存储页面或应用程序的私有自定义数据

存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验

**95、Quirks(怪癖）模式是什么？它和Standards（标准）模式有什么区别**区别：

总体会有布局、样式解析和脚本执行三个方面的区别。

盒模型：在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks 模式下，IE的宽度和高度还包含了padding和border。

设置行内元素的高宽：在Standards模式下，给<span>等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。

设置百分比的高度：在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的

用margin:0 auto设置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效。

# **96、jQuery对象与js对象互相转换** #

jQuery对象转换成js对象：\[index\]和.get(index)

**例如**：var $v =$("\#v") ; //jQuery对象   
var v=$v\[0\]; //js对象

**例如**：var $v=$("\#v"); //jQuery对象   
var v=$v.get(0); //js对象

js对象转成jQuery对象**:** $(js对象)

例如：var v=document.getElementById("v"); //js对象   
var $v=$(v); //jQuery对象

[http_www.abc.com_8080]: http://www.abc.com:8080
[www.abc.com]: http://www.abc.com
[Doctype]: http://www.cnblogs.com/sunhe/p/4994058.html

前端面试题（适合vue）

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 2023Vue前端面试题汇总

相关前端面试题《vue》

相关前端面试题（vue篇）

相关前端面试题之Vue篇

相关前端面试题（适合vue）

相关前端面试题

相关前端面试题

相关前端面试题——Vue

相关前端面试题（Vue）

相关前端面试题