2021年Vue面试笔试题目大全,Vue核心知识,Vue大厂面试宝典

第1章 Vue基础入门

一、填空题

1. Vue是一套构建_______的渐进式框架。

2. MVVM主要包含3个部分，分别是Model、View和_______。

3. Vue中通过_______属性获取相应DOM元素。

4. 在进行Vue调试时，通常使用______工具来完成项目开发。

5. Vue中页面结构以______形式存在。

二、判断题

1. Vue与Angular和React框架不同的是，Vue设计为自下而上逐层应用。（ ）

2. Vue完全能够为复杂的单页应用提供驱动。（ ）

3. Vue是一套构建用户界面的渐进式框架，Vue的核心只关注视图层。（ ）

4. Vue中MVVM框架主要包含3部分组成：Model、View和ViewModle。（ ）

5. Vue可以在Node环境下进行开发，并借助npm包管理器来安装依赖。（ ）

三、选择题

1. 下列关于Vue说法错误的是（ ）。

与Angular都可以用来创建复杂的前端项目

优势主要包括轻量级、双向数据绑定

在进行实例化之前，应确保已经引入了核心文件

与React语法是完全相同的

2. 下列关于Vue的优势的说法错误的是（ ）。

A.双向数据绑定

B.轻量级框架

C.增加代码的耦合度

D.实现组件化

3. 下列不属于Vue开发所需工具的是（ ）。

浏览器

Code编辑器

-devtools

D.微信开发者工具

4. npm包管理器是基于（ ）平台使用的。

1

r

5. 下列选项中，用来安装vue模块的正确命令是（ ）。

install vue

install vue

install vue

I vue

四、简答题

1. 请简述什么是Vue。

2. 请简述Vue优势有那些。

3. 请简单介绍Vue、React之间的区别。

五、编程题

1. 请使用动手创建一个登录页面。

2. 请手动配置开发环境。

第1章答案

一、

1.

2.

3.

4.

5.

填空题

用户界面

ViewModel

refs

vue-devtools

组件

判断题 二、

1.

2.

3.

4.

5.

对

对

对

对

对

三、

1. D

2. C

3. D

选择题

2

4. A

5. A

四、 简答题

4. 请简述什么是Vue。

Vue（读音/Vjuː/，类似于View）是一套用于构建用户界面的渐进式框架，与其他大型框架相比，

Vue被设计为可以自底向上逐层应用。其他大型框架往往一开始就对项目的技术方案进行强制性的要求，

而Vue更加灵活，开发者既可以选择使用Vue来开发一个全新项目，也可以将Vue引入到一个现有的

项目中。

5. 请简述Vue优势有那些。

轻量级: Vue相对简单、直接，所以Vue使用起来更加友好。

数据绑定: Vue是一个MVVM框架，即数据双向绑定。

指令: 指令主要包括内置指令和自定义指令，以“v-”开头，作用于HTML元素。

插件: 插件用于对Vue框架功能进行扩展，通过l完成插件的编写，简单配置

后就可以全局使用。

五、 编程题

3. 请使用动手创建Vue实例并实现数据的绑定效果。

>

4. 请手动配置开发环境。

1）. 打开git-bash命令行工具

2）. 安装Node环境

3）. 打开解压好的vue-devtools-5.1.1文件，执行命令如下

npm install

npm run build

4）. 打开Chrome浏览器，添加vue-devtools调试工具

5）. 安装脚手架工具： *********************.x–g

6）. 安装webpack打包工具： **********************.x–g

7）. 构建项目：vue init webpack app

第2章 Vue开发基础（上）

一、填空题

1. Vue实例对象通过_______方式来创建。

2. Vue初始数据在实例对象的_______参数中进行定义。

3. Vue实例对象中el参数表示_______。

4. Vue中实现双向数据绑定的指令是_______。

5. Vue事件绑定指令是_______。

二、判断题

1. 在项目中引入了文件，才可以创建Vue实例。（ ）

2. Vue实例对象指令主要包括自定义指令和内置指令，通过指令省去DOM操作。

（ ）

4

3. 事件传递方式有冒泡和捕获，默认是冒泡。（ ）

4. Vue开发提出了组件化开发思想，每个组件都是一个孤立的单元。（ ）

5. 在Vue中beforeDestroy与destroyed生命周期函数执行后，都可以获取到Vue实

例。（ ）

三、选择题

6. 下列关于Vue实例对象说法不正确的是（ ）。

实例对象是通过new Vue({})方式创建的

实例对象只允许有唯一的一个根标签

C.通过methods参数可以定义事件处理函数

实例对象中data数据不具有响应特性

7. Vue实例对象中能够监听状态变化的参数是（ ）。

s

ng

ents

8. Vue中实现数据双向绑定的是（ ）。

A.v-bind

B.v-for

C.v-model

D.v-if

A.v-on:enter

B.v-on:click

C.v-on:mouseenter

D.v-on:doubleclick

10. 下面列出的钩子函数会在Vue实例销毁完成时执行的是（ ）。

d

yed

d

d

四、简答题

1. 请简述什么是Vue实例对象。

2. 请简述什么是Vue组件化开发。

