vue期末复习选择题3

1. 下面哪一个不是Vue中的指令？（D）

• A. v-text
• B. v-html
• C. v-on
• D. setup

[!NOTE]

Vue 中的指令通常以 v- 开头，而 setup 是一个用于设置组件选项的函数，不是 Vue 中的指令。

2. 下列关于Vue的说法错误的是( D )。

• A. Vue中的MVVM主要有三部分组成，分别是Model、View和ViewModel。
• B. Vue是一套构建用户界面的渐进式框架，Vue的核心只关注视图层。
• C. 目前三大前端主流JS框架是Angular、React和Vue。
• D. 用Vite构建的Vue项目是基于Vue2.0版本的。

[!NOTE]

Vite 是一个快速、简单的构建工具，用于构建现代的 Web 应用。它支持 Vue 3，并且能够很好地与 Vue 3 的新特性（如 Composition API）结合使用。虽然 Vue 2 也可以与 Vite 结合使用，但 Vite 更加适合于构建 Vue 3 项目。因此，用 Vite 构建的 Vue 项目可以是基于 Vue 2.0 版本，也可以是基于 Vue 3.0 版本的。

3. show是在vue组件中定义的方法，下面哪一个选项不能正确的将该方法与组件模板中的p元素的事件进行绑定？（ A ）

• A. <p @:mouseenter="show">河南科技大学</p>
• B. <p @click="show">河南科技大学</p>
• C. <p v-on:click="show">河南科技大学</p>
• D. <p v-on:mouseenter="show">河南科技大学</p>

[!NOTE]

事件名应该是 @mouseenter，而不是 @:mouseenter。Vue中使用 @ 或 v-on:来绑定事件，然后接着事件名即可，不需要加:。

4. 在Vue中能够实现元素单击事件绑定的代码是( D )。

• A. @:click
• B. @onclick
• C. :click
• D. v-on:click

[!NOTE]

在Vue中，可以使用 v-on 指令来监听 DOM 事件。而要监听元素的单击事件，就需要使用 v-on:click，或者简写为 @click。其他选项都是错误的语法或者不符合Vue的事件绑定规范。

5. 下面哪一项说法是错误的？（A）

• A. 在MVVM模型中，Model和View可以直接通信，互相监控双方的动作并及时进行相应的操作。
• B. npm包管理工具基于的运行环境是Node.js。
• C. 利用ref()函数定义的数据，通过它的value属性修改值。
• D. 在Vue中，每个单文件组件由模版、逻辑和样式三部分组成。

[!NOTE]

在MVVM模型中，Model和View之间不直接通信。相反，ViewModel充当了连接Model和View的中介，负责处理数据转换和传递，而Model和View是相互独立的，彼此不直接通信。

6. Vue中不能实现元素内容渲染的指令是( B )。

• A. v-html
• B. v-on
• C. 插值表达式
• D. v-text

[!NOTE]

在Vue中，v-on 指令用于监听 DOM 事件，并在触发时执行指定的方法，而不是用于元素内容的渲染。其他选项都是用于元素内容渲染的指令：

• A. v-html 用于将数据作为 HTML 插入到元素中。
• C. 插值表达式 ({{ }}) 用于将数据插入到文本内容或属性中。
• D. v-text 用于将数据插入到元素的文本内容中。

7. 下面vue组件代码实现一个计数器：

<template>
    <button type="button" @click="sub">-</button>
    _________________________
    <button type="button" @click="add">+</button>
</template>
<script setup>
    import { ref } from 'vue'
    const num = ref(0)
    
    const sub = () => {
        if(num.value>-10) num.value--
        else alert("不要减了，已经最小了！")
    }
    
    const add = () => {
        if(num.value<10) num.value++
        else alert("不要加了，已经最大了！")
    }
</script>
<style scoped>
    button {
        width: 70px;
        height: 40px;
        color: red;
        font-size: 30px;
        line-height: 30px;
        float: left;
    }
    
    span {
        display: block;
        width: 158px;
        height: 38px;
        border: 1px solid red;
        float: left;
        font-size: 40px;
        text-align: center;
        line-height: 38px;
    }
</style> 

实现效果如下，下面用来补充完整程序的答案中哪一个是错误的。（B）

• A. <span v-html="num"></span>
• B. <span v-on="num"></span>
• C. <span>{{num}}</span>
• D. <span v-text="num"></span>

[!NOTE]

在Vue中，v-on 指令用于监听 DOM 事件，而不是用来显示数据。正确的选项应该是使用 v-text 或者插值表达式 {{ num }} 来显示数据。

8. 在vue组件中定义数据如：const msg=“HelloWorld”，下面哪一个选项不能正确的将该数据应用到组件模板中的p元素上？（C）

• A. <p v-text="msg+'你好'"></p>
• B. <p v-html="msg"></p>
• C. <p {{msg}}></p>
• D. <p>{{msg+"你好"}}</p>

[!NOTE]

• A 选项 <p v-text="msg+'你好'"></p> 使用了 Vue 的指令 v-text，可以将 msg 的值与 '你好' 字符串拼接后显示在 p 元素中。
• B 选项 <p v-html="msg"></p> 使用了 v-html 指令，可以将 msg 的值作为 HTML 解析后显示在 p 元素中，适合当 msg 包含 HTML 标签时使用。
• D 选项 <p>{{msg+"你好"}}</p> 使用了 Vue 的插值表达式 {{ }}，可以将 msg 的值与 '你好' 字符串拼接后显示在 p 元素中。

而 C 选项 <p {{msg}}></p> 使用了错误的语法，Vue 中不支持直接在元素标签上使用 {{ }} 插值表达式。正确的语法应该是使用 Vue 指令或插值表达式来绑定数据到元素属性或文本内容上。

二. 多选题（共2题，20分）

9. 下面哪些函数是用来定义响应式数据的？（BCDE）

• A. setup()
• B. reactive()
• C.toRefs()
• D. ref()
• E. toRef()

[!NOTE]

• B. reactive(): 用于创建一个响应式的对象。
• C. toRefs(): 用于将响应式对象转换为响应式的 ref 对象。
• D. ref(): 用于创建一个包装简单值的响应式对象。
• E. toRef(): 用于创建一个 ref 对象，该对象会追踪另一个 ref 或 reactive 对象的单个属性。

10. 下面关于Vite构建的vue项目文件结构说法正确的是哪些？（ABCDE）

• A. node_modules文件夹存放项目的各种依赖和安装的插件。
• B.App.vue是项目的根组件。
• C.main.js是项目的入口文件。
• D.index.html是默认的主渲染页面文件，同时也是页面的入口文件。
• E.style.css文件是项目的全局样式文件。