自测试卷4
一、选择题
1．在下面的双大括号标签中，哪一个是无效的表达式？（）A．{{number + 10}}                  B．{{UpperCase()}}
C．{{boo ? '真' : '假'}}              D．{{if(boo) return 1}
2．使用v-for指令不能遍历下列哪种数据类型？（）。
A．整数B．字符串C．数组D．对象
3．在Vue.js中，计算属性需要定义在（）选项中。
A．computed B．watch  C．methods    D．compute
4．下列关于组件的描述错误的是（）。
A．局部注册的组件只能在其父组件中使用，而无法在其它组件中使用
B．组件选项对象中的data和Vue实例选项对象中的data的赋值是一样的
C．组件的模板只能有一个根元素
D．全局组件可在所有实例中使用
5．下列哪个不是Vue.js中的内置组件？（）
A．component B．transition
C．template D．transition-group
6．下列关于过渡的描述错误的是（）。
A．transition组件只会把过渡效果应用到其包含的内容上，而不会额外渲染DOM元素B．自定义的过渡类名的优先级高于普通的类名
C．在<transition>的默认行为中，元素的进入和离开是同时发生的
D．定义离开过渡的开始状态的class类名是v-leave-to
7．运行下面代码，输出结果为（）。
<div id="box">
<span>{{str | lowercase | firstUppercase}}</span>
</div>
<script type="text/javascript">
var demo = new Vue({
el : '#box',
data : {
str : 'HTML'
},
filters : {
lowercase : function(value){
LowerCase();
},
firstUppercase : function(value){
return value.charAt(0).toUpperCase()+value.substr(1);
}
}
});
</script>
A．HTML B．html C．Html D．hTML
web前端开发笔试题库8．在webpack配置文件中，mode配置选项用于配置开发项目使用的模式，下列哪一项不是mode选项可用的模式？ ( )
A．production  B．development  C．none  D．build
9．下列哪一项不是Vuex的组成部分？（）
A．getters B．setters C．mutations D．actions
10．在下列Vue指令中描述错误的是（）。
A．v-on指令用于监听DOM事件
B．v-show指令用于判断是否显示或隐藏DOM元素
C．v-html指令可以更新元素的innerHTML
D．v-model指令用于在表单控件元素上创建单向数据绑定
二、填空题
1．应用filters选项定义的过滤器包括_________和_________两部分。
2．下列代码中，应用v-for指令遍历数组items，将代码补充完整。
<div id="box">
<span v-for="__________">
{{item}}
</span>
</div>
<script type="text/javascript">
var demo = new Vue({
el : '#box',
data : {
items : ['a','b','c']
}
});
</script>
3．v-on指令的简写形式是在事件名称前添加符号_________。
4．如果只有一个复选框，应用v-model绑定的是一个__________值。
5．下列代码中，应用自定义指令设置文本的大小，将代码补充完整。
<div id="example">
<span ____________="'36px'">坚持不懈</span>
</div>
<script type="text/javascript">
var exam = new Vue({
el:'#example',
directives: {
setSize: function (el,binding) {
el.style.fontSize = binding.value;
}
}
})
</script>
6．在多个组件之间进行切换的时候，为了保持这些组件的状态，可以用_________元素将动态组件包含起来。
7．下列代码中，通过Prop将父组件的数据传递给子组件，将代码补充完整。
<div id="example">
<my-component message="传递的数据"></my-component>
</div>
<script type="text/javascript">
Vueponent('my-component', {
props : _________,
template : '<p>{{message}}</p>'
})
var vm = new Vue({
el : '#example'
})
</script>
8．除了使用<router-link>创建<a>标签可以定义导航链接之外，还可以使用router的___________方法实现导航的功能。
9．在下面代码中，当鼠标指向图片时为图片添加边框，请将代码补充完整。
<div id="example">
<img v-bind:src="url" v-on:mouseover="addBorder">
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#example',
data:{
url : 'images/js.png'
},
methods : {
addBorder : function(e){
______________________ = '1px solid blue';
}
}
})
</script>
10．在组件中访问定义的getter可以使用简化的写法，即通过辅助函数___________将store中的getter 映射到局部计算属性。
三、编程题
1．实现改变文本颜的功能。每间隔1秒钟，使文本颜在红、绿、蓝三种颜之间进行变换。
2．应用自定义指令实现如下功能：
单击“单击显示下拉菜单”按钮弹出一个下拉菜单，单击页面中除了下拉菜单本身之外的其他区域后隐藏下拉菜单内容。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。