_ozZ

Vue面试题-2

1.下列哪个选项是正确的插值语法？
A {value}
B { {value}}
C <%value%>
D value
正确答案: B
解析:mustache语法
2.关于样式绑定，下面写法错误的是？（）
A 、v-bind:class=”className”
B ：class=”{ {isActive && active}}”
C :style=”{width: ‘200px’}”
D v-bind:class=”[isActive ? activeClass : ‘’, errorClass]”
正确答案: B
3.条件渲染指令是下列哪项？（）
A v-if
B v-on
C v-model
D v-for
正确答案: A
4.实现双向绑定，需要下列哪个指令？（）
A v-text
B v-show
C v-model
D v-on
正确答案: C
5.插值语法还可以使用下列哪个指令替代？
A v-html
B v-bind:text=
C v-text
D :value=
正确答案: C
6.下列哪个选项是v-model指令的修饰符？（）
A .capture
B .self
C .right
D .number
正确答案: D
解析:
限定双向绑定必须输入可转变的数字型
7.定义vue-router的动态路由，正确的是？
A path=’/user/list?Id=1’;
B path=’/user/list’
C path=’/user/:id’
D path=’/user/parms’
正确答案: C
解析:动态路由需要 path 以及参数比如 ‘/user/:id’
8.获取动态路由中参数name的值，下列正确的是？
A $router.params.name
B $r o u t e . p a r a m s . n a m e C t h i s .$ router.name
D this.router.params.name
正确答案: B
解析:
获取路由参数通过 $route 而不是 $r o u t e r 9 . 使用 V u e x 时，如何更改状态 n a m e ？（） A 直接修改： t h i s .$ store.state.name = ’ingjing‘
B 定义修改name的Action，然后提交该Action
C 通过setState方法进行修改：this.setState({name: ’ingjing‘})
D 定义修改name的Mutation，然后提交该Mutation
正确答案: D
解析:修改vuex state 中的值只能通过Mutation方法实现
10.13、如何使css在当前组件内起作用？
A 在单文件组件中的style上添加scoped
B 定义单独的css文件，在组件内引入即可
C 在单文件组件中的style下写样式
D 没办法实现
正确答案: A
解析:
该题考试局部样式的使用通过scoped
11.vue事件绑定中要阻止冒泡，以下哪种写法是正确的
A

数组写法：

13.v-if 与v-show 说法错误的是 A v-if 是惰性的，如果v-if 为假，那它不会创建出来 B v-show 可以动态切换隐藏和显示 C 在template 上使用 v-show 后，进行动态创建时，不会创建template元素，它只是一个包装元素 D 以上不都正确正确答案: C 解析: v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。 14.一个.vue单文件组件不包括以下哪个 A template B script C style D component 正确答案: D 解析:结构template 样式style 行为js 15.Vue的元素，我们需要对哪个属性进行动态绑定，就可以在同一个挂载点动态切换多个组件。 A is B which C name D 以上都不对正确答案: A 解析:vue动态组件可以依据is属性进行切换 16.对于vue 数据驱动的原理，以下说法有误的是 A 使用 Object.defineProperty 把属性全部转为 getter/setter。 B 每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 getter 被调用时，会通知 watcher 重新计算 C Vue 是异步执行 DOM 更新正确答案: B 解析: Vue的双向绑定是通过数据劫持结合发布-订阅者模式实现的，即通过Object.defineProperty监听各个属性的setter，然后通知订阅者属性发生变化，触发相应的回调。整个过程分为以下几步： 1、Observer通过Object.defineProperty实现对属性的变化监听，在变化时通知订阅者。 2、Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数 3、Watcher是订阅者，是Observer和Compile的中间纽带，负责将变化的数据更新到视图， 17.在定义组件和通信时，以下说法有误的是 A 自定义组件需要有一个root element B 父子组件的data是无法共享 C 组件可以有data，methods,computed....,但是data 必须是一个函数。 D 父子组件的通信，props up, events down 正确答案: D 解析: 父給子传用props，子給父传用事件 18.对于脚手架安装的第三方模块，以下说法有误的是 A ESLint :代码检测工具，使用它可以避免低级错误和统一代码的风格，安装之后无法关闭，所以我们可以选择不安装 B Karma + Mocha :单元测试，保证代码质量 C Nightwatch:端到端测试(功能测试)，站在用户视角，功能测试，而非代码细节 D 以上说法不全正确正确答案: A 解析:安装的第三方模块都是可配置的 19.关于v-model 使用，有误的是 A

