vuel练习

最新推荐文章于 2024-07-22 14:15:06 发布

ghj12nn

最新推荐文章于 2024-07-22 14:15:06 发布

阅读量988

点赞数 28

文章标签： java 前端 javascript

本文链接：https://blog.csdn.net/2305_77193681/article/details/135559886

版权

1. (单选题, 1分)MVVM主要包含3个部分，分别是Model，View和（）。

A. VirtualModel
B. VisualModel
C. ViewMobile
D. ViewModel

我的答案: D:ViewModel;正确答案: D:ViewModel;

1分

2. (单选题, 1分)‏data属性中的变量类型不能是下面的哪一种

A. 逻辑型boolean
B. 数组类型array
C. 单精度float
D. 数值型number

我的答案: C:单精度float;正确答案: C:单精度float;

1分

3. (单选题, 1分)el属性的取值用哪个比较好

A. 标签的class属性
B. 标签的id属性
C. body标签
D. 除body外的标签

我的答案: B:标签的id属性;正确答案: B:标签的id属性;

1分

答案解析：

4. (单选题, 1分)‌v-on指令可以简写为

A. !
B. :
C.
@
D. %

我的答案: C:@;正确答案: C:@;

1分

答案解析：

5. (单选题, 1分)以下那个不是v-model指令的修饰符

A. digit
B. number
C. lazy
D. trim

我的答案: A:digit;正确答案: A:digit;

1分

6. (单选题, 1分)v-if指令有几种形式

A. 2
B. 1
C. 3
D. 4

我的答案: C:3;正确答案: C:3;

1分

7. (单选题, 1分)以下关于v-show指令错误的是

A.
v-show通过控制元素的display属性实现显示和隐藏
B. v-show可以控制内容的显示和隐藏
C.
v-show适用于频繁切换的场景
D. v-show通过对元素删除和重建实现显示和隐藏

我的答案: D:v-show通过对元素删除和重建实现显示和隐藏;正确答案: D:v-show通过对元素删除和重建实现显示和隐藏;

1分

8. (单选题, 1分)‎v-for中index的起始值为

A. 0
B. 3
C. 2
D. 1

我的答案: A:0;正确答案: A:0;

1分

9. (单选题, 1分)‍v-for指令中，可以删除元素的方法有

A. unshift和shift
B. push和pop
C. push和shift
D. pop和shift

我的答案: D:pop和shift;正确答案: D:pop和shift;

1分

10. (单选题, 1分)‍样式绑定使用哪个指令？

A. v-html
B. v-on
C. v-model
D. v-bind

我的答案: D:v-bind;正确答案: D:v-bind;

1分

11. (单选题, 1分)‌如果想根据条件切换列表中的class，在标签元素中使用

A.
v-if指令
B. 三元表达式
C. v-else指令
D. 方法

我的答案: B:三元表达式;正确答案: B:三元表达式;

1分

12. (单选题, 1分)下面那个指令可用于双向绑定

A. v-html
B. v-text
C. v-model
D. v-bind

我的答案: C:v-model;正确答案: C:v-model;

1分

13. (单选题, 1分)若希望文本框中输入的字符串转为有效的数字，使用哪个修饰符

A. lazy
B. trim
C. number
D. enter

我的答案: C:number;正确答案: C:number;

1分

14. (单选题, 1分)‍计算属性与方法的区别是

A. 方法有缓存
B. 计算属性有返回结果
C. 计算属性有缓存
D. 方法有返回结果

我的答案: C:计算属性有缓存;正确答案: C:计算属性有缓存;

1分

15. (单选题, 1分)下面关于过滤器的说法中，错误的是

A. 过滤器通过给定的过滤条件，对数据进行筛选
B. 过滤器会产生新的数据
C. 过滤器在使用时必须配合管道符号
D. 过滤器的第一个参数默认是进行过滤的数据

我的答案: B:过滤器会产生新的数据;正确答案: B:过滤器会产生新的数据;

1分

16. (单选题, 1分)父组件向子组件传递数据最好使用

A. 参数
B. emit
C. props
D. send

我的答案: C:props;正确答案: C:props;

1分

17. (单选题, 1分)‍vue中的插槽有几种类型

A. 3
B. 1
C. 4
D. 2