3. 请简单介绍Vue数据绑定内置指令主要内容有哪些。

五、编程题

1. 请实现一个比较两个数字大小的页面。

9. 在Vue中，能够实现页面单击事件绑定的代码是（ ）。

5

2. 请实现一个简单的网页计算器。

第2章答案

六、

6.

7.

8.

9.

10.

填空题

new关键字

data

唯一根标签

v-model

v-on

判断题 七、

1.

2.

3.

4.

5.

对

对

对

对

对

八、

6.

7.

8.

9.

10.

D

A

C

B

B

选择题

九、 简答题

6. 请简述什么是Vue实例对象。

在Vue项目中，每个Vue应用都是通过Vue构造器创建新的Vue实例开始的。

通过new关键字的方式创建vm实例对象。

创建方式：

编写JavaScript代码：

6. 编写页面结构：

9

编写JavaScript代码：

10

第3章 Vue开发基础（下）

一、填空题

1. Vue实例对象通过_______方式来获取。

2. Vue初始数据通过______方式获取。

3. Vue中通过_______获取当前实例的子组件。

4. Vue中创建插件提供的方法是_______。

5. Vue中通过_______创建自定义指令。

二、判断题

1. Vue提供的全局API接口component()，不能用来注册组件。（ ）

2. Vue中对象用来实现Vue全局配置。（ ）

3. Vue中data选项中的数据具有响应特性。（ ）

4. Vue中，可以通过vm.$slots获取子组件实例对象。（ ）

5. Vue实例对象中通过$options可以获取到父作用域下的所有属性。（ ）

三、选择题

1. 下列关于Vue实例对象接口说法，错误的是（ ）。

实例对象提供了实例可操作方法

实例对象$data数据可以由实例vm委托代理

C.通过Vue实例对象可以进行Vue全局配置

实例对象接口同样可以通过Vue方式调用

2. 下面关于Vue全局配置说法，错误的是（ ）。

ls可以设置devtools调试工具的启用和关闭

是一个对象，包含Vue的全局配置

ent()可以获取Vue全局配置对象

可以获取到全局配置对象

3. 下列不属于Vue实例对象属性的是（ ）。

A.$data

B.$component

C.$props

D.$root

A.$parent

B.$children

C.$child

4. Vue实例对象获取子组件实例对象的方式是（ ）。

11

D.$component

5. 下面对于的说法，错误的是（ ）。

是Vue提供的全局接口API

B. 可以用来注入组件选项

C.使用可能会影响到所有Vue实例

D. 不可以用来注入自定义选项的处理逻辑

四、简答题

1. 请简述什么是Vue插件。

2. 请简述Vue全局API接口主要内容。

3. 请简单介绍Vue实例对象属性和方法。

五、编程题

1. 请使用插槽vm.$slots动手实现一个导航栏结构。

2. 请创建一个自定义插件，实现一个登录页面。

第3章

十一、 填空题

11.

12.

13.

14.

15.

vm.$root

vm.$data

vm.$children

install

ive()

十二、 判断题

1.

2.

3.

4.

5.

错

对

对

错

错

十三、 选择题

11.

12.

13.

14.

D

CD

B

B

12

15. D

十四、 简答题

1. 请简述什么是Vue插件。

主要用于在Vue中安装插件，通过插件可以为Vue添加全局功能。插件可以是一个对象

或函数，如果是对象，必须提供install()方法，用来安装插件；如果插件是一个函数，则该函数将被

当成install()方法。

2. 请简述Vue全局API接口主要内容。

1）. ive():Vue中有很多内置指令，如v-model、v-for和v-bind等

2）. ():主要用于在Vue中安装插件，通过插件可以为Vue添加全局功能

3）. ():用于基于Vue构造器创建一个Vue子类，可以对Vue构造器

进行扩展

4）. ():Vue的核心具有一套响应式系统，简单来说就是通过监听器监听数据层的数据变

化，当数据改变后，通知视图也自动更新

5）. ():用于全局注册一个混入，它将影响之后创建的每个Vue实例

3. 请简单介绍Vue实例对象属性和方法。

1）. vm.$props: 使用vm.$props属性可以接收上级组件向下传递的数据

2）. vm.$options: Vue实例初始化时，除了传入指定的选项外，还可以传入自定义选项

3）. vm.$el: vm.$el用来访问vm实例使用的根DOM元素

4）. vm.$children: vm.$children用来获取当前实例的直接子组件

5）. vm.$root: vm.$root用来获取当前组件树的根Vue实例，如果当前实例没有父实例，则

获取到的是该实例本身

6）. vm.$slots:插槽就是定义在组件内部的template模板，可以通过$slots动态获取

7）. vm.$attrs: vm.$attrs可以获取组件的属性，但其获取的属性中不包含class、style

以及被声明为props的属性

十五、 编程题

1. 编写页面样式：

编写页面结构：

编写JavaScript代码：

2. 编写页面结构：

编写JavaScript代码：

第4章 Vue过渡和动画

一、填空题

1. Vue提供了内置的过渡封装组件是 。

2. 在过渡封装组件中使用 属性可以重置过渡中切换类名的前缀。