B C 正确答案: A 解析:v-model一般和表单元素混合使用 20.v-model 支持修饰符，以下哪个不是v-model 的修饰符 A lazy B number C trim D once 正确答案: D 解析: .lazy在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change事件进行同步 .number如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符 .trim如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符： 21.关于vue的核心你认为正确的是() A Vue的核心在于强大的指令 B Vue 的核心在于丰富详细的API文档 C Vue的核心在于易于上手 D Vue的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统正确答案: D 22.下面哪项不是正确的vue安装方式（） A 直接script 标签引入 B 使用CDN C 使用NPM下载,然后进行模块化开发引入 D 使用@angular/cli 正确答案: D 23.关于vue-cli正确的是（） A Vue-cli 不使用 webpack就可以使用 B Vue-cli 是Vue 提供一个官方命令行工具，可用于快速搭建大型单页应用 C Vue-cli根据不依赖node就可以直接运行 D Vue-cli 根本不需要你掌握前端项目工程自动化的知识就可以马上上手正确答案: B 24.关于vue 响应式你的理解是（） A Vue 通过字符串模板来实现数据和视图的响应 B Vue帮我们做了很多底层的事情，通过建立vm实例对象，在数据(model)和视图（view/dom）上建立一一对应的关联。 C Vue 的数据响应式不是数据双向绑定 D Vue 的响应式只能通过v-model来实现正确答案: B 解析: 数据观测 25.下面哪个不是属于vue的指令 () A v-for B v-bind C v-on D v-repeat 正确答案: D 解析: angularjs指令ng-repeat 26.关于以下指令解释不正确的是() A v-model 实现数据双向绑定的,常用语input/textarea B v-if 常用于控制元素的显示和隐藏的 C v-html 用于输入带有html标签的变量 D v-once 用于绑定经常改变的变量的正确答案: D 解析:绑定一次 27.Vue 实例声明周期，下面哪个阶段是错误的（） A Update 实例数据发生改变阶段 B Mount 实例载入到页面转变成真实DOM的阶段 C Create 实例从创建到数据初始化完毕的阶段 D Unbind 实例从页面移除的阶段正确答案: D 28.关于 v-for理解不正确的是（） A v-for 用来遍历数据的 B v-for 通常使用 key 属性给每项元素添加识别码 C V-for 不可以遍历对象 D V-for可以通过添加 index 给每项元素添加index索引正确答案: C 解析:可以变量对象，value，key，index 29.对于vue事件处理你认为不正确的理解是（） A 通过使用 v-on 指令来实现监听DOM事件，并在触发时运行一些 JavaScript 代码 B 事件处理有例如 prevent,stop,once，enter 等相关事件修饰符 C Vue事件处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入 D Vue编写事件可以使用 &符号来缩写代替 v-on 正确答案: D 解析:不存在& 30.关于vue过滤器,你理解不正确的是( ) A Vue.filter来注册全局的过滤器, B Vue 实例中的 filters的属性可以用来注册局部的过滤器 C 过滤器常用于一些常见的文本格式化，写在双花括号插值和 v-bind 表达式 D Vue过滤器可以不用设置返回值正确答案: D 二、多选题(不定项选择)（共15题，每题2分） 1、属于vue的指令有哪些？（） A v-if B v-model C @ D : 正确答案: A,B,C,D 解析: 此题考查常用的vue指令条件渲染双向板顶 v-bind 以及 v-on 2.事件绑定的方式有哪些？（ A @ B v-bind C v-on D v-click 正确答案: A,C 解析: 事件绑定的方式 v-on 以及简写 @ 3.vue-router有几种导航钩子？（） A router.beforeEach B router.afterEach C beforeEnter D beforeRouteLeave 正确答案: A,B,C,D 解析: 此题考查路由的钩子函数 4.绑定属性下列正确的是？（） A v-if B v-bind C : D v-on 正确答案: B,C 解析: 绑定属性的2中方式 v-bind 以及简写： 5.vue-router中，核心组件是哪些？ A router-view B router-link C Router D Link 正确答案: A,B 6.下列哪些可以发送http请求？ A fetch B axios C jquery D XMLHTTPRequest 正确答案: A,B,C,D 解析: 考查常用的前后端数据请求方式 7.单文件组件一般由几部分组成？ A template B script C style D body 正确答案: A,B,C 解析:单文件由模板 js逻辑和样式组成 8.Vue.js属于MVVM框架，MVVM都包含什么？ A M model 模型 B V view 视图 C VM viewmodel 视图模型 D C controller 控制器正确答案: A,B,C 解析:mvvm 数据模型model 视图view 视图模型 viewmodel 9.第一次组件加载会触发哪几个钩子 A beforeCreate B created C beforeMount D mount 正确答案: A,B,C 解析: 可以看到在vue一整个的生命周期中会有很多钩子函数提供给我们在vue生命周期不同的时刻进行操作, 那么先列出所有的钩子函数 beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed 第一次组件加载会触发以下钩子函数 beforeCreate created beforeMount mounted 10.v-model 指令支持以下哪些标签 A input B div C textarea D select 正确答案: A,C,D 解析:v-model和表单标签联合使用 11.下列有关Vue.js遍历数据描述正确的有 A v-for指令可以实现数据遍历显示 B v-for一般用来遍历数组，不能遍历对象 C v-for既可以遍历数组，又可以遍历对象 D { { n }} 在Vue.js 2.0中，{ { n }} 会打印 1-10 正确答案: A,C,D 解析:既可以遍历数组，也可以遍历对象 12.vue自定义指令的钩子函数包括 A bind B inserted C update D unbind 正确答案: A,B,C,D 解析: 一个指令定义对象可以提供如下几个钩子函数 (均为可选)： bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。 update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。 componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。 unbind：只调用一次，指令与元素解绑时调用。 13.对与webpack 描述正确的是 A Webpack可以看做是模块打包机 B 在配置文件写入 devtool: 'source-map' ，是为了生成map 文件，方便调试 C webpack中babel-loader 可以将ES6 转成ES5 供浏览器使用 D webpack支持commonJS模块化规范正确答案: A,B,C,D 解析:是一个前端自动化构建工具的打包利器 14.对v-model指令你理解正确的是（） A V-model 可以实现数据的双向绑定 B V-model 经常使用在 input/textarea 标签中 C V-model 无法改变 vue 实例对象的data 的数值 D V-model 不会用于html的表单操作正确答案: A,B 15.Vue 有什么特点（） A 易于上手 B 强大丰富的API文档 C 便于与第三方库或既有项目整合 D Vue 也完全能够为复杂的单页应用提供驱动正确答案: A,B,C,D 解析: 易用体现在只要你学会了HTML，js,css就可以使用它拥有强大的API文档，既可以开发单页面应用也可以开大多页面应用，还支持服务端渲染可以完美的和第三方库或者既有项目整合三、填空题 1.v-router包含两个核心组件：router-link以及 router-view 正确答案: (1) router-view 解析: 跳转与展示区 2.在Vuex中提交Mutation的方法是: commit 正确答案: (1) store.commit 3. vue中全局注册组件的方法是 Vue.use() 正确答案: (1) Vue.component 解析: Vue.component('my-component-name', { // ... 选项 ... }) 4.在vue路由开发中，如果是以模块的方式使用路由，除了引入路由外，还需要通过 components 方法明确地安装路由功能：正确答案: (1) Vue.use 解析: 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

5.Vue 通过
v-bind
指令来绑定属性
v-on
指令来绑定事件
v-model
指令来表示该属性只绑定一次
正确答案:
(1) v-bind
(2) v-on
(3) v-once
解析:
四、简答题

1.Vue-cli中如何对过滤器进行设置？随便写一个过滤器
import Vue from ‘vue’
Vue.filter(‘resetImg’, str => {
if (str && str.startsWith(‘http’)) {
return str
}
return serverUrl + str
})
2.简述slot概念以及在vue组件开发的具体应用
主要是让组件的可扩展性更强。
//定义组件my-component

//给slot一个name属性显示不同的标签

//使用方法

考试

正确答案: Vue 实现了一套内容分发的 API，这套 API 基于当前的 Web Components 规范草案，将元素作为承载分发内容的出口。---插槽

有些时候我们需要多个插槽–具名插槽

简单来说，加入父组件需要在子组件内放置一些DOM，那么这些DOM是显示，不显示，在哪里显示，如何显示，就是slot内容分发负责的活

解析:
https://cn.vuejs.org/v2/guide/components-slots.html

五、编程题
1.
单页面多路由如何设置？
const routes =[
{
path:’/’
name :’ home’
component: () => import(’…/components/ common/Home.vue’),
children:[
path: ’ /home1 ‘，
name:’ home1 ’ ,
component: () => import(’…/components/Home/home1 .vue ’ )
},}]
1.下列哪个选项是正确的插值语法？
A {value}
B { {value}}
C <%value%>
D value
正确答案: B
解析:mustache语法
2.关于样式绑定，下面写法错误的是？（）
A 、v-bind:class=”className”
B ：class=”{ {isActive && active}}”
C :style=”{width: ‘200px’}”
D v-bind:class=”[isActive ? activeClass : ‘’, errorClass]”
正确答案: B
3.条件渲染指令是下列哪项？（）
A v-if
B v-on
C v-model
D v-for
正确答案: A
4.实现双向绑定，需要下列哪个指令？（）
A v-text
B v-show
C v-model
D v-on
正确答案: C
5.插值语法还可以使用下列哪个指令替代？
A v-html
B v-bind:text=
C v-text
D :value=
正确答案: C
6.下列哪个选项是v-model指令的修饰符？（）
A .capture
B .self
C .right
D .number
正确答案: D
解析:
限定双向绑定必须输入可转变的数字型
7.定义vue-router的动态路由，正确的是？
A path=’/user/list?Id=1’;
B path=’/user/list’
C path=’/user/:id’
D path=’/user/parms’
正确答案: C
解析:动态路由需要 path 以及参数比如 ‘/user/:id’
8.获取动态路由中参数name的值，下列正确的是？
A $router.params.name
B $r o u t e . p a r a m s . n a m e C t h i s .$ router.name
D this.router.params.name
正确答案: B
解析:
获取路由参数通过 $route 而不是 $r o u t e r 9 . 使用 V u e x 时，如何更改状态 n a m e ？（） A 直接修改： t h i s .$ store.state.name = ’ingjing‘
B 定义修改name的Action，然后提交该Action
C 通过setState方法进行修改：this.setState({name: ’ingjing‘})
D 定义修改name的Mutation，然后提交该Mutation
正确答案: D
解析:修改vuex state 中的值只能通过Mutation方法实现
10.13、如何使css在当前组件内起作用？
A 在单文件组件中的style上添加scoped
B 定义单独的css文件，在组件内引入即可
C 在单文件组件中的style下写样式
D 没办法实现
正确答案: A
解析:
该题考试局部样式的使用通过scoped
11.vue事件绑定中要阻止冒泡，以下哪种写法是正确的
A