我的答案: A:3;正确答案: A:3;

1分

18. (单选题, 1分)Vue.js的核心库是什么？

A. vue.js
B. vue-router.js
C. vuex.js
D. axios.js

我的答案: C:vuex.js;正确答案: A:vue.js;

0分

19. (单选题, 1分)Vue.js的指令v-bind是什么？

A. 样式绑定
B. 事件绑定
C. 属性绑定
D. 数据绑定

我的答案: B:事件绑定;正确答案: C:属性绑定;

0分

20. (单选题, 1分)Vue.js的指令v-show是什么？

A. 条件渲染指令
B. 循环指令
C. 键盘指令
D. 事件指令

我的答案: B:循环指令;正确答案: A:条件渲染指令;

0分

二. 判断题（共5题，5分）

21. (判断题, 1分)Vue是一套用于构建用户界面的渐进式JavaScript 框架。

A. 对
B. 错

我的答案: 对正确答案: 对

1分

22. (判断题, 1分)Vue可以在Node环境下进行开发，并借助npm包管理器来安装依赖。

A. 对
B. 错

我的答案: 对正确答案: 对

1分

23. (判断题, 1分)在项目中引入了 vue.js文件，才可以创建Vue 实例。

A. 对
B. 错

我的答案: 对正确答案: 对

1分

24. (判断题, 1分)单文件组件默认导出语法为export default。

A. 对
B. 错

我的答案: 对正确答案: 对

1分

25. (判断题, 1分)单文件组件是 Vue 的核心特性之一，它以 .vue 文件作为组件的文件格式。

A. 对
B. 错

我的答案: 对正确答案: 对

1分

三. 填空题（共29题，58分）

26. (填空题, 2分)Vue中的______指令可以监听一个事件并调用一个方法。

我的答案：

2分

(1) v-on

正确答案：

(1) v-on

27. (填空题, 2分)在Vue中，可以使用______来定义组件内部的数据。

我的答案：

0分

(1) is

正确答案：

(1) data

28. (填空题, 2分)在Vue中______可以用来代替v-if指令，以提高性能。

我的答案：

0分

(1) v-bind

正确答案：

(1) v-show

答案解析：

v-show

29. (填空题, 2分)Vue中的______指令用于循环渲染一段HTML。

我的答案：

2分

(1) v-for

正确答案：

(1) v-for

30. (填空题, 2分)在Vue中使用______属性可以指定组件的名称。

我的答案：

2分

(1) name

正确答案：

(1) name

31. (填空题, 2分)在Vue中使用______指令可以绑定一个动态的CSS类名。

我的答案：

0分

(1) v-on

正确答案：

(1) v-bind:class

32. (填空题, 2分)在Vue中，{{ }} 是用来进行插值处理的语法。其中，{{ }} 内部可以填入__________，用来动态展示Vue实例中的数据。(填写js表达式或js语句)

我的答案：

0分

(1) Vue与Angular语法是完全相同的

正确答案：

(1) js表达式

33. (填空题, 2分)

在vue中，如果需要输出HTML代码而不是将其作为纯文本显示，可以使用____________指令。

我的答案：

2分

(1) v-html

正确答案：

(1) v-html

34. (填空题, 2分)

<!DOCTYPE html>

<html>

<head>

<title>My first Vue app</title>

</head>

<body>

</div>

var app = new Vue({

el: '#app',

data: {

message: 'Hello Vue!'

}

})

</script>

</body>

</html>

程序运行后在浏览器输出的信息是______________

我的答案：

0分

(1) {{ message }}

正确答案：

(1) Hello Vue!

35. (填空题, 2分)

<!DOCTYPE html>

<html>

<head>

<title>My first Vue app</title>

</head>

<body>

(1) message0+message1+message2 (2)

</div>

var app = new Vue({

el: '#app',

data: {

message0: 'I ',

message1: 'love',

message2: ' china!'

}

})

</script>

</body>

</html>

上面的程序运行后输出I love china！,请补充完整代码

我的答案：

0分

(1) item in items或者 (item,index) in items

(2)

正确答案：

(1) {{

(2) }}

36. (填空题, 2分)

<!DOCTYPE html>

<html>

<head>

<title>My first Vue app</title>

</head>

<body>

</div>