16

3. 通过 特性设置节点在初始渲染的过渡。

4. 在离开的过渡中有 、 、 3个class切换。

5. 的类名优先级要高于普通的类名。

二、判断题

1. 函数式组件中的render()函数用来创建组件模板。（）

2. 给过渡元素添加v-bind:css="true"，Vue会跳过CSS的检测。（）

3. 在@before-enter阶段可以设置元素开始动画之前的起始样式。（）

4. 在使用库时，基本的class样式名是animate。（）

5. enter和leave动画钩子函数，除el参数外还会传入一个done作为参数。（）

三、选择题

1. 下列选项中关于动画钩子函数说法正确的是（）。

A. @leave-cancelled函数只能用于v-if中

B. 对于@enter来说，当与CSS结合使用时，回调函数done是必选的

C. done作为参数，作用就是告知Vue动画结束

D. 钩子函数需要结合CSS transitions或animations 使用，不能单独使用

2. 下列关于Vue为标签提供的过渡类名的说法，错误的是（）。

A. v-enter在元素被插入之前生效，在元素被插入之后的下一帧移除

B. v-leave在离开过渡被触发时立刻生效，下一帧被移除

C. v-enter-active可以控制进入过渡的不同的缓和曲线

D. 如果name属性为my-name，那么my-就是在过渡中切换的类名的前缀

3. 下列选项中关于多个元素过渡的说法，错误的是（）。

A. 当有相同标签名的元素切换时，需要通过key特性设置唯一的值来标记以让

Vue区分它们

B. 不相同元素之间可以使用v-if和v-else来进行过渡

C. 组件的默认行为指定进入和离开同时发生

D. 不可以给同一个元素的key特性设置不同的状态来代替v-if和v-else

四、简答题

1. 请简述JavaScript钩子函数包括哪些。

2. 请简述6个内置的过渡类名。

3. 请简述自定义过渡类名的属性有哪些。

五、编程题

1. 编写一个登录页面，使用Tab栏实现“账号登录”和“二维码登录”这两种方式

的切换，并通过transition组件结合实现切换时的动画效果。

2. 实现单击一个按钮后，切换盒子的展开和收起状态。

17

第4章

十六、 填空题

16.

17.

18.

19.

20.

transition

name

appear

v-leave、v-leave-active、v-leave-to

自定义过渡

十七、 判断题

6.

7.

8.

9.

10.

对

错

对

错

对

十八、 选择题

16. C

17. D

18. D

十九、 简单题

4. 请简述JavaScript钩子函数包括哪些。

入场钩子分别是beforeEnter（入场前）、enter（入场）、afterEnter（入场后）和enterCancelled

（取消入场）

出场钩子分别是beforeLeave（出场前）、leave（出场）、afterLeave（出场后）和leaveCancelled

（取消出场）

@before-enter="beforeEnter"

@enter="enter"

@after-enter="afterEnter"

@enter-cancelled="enterCancelled"

@before-leave="beforeLeave"

@leave="leave"

@after-leave="afterLeave"

@leave-cancelled="leaveCancelled"

18

v-bind:css="false"> // Vue会跳过CSS的检测

5. 请简述6个内置的过渡类名有哪些。

进入（enter）：

v-enter: 在元素被插入之前生效，在元素被插入之后的下一帧移除

v-enter-active: 在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡动画完成

之后移除

v-enter-to: 在元素被插入之后下一帧生效（与此同时v-enter被移除），在过渡动画完成之

后移除

离开（leave）：

v-leave：在离开过渡被触发时立刻生效，下一帧被移除

v-leave-active：在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡完

成之后移除

v-leave-to：在离开过渡被触发之后下一帧生效（与此同时v-leave被移除），在过渡动画完

成之后移除

6. 请简述自定义过渡类名的属性有哪些。

enter-class

enter-active-class

enter-to-class

leave-class

leave-active-class

leave-to-class

注意：自定义类名的优先级高于普通类名

五、编程题

3. html代码如下：

css代码如下:

js代码如下：

账号登录

22

二维码登录

4. html代码如下：

js代码如下：

隐藏部分

24

展示全部

第5章 Vue路由

一、填空题

1. 在项目中可以通过npm命令 安装路由vue-router。

2. 使用 获取当前激活的路由的状态信息。

3. 通过一个名称来标识一个路由的方式叫作 。

4. 在业务逻辑代码中实现导航跳转的方式称为 。

5. 单页面应用主要通过URL中的 实现不同页面之间的切换。

二、判断题

1. 后端路由通过用户请求的URL导航到具体的html页面。（）

2. 开发环境下，使用import VueRouter from 'vueRouter'来导入路由。（）

3. 嵌套路由的使用，主要是由页面结构来决定的。（）

4. params方式传参类似于GET请求。（）

5. 在单页面应用中更新视图可以不用重新请求页面。（）

三、选择题

1. 下列vue-router插件的安装命令，正确的是（）。

A. npm install vue-router

B. node install vue-router

C. npm Install vueRouter

D. npm I vue-router

2. 下列关于query方式传参的说法，正确的是（）。

A. query方式传递的参数会在地址栏展示

25