Vue.js3.0练习题 |
您所在的位置：网站首页 › vue中的model是什么 › Vue.js3.0练习题 |
Vue.js3.0练习题
|
第一章：Vue 3.0 概述
1、选择题
1.1、在MVVM设计模式中，Model代表的是_______。 A. 数据模型 B. 控制器 C. 视图 D、监听模型 1.2、在Vue中挂载点是在_______文件中定义的。 A. main.js B. App.vue C. index.vue D、index.html 1.3、文本插值是数据绑定的最基本形式，使用_______符号进行。 A. [ ] B. { } C. { { } } D、< > 1.4、路由设置是在_______文件中定义的。 A. store / index.js B. main.js C. router / index D、App.vue 1.5、Vue.js 3.0的入口文件是_______。 A. main.js B. App.vue C. index.vue D、index.html 1.6、标签的作用是_______。 A. 显示超级链接 B.渲染符合路由规则的组件内容 C.显示路由规则 D. 监听数据 1.7.、语句中scoped属性的作用是_______。 A. 指定样式是否生效 B.指定样式的引入方式 C.指定样式是什么语法方式 D.指定CSS样式仅在本组件内起作用 18、@是一个别名，相当于_______文件夹。 A. /src B. /view C. /router D. /asset 2、简答题2.1、MVVM设计模式框架是什么？ 2.2、如何让css仅在当前组件内起作用？ 2.3、vue3．0设置路由是修改哪个文件？ 2.4、下面语句的作用是什么？ import App from ' ./view/index.vue '
2.5、把文件“./view/index.vue"修改为入口组件的方法是什么？ 3、实验题 3.1、实验一：Hello World 3.1.1、实验目的及要求 3.1.1.1、掌握Vue 3.0项目的创建过程。3.1.1.2、掌握脚手架中各个文件夹及文件的作用。 3.1.1.3、掌握Vue 3.0组件的结构。 3.1.2、实验要求使用 Vue 3.0 实现如实验图1-1所示的内容，与1.4.6小节中的内容相似，仅多加两条导航，并在每个文件层次上加了边框，同时渲染当前访问时间。
1.1、 在数组的解构赋值中，var [a,b,c]=[1,2 ]结果中a、b、c的值分别是_______。 A. 1、 2、null B. 1、2、undefined C. 1、2、2 D. 抛出异常 1.2、 在对象的解构赋值中，var {a,b,c}= {'e:10, 'b;9,a':8}结果中的a、b、c的值别是_______。 A. 10、9、8 B. 8、9、10 C. undefined、9、undefined D. null、9、null 1.3.、关于模板字符串，下列说法不正确的是_______。 A.使用反引号标识 B.插入变量的时候使用S{ } C.所有的空格和缩进都会被保留在输出中 D. S{ } 中的表达式不能是函数的调用 1.4、 数组扩展的fill( )函数，[1.2.3].fill(4)的结果是_______。 A. [4] B. [1,2,3,4] C. [4,1,2.3] D. [4.4.4] 1.5.、在数组的扩展中，不属于数组遍历的函数是_______。 A. keys( ) B. entries( ) C. values( ) D. find() 1.6、 关于简头函数的描述，下列说法错误的是_______。 A.使用简头符号“=>”定义 B.参数超过1个，需要用小括号“( )”括起来 C. 函数体语句超过1句，需要用大括号“{ }” 括起来，用return语句返回 D.函数体内的this对象，绑定使用时所在的对象 1.7、 关于Map结构的介绍，下列说法错误的是_______。 A. 是键值对的集合 B. 创建实例需要使用new关键字 C. Map结构的键必须是引入类型 D. Map结构是可遍历的 1.8、 想要获取取Map实例对象的成员数，利用的属性是_______。 A. size B. length C. sum D. Members 1.9、 关于关键字const，下列说法错误的是_______。 A. 用于声明常量，声明后不可修改 B.不会发生变量提升现象 C.不能重复声明同个变量 D.可以先声明，不赋值 2、简答题2.1、写出下面程序的执行结果。 let arr = [1,2,3,4];var arr2 = []; for(let i of arr){ arr2.push(i*1);} console.1og(arr2);
2.2、使用模板字符申改写下面代码的最后一 句。 let iam =“我是"; let name = "lb" let str =“大家好，”+ iam + name + "，多指教。";
2.3、用对象的简洁表示法改写下面的代码。 let name = "tom" ; let obj={ "name" :name , "say":funct1on(){ alert('hello world'); }};2.4、用箭头函数的形式改写下面的代码。 arr.forEach( function (v,i) { console.1og(i); console.1og(v); } );2.5、定义以下数组: let arr=[1, 2, 2, 3, 4, 5,5，6,7,7，8,8，0，8,6，3,4，56，2]实现数组去重的完整程序。 2.6、简述箭头函数和普通函数的区别。 2.7、简述箭头函数的简化规则。 2.8、写出下面程序的输出结果。 let jsonData = { id: 42, status: "OK", data: [867, 5309] }； let { id, status, data: number ) = jsonData; console.1og(id, status,number);2.9、下面定义一个数组: const list = [ {id:3, name:”张三半”}， {id:5, name:“张无忌”}， {id:13, name:"杨道"}, {id:33, name;“殷天正"}, {id:12, name:"赵敏"}， {id:97, name:"周芷若”} ]编写程序实现以下要求： (1) 找到所有姓“杨”的人。 (2) 找到所有包含“天”字的人。 (3) 找到“周芷若”的id。 2.10、下面程序的运行结果是什么? const headAndTail = (head, ...tail) => [head, tail]; headAndTail(6, 2, 3, 4, 5)2.11、下面程序的运行结果是什么? var a=[1, 4, -5, 10].find((n) => n < 0); var b=[1, 5, 10, 15]. find(function(value, index, arr) { return value > 9; }) var c=[1, 5, 10, 15].findIndex(function(value, index, arr) { return value > 9; } console.log(a); console.1og(b); console.log(c); 3、实验题 3.1、实验一：猜数游戏 3.1.1、实验目的 了解和掌握ES6的语法规则；熟练掌握ES6语言的流程控制语句、过程控制和函数的语法及具体的使用方法。 3.1.2、实验内容实现猜数游戏。 3.1.3、实验要求随机给出一个0 ~ 99 (包括0和99)的数字，然后让用户在规定的次数内猜出是什么数字。当用户随便猜一个数字输入后，游戏会提示该数字太大或太小，然后缩小结果范围，最终得出正确结果。界面设计如实验图2-1所示。 
第三章：Vue 的常用指令
1、选择题
1.1、文本插值是数据绑定的最基本形式，使用_______符号进行。 A. [ ] B. { } C. { { } } D. < > 1.2、 v-bind 指令是Vue.js提供的用于绑定_______的指令。 A. HTML标记 B. HTML属性 C. CSS属性 D. CSS标记 1.3.、v-if 指令用于条件性地渲染内容，内容只会在指令的表达式返回_______值时被渲染。 A. 0 B. 1 C. true D. false 1.4、 Vue.js在HTML文档元素中采用_______指令监听DOM事件。 A. v-if B. v-for C. v-on D. v-bind 1.5、以下代码在页面中的输出结果为_______。 {{ message. split('').reverse().join('') }} import { ref } from 'vue' export default { setup () { const message =ref( hello') return { message } } }A. hello B. hel C. olleh D. llo 2、简答题2.1、说明插值表达式支持的几种运算方法。 2.2、写出v-for指令的三种遍历方法所使用的语句。 2.3、 v-model是什么?怎么使用? Vue js中的标签怎么绑定事件? 2.4、说明至少4种Vue js中的指令及其的用法。 2.5、请说明 v-if 和 v-show 的区别。 3、程序分析3.1、说明下面程序代码的执行结果。 import { reactive, toRefs } from "vue" ; export default { setup() { const state = reactive({ h: "200px" W: "200px" bgc: "red", }); const tag= (b) => (state.bgc = b); return{ ..toRefs(state), tag, }; },};
3.2.说明下面程序代码的执行结果。 |
【本文地址】
今日新闻 |
推荐新闻 |