var app = new Vue({

el: '#app',

data: {

str: "<img src='https://img1.baidu.com/it/u=1890390320,3399874998&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800'>"

}

})

</script>

</body>

</html>

上面的程序运行的时候输出了str中的图片，请补充完整程序

我的答案：

0分

(1) changeName(newName, oldName)

正确答案：

(1) v-html="str"

37. (填空题, 2分)

<!DOCTYPE html>

<html>

<head>

<title>My first Vue app</title>

</head>

<body>

<p v-if="seen">现在你看到我了</p>

</div>

var app3 = new Vue({

el: '#app-3',

data: {

seen: ______(1)_______

}

})

</script>

</body>

</html>

补充代码（用最简单的代码），让程序运行后输出：现在你看到我了

我的答案：

0分

(1) {{ message }}

正确答案：

(1) true

38. (填空题, 2分)

在Vue中，可以使用 v-if 指令来根据条件动态地渲染HTML元素。请填写下面的程序，使得当 data中的isActive 的值为 true 时，显示一个 <p> 元素，内容为 “Active”：

Plain Text

<div> <___(1)____ v-if="____(2)_____">Active</____(3)____> </div>

我的答案：

0分

(1) true

(2)

(3)

正确答案：

(1) p

(2)

Plain Text

isActive

(3) p

39. (填空题, 2分)

在Vue中，可以使用 v-show 指令来根据条件控制元素的显示和隐藏。请填写下面的程序，使得当 isVisible 的值为 true 时，显示一个 <div> 元素，否则隐藏该元素：

Plain Text

<div ______(1)______='______(2)_______'> Content to be shown </div>

我的答案：

0分

(1) true

(2)

正确答案：

(1)

Plain Text

v-show

(2) isVisible

40. (填空题, 2分)

在Vue中，v-model指令用于双向数据绑定，可以将表单元素的值与Vue实例的数据进行同步。假设有一个Vue实例 app，其中有一个名为 username 的数据属性，存储了用户的用户名。请填写下面的程序，使得一个 <input> 元素与 username 数据属性进行双向绑定，实现用户输入的值实时更新到 username 中：

Plain Text

我的答案：

0分

(1) 对

正确答案：

(1) username

41. (填空题, 2分)

</div>

var app3 = new Vue({

el: '#app-3',

data: {

isActive: true

}

})

console.log(app3.$data.isActive == app3.$data.isActive);

</script>

程序运行后console.log输出的信息是_____(1)______

我的答案：

0分

(1) 张三

正确答案：

(1) true

42. (填空题, 2分)

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<h2 v-if="visible"> hello world</h2>

</div>

</body>

</html>

//数据驱动，响应式

let vm =new Vue({

el: '#root',

data: {

visible: ______(1)________

}

});

</script>

程序运行后需要显示hello world

我的答案：

0分

(1) vm.msg

正确答案：

(1) true

43. (填空题, 2分)

v-if和v-show的区别是：

v-if的条件如果为false，则对应的标签_________在dom树中（填存在，或不存在），

v-show的条件如果为false，则对应的标签_________在dom树中（填存在，或不存在），

我的答案：

1分

(1) 存在

(2) 存在

正确答案：

(1) 不存在

(2) 存在

44. (填空题, 2分)

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<h2 v-if="chengJi>90" >成绩评定A:奖励电脑一台 </h2>

<h2 v-else-if="chengJi>70 && chengJi<=90">成绩评定B:奖励周末郊游 </h2>

<h2 v-else-if="chengJi>=60 && chengJi<70" >成绩评定C:奖励零食一包 </h2>

<h2 v-else>成绩评定D:一周不能玩手机 </h2>

</div>

</body>

</html>

//数据驱动，响应式

let vm =new Vue({

el: '#root',

data: {

chengJi: 69

}

});

</script>

程序运行后显示信息为：

我的答案：

0分

(1) 1000

正确答案：

(1) 成绩评定C:奖励零食一包

45. (填空题, 2分)

<!DOCTYPE html>

<head>

<title>使用v-bind在列表选项上绑定对象</title>

</head>

<body>

<button v-on:click="clickFun()">切换显示隐藏</button>

</div>

