项目4课后习题

项目四课后习题一、单项选择题。1、下列关于Vue实例对象说法不正确的是（D）。A、Vue实例对象是通过newVue({)}方式创建的B、Vue实例对象只允许有一个唯一的根标签C、通过methos参数可以定义事件处理函数D、Vue实例对象中的data数据不具有响应特性2、Vue中实现数据双向绑定的是（C） A、v-bind B、v-for C、v-model D、v-if3、在Vue中，能够实现页面单击事件绑定的代码是（B）。 A、v-on:enterB、v-on:click C、v-on:mouseenter D、v-on:doubleclick1.在Vue项目中，通常哪个文件是项目的入口文件？（B）A.

index.htmlB.

main.js

或

main.tsC.

App.vueD.

router/index.js2.Vue组件中用于接收父组件传递的数据的属性是？（B）A.

dataB.

propsC.

computedD.

methods4.在Vue中，组件之间通信的方式不包括以下哪项？（C）A.父子组件通过props和$emitB.兄弟组件通过VuexC.任意组件通过$refsD.任意组件通过provide和inject4.4.ElementPlus是基于哪个版本的Vue设计的？（C）A.Vue1.xB.Vue2.xC.Vue4.xD.Vue4.x5.Vue3的路由配置需要使用哪个库？（C）A.VueRouter2.xB.VueRouter4.xC.VueRouter4.x(VueRouterNext)D.VueRouter5.x6.Vue3的路由配置与Vue2的主要区别是什么？（B）A.Vue3不再支持路由B.Vue3的路由配置语法有所变化C.Vue3的路由配置需要额外的库D.Vue3的路由配置与Vue2完全相同7.Vue组件中用于定义响应式数据的选项是？（D）A.

dataB.

propsC.

computedD.

methods8.在Vue中，哪个选项用于监听DOM事件？（C）A.

watchB.

computedC.

methodsD.

events9.ElementPlus的el-button组件主要用于什么？（C）A.显示文本B.显示图片C.触发按钮点击事件D.展示表格数据10.Axios网络请求库默认的请求方式是什么？（A）A.GETB.POSTC.PUTD.DELETE二、判断题，正确的画‘√’，错误的画‘×’。1.Vue3的项目结构与Vue2大致相同，只是某些配置和API有所变化。（√）2.在Vue3中，使用Vponent()方法可以全局注册组件。（×）4.Vue组件之间只能通过props和$emit进行通信。（×）4.ElementPlus是ElementUI的Vue3版本。（√）5.Axios是一个基于Promise的HTTP客户端，只能用于浏览器端。（×）6.Vue3的路由配置必须使用VueRouter4.x版本。（√）7.在Vue3中，data选项必须是一个返回对象的函数。（√）8.ElementPlus的el-alert组件用于显示警告提示。（√）9.Axios发送请求时，默认的数据传输格式是JSON。（×）10.Vue3的ref和reactive都可以创建响应式数据，但用法和适用场景不同。（√）三、程序设计题。1、创建一个名为TodoItem的Vue3组件，该组件接收一个todo对象作为props，该对象包含id、text和completed三个属性。组件应展示待办事项的文本，并允许用户通过点击一个复选框来标记待办事项为已完成。。参考答案：<!--TodoItem.vue--><template><!--在这里编写你的模板代码--></template><script>exportdefault{//在这里编写你的组件选项props:{todo:{type:Object，required:true，validator:function(todo){returntodo.id&&typeoftodo.text==='string'&&typeofpleted==='boolean';}}}};</script><stylescoped>/*在这里编写你的样式代码*/</style>2、在Vue3中，创建两个组件ParentComponent和ChildComponent。在ParentComponent中，使用provide方法提供一个名为themeColor的值。在ChildComponent中，使用inject选项来接收并使用这个themeColor值来设置组件的样式。<!--ParentComponent.vue--><template><div><ChildComponent/></div></template><script>importChildComponentfrom'./ChildComponent.vue';exportdefault{components:{ChildComponent}，setup(){constthemeColor='blue';//使用provide提供themeColor}};</script><!--ChildComponent.vue--><template><!--使用themeColor--></template><script>exportdefault{inject:['themeColor']，//在这里使用themeColor};</script>使用ElementPlus库，创建一个包含用户名和密码输入字段的登录表单。当用户点击登录按钮时，验证输入字段，并显示相应的消息（例如，如果密码太短）。<template><el-form:model="loginForm":rules="rules"ref="loginFormRef"label-width="120px"><!--用户名和密码输入字段--><el-form-itemlabel="用户名"prop="username"><el-inputv-model="loginForm.username"></el-input></el-form-item><el-form-itemlabel="密码"prop="password"><el-inputtype="password"v-model="loginForm.password"></el-input></el-form-item><el-form-item><el-buttontype="primary"@click="handleSubmit">登录</el-button></el-form-item></el-form></template><script>import{ref}from'vue';import{ElMessage}from'element-plus';exportdefault{setup(){constloginForm=ref({username:''，password:''});construles={