vue前端面试刷题练习1 峰峰博客

峰峰吃芒果

墨衍会员 · AI 创作全网分发码龄5年

关注

原创最新推荐文章于 2026-03-25 00:40:33 发布 1.1w 阅读 AI 写同款· GEO 优化 ›

使用vue-cli3.0创建一个项目阅读详情

一、选择题

1．在Vue实例中可以定义方法的是（ B ）选项。

A. el	B. methods	C. data		D. computed

2．下列指令中，不能实现条件判断的是（ D ）。

A. v-if	  B. v-else     C. v-show	D. v-bind

3．下列代码的运行结果为（ B ）

<div id="example">
	<p>{{len}}</p>
</div>
<script type="text/javascript">
var exam = new Vue({
	el:'#example',
	data:{
		str : 'JavaScript'
	},
	computed : {
		len : function(){
			return this.str.length;
		}
	}
})
</script>

A．9  		B．10  		C．11  		D．12

4．下列指令中，可以对表单元素进行双向数据绑定的是（ A ）。

A．v-model  	B．v-on     C．v-bind  		D．v-show

5．在子组件中触发自定义事件的方法是（ A ）。

A． $emit	B． $event		C． $this	D． $on

6．在元素显示与隐藏的过渡中，用于定义元素离开过渡生效时的状态的class类名是（ D ）。

A．v-leave	B．v-enter-active    C．v-leave-to	D．v-leave-active

7．下列代码中，横线处的正确写法是（ A ）。

<div id="example">
	<my-component ______="陪你看日出"></my-component>
</div>
<script type="text/javascript">
var vm = new Vue({
	el : '#example',
	components : {
		'my-component' : {
			props : ['myTitle'],
			template : '<p>{{myTitle}}</p>'
		}
	}
})
</script>

A．my-title	B．mytitle    C．myTitle     D．MyTitle

8．下列哪个不是webpack配置文件中的配置选项？（ D ）。

A．mode     B．entry    C．module         D．enter

9．下列选项中哪个不是指令定义对象中的钩子函数？（ C ）

A．bind	B．inserted	C．updated 		D．unbind

10．下列关于生命周期钩子函数的说法错误的是（ D ）。

A．beforeCreate钩子在Vue实例开始初始化时调用
B．created钩子在实例创建之后进行调用
C．mounted钩子在DOM文档渲染完毕之后进行调用
D．destroyed钩子在实例被销毁之前进行调用

二、填空题

1．以下代码的输出结果为 `html` 。

<div id="box">
	<span>{{str.toLowerCase()}}</span>
</div>
<script type="text/javascript">
    var demo = new Vue({
        el : '#box',
        data : {
			str : 'HTML'
        }
    });
</script>

2．如果需要对一组元素进行判断，需要使用 `<template>` 元素作为包装元素，并在该元素上使用v-if。

3．使用watch选项监听对象内部值的变化，可以在监听属性的选项参数中设置 `deep` 选项。

4．Vue.js为v-on指令提供的事件修饰符中，使用`.store`修饰符可以阻止事件的传播。

5．当选中某个单选按钮时，v-model绑定的属性值会被赋值为该单选按钮的`value属性值`。

6．以下代码的输出结果为 `登录`。

<div id="example">
	{{value}}
</div>
<script type="text/javascript">
Vue.component('my-button', {
    template: '<span> \
		<slot>注册</slot> \
      </span>'
})
var vm = new Vue({
    el: "#example",
	data: {
		value : '登录'
	}
});
</script>