var app = new Vue({

el: "#app",

data: {

stu: { id: '0001', name: '张三', age: 12 },

isShow: true

}

methods: {

clickFun() {

//注意变量

this.isShow = ___________;

}

})

</script>

</body>

</html>

上面的程序运行后，点击按钮，如果学生信息是显示的，则隐藏，反之则显示

我的答案：

0分

(1) false

正确答案：

(1) !this.isShow

46. (填空题, 2分)

<!DOCTYPE html>

<head>

<title>使用v-bind在列表选项上绑定对象</title>

</head>

<style>

.main {

display: block;

margin: 0 auto;

width: 400px;

height: 200px;

background-color: grey;

}

.cell {

float: left;

width: 99px;

height: 99px;

margin-right: 1px;

margin-bottom: 1px;

background-color: chocolate;

line-height: 100px;

text-align: center;

font-size: 20px;

font-weight: 700;

}

.cell:hover {

color: white;

}

</style>

<body>

<p>当前输入是：{{value}}</p>

</div>

var app = new Vue({

el: "#app",

data: {

value: ''

}

methods: {

cellClick(number) {

this.value += number

}

})

</script>

</body>

</html>

上面的程序运行后效果如下图：

当前输入之所以为123，是因为我先点击了1，再点击了2，再点击了3，有一点计算器输入的效果。完成填空

我的答案：

0分

(1) text/css

(2) background-color

(3) class

(4)

(5)

(6)

(7)

(8)

正确答案：

(1) 1;'1';"1"

(2) 2;'2';"2"

(3) 3;'3';"3"

(4) 4;'4';"4"

(5) 5;'5';"5"

(6) 6;'6';"6"

(7) 7;'7';"7"

(8) 8;'8';"8"

47. (填空题, 2分)

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<style>

#father{

background-color: cadetblue;

width: 800px;

height: 600px;

border:1px solid;

}

#son{

background-color: green;

width: 400px;

height: 300px;

border:1px solid;

margin-top: 150px;

margin-left: 200px;

}

#sun{

background-color: red;

width: 200px;

height: 150px;

margin-top: 75px;

margin-left: 100px;

}

</style>

<body>

</div>

</body>

</html>

new Vue({

el:'#app',

data:{

methods:{

father(){

console.log('father');

son(){

console.log('son');

sun(){

console.log('sun');

}

});

</script>

上面的程序运行后效果如下：

现在需要反向响应单击事件，也就是当我点击红色div的时候，最先响应的是最外面的div，然后是中间绿色的div，最后是红色的div，请补充代码

我的答案：

0分

(1)

(2)

正确答案：

(1) capture

(2) capture

48. (填空题, 2分)

阻止事件冒泡使用_________(填.stop或.self或.capture或.once 或.prevent

)

我的答案：

2分

(1) .stop

正确答案：

(1) .stop

49. (填空题, 2分)

<!DOCTYPE html>

<html>

<head>

<title>My first Vue app</title>

</head>

<body>

<input type="text" name="stuName" v-bind:value="sName+'hello'">这里输出的是________

<input type="text" name="stuName" v-bind:value="a+b+'abc'">这里输出的是________

</div>

var app3 = new Vue({

el: '#app',

data: {

sName:'liMing ',

a:10,

b:20,

}

})

</script>

</body>

</html>

我的答案：

0分

(1) {{ message }}

(2)

正确答案：

(1) liMing hello

(2) 30abc

50. (填空题, 2分)

<!DOCTYPE html>

<html>

<head>

<title>My first Vue app</title>

</head>

<body>

<button v-show="index<_____________" @click="xiaYiYe()">下一页</button> <img :src="urls[index]" alt="猫"> <button v-show="index>_______" @click="shangYiYe()">上一页</button>

</div>

new Vue(

{

el: '#app',

data() {

return {

urls: ["https://img0.baidu.com/it/u=4603732,1550247081&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800", 'https://img1.baidu.com/it/u=1890390320,3399874998&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800', 'https://img1.baidu.com/it/u=1586503404,2024787974&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800'],

index: 0

}

methods: {

shangYiYe() {

this.index--

xiaYiYe() {

this.index++

}

);

</script>

</body>

</html>

上面的程序运行以后，如果点击下一页和上一页按钮都不允许出现urls数组下标越界，所以可以在合适的时候将按钮隐藏起来，请补充完整代码

我的答案：

0分

(1) showMsg;showMsg()

(2)

正确答案：

(1) urls.length-1;2

(2) 0

51. (填空题, 2分)v-bind:是对标签的_____进行绑定,可以简写为

我的答案：

0分

(1) ：

(2)

正确答案：

(1) 属性

(2) :

52. (填空题, 2分)

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<style>

.rect{

width: 200px;

height: 200px;

background-color: green;

}

.text{

line-height: 200px;

text-align: center;

font-size: 40px;

color: white;

}

</style>

<body>

<div :class="[________,___________]" >hello</div>

</div>

</body>

</html>

//数据驱动，响应式

let vm =new Vue({

el: '#root',

data: {

shape:'rect' ,

txt:'text'

}

});

</script>

上面的程序中的hello要启用程序中定义好的 .rect和.text样式，请补充完整代码,注意填空的时候按照样式定义好的先后顺序填写

我的答案：

0分

(1) #clear{width:200px;}

(2)

正确答案：

(1) shape;'rect'

(2) txt;'text'

53. (填空题, 2分)

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<style>

.rect{

width: 200px;

height: 200px;

background-color: green;

}

.text{

line-height: 200px;

text-align: center;

font-size: 40px;

color: white;

}

</style>

<body>

<div :class="{'rect':a,'text':b}" >hello</div>

</div>

</body>

</html>

//数据驱动，响应式

let vm =new Vue({

el: '#root',

data(){

return{

a:_______,

b:______

}

});

</script>

上面的程序需要启动.rect样式启用，.text样式不启用，请补充完整代码

我的答案：

0分

(1) div{ width:200px; margin:0 auto; }

(2)

正确答案：

(1) true

(2) false

54. (填空题, 2分)

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<style>

.font{

font-size: 50px;

font-weight: 700;

color: green;

text-align: center;

line-height: 200px;

}

</style>

<body>

</div>

</body>

</html>

//数据驱动，响应式

let vm = new Vue({

el: '#root',

data(){

return{

yangShi:{

width: ____________,

height: ___________,

backgroundColor: 'pink',

borderRadius: '100%'

}

});

</script>

上面的程序要求启用data中定义的样式，并且样式宽度和高度为200px

我的答案：

0分

(1) #clear{width:200px;}

(2)

(3)

正确答案：

(1) yangShi

(2) '200px'

(3) '200px'

四. 程序补充题（共5题，20分）

55. (程序补充题, 4分)请补充完整代码，使页面能显示“hello”

我的答案：

0分

(1) url

正确答案：

(1) message: 'hello'

56. (程序补充题, 4分)

为了组件能正常使用，请补充完整代码。

我的答案：

0分

(1)

每种回火工艺1分,回火后组织1分

正确答案：

(1) MyComponent;MyComponent,

57. (程序补充题, 4分) 定义一个计算属性fullName，该属性能将firstName和lastName连接成“John-Doe”。

我的答案：

0分

(1) function() { return this.firstName + + this.lastName; }

正确答案：

(1) computed: {

fullName() {

return this.firstName + '-' + this.lastName

}

58. (程序补充题, 4分)

将代码补充完整，使“你好呀”能根据条件的不同决定是否显示。

我的答案：

0分

(1)

每种回火工艺1分,回火后组织1分

正确答案：

(1) v-if="showMessage"

59. (程序补充题, 4分)将代码补充完整，根据用户选择的主题风格，渲染不同的页面样式。当isDarkTheme为true时采用dark-theme样式

我的答案：

0分

(1) 图形图标

正确答案：

(1) :class="{'dark-theme': isDarkTheme}"

ghj12nn

关注

28
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
vuel练习

我的答案: D:ViewModel;正确答案: D:ViewModel;1分我的答案: C:单精度float;正确答案: C:单精度float;1分我的答案: B:标签的id属性;正确答案: B:标签的id属性;1分答案解析：@我的答案: C:@;正确答案: C:@;1分答案解析：我的答案: A:digit;正确答案: A:digit;1分我的答案: C:3;正确答案: C:3;1分v-show通过控制元素的display属性实现显示和隐藏v-show适用于频繁切换的场景我的答案: D:v-show通过对元
复制链接

扫一扫