Vue期末复习题

发布于：2024-12-19 ⋅ 阅读:(12) ⋅ 点赞:(0)
微信交流群：https://732903.hlcode.cn/?id=NK1fWUR

文章目录

复习1

一．选择题

  1. Vue 实例的根元素是通过哪个选项指定的？(A )
    A、 el B、 root C、 element D、 component

  2. 下面哪一个指令用于条件渲染？(D )
    A、 v-if B、 v-show C、 v-else D、 所有上述都是

  3. 在Vue中，如何绑定事件监听器？（C）
    A、 v-bind B、 v-for C、 @click D、 :event

  4. Vue中的计算属性应该放在哪个选项里？（B）
    A、 methods B、 computed C、 data D、 props

  5. 如果你想要在组件间共享数据，以下哪种方式不是推荐的做法？（C）
    A、 使用全局事件总线             B、 使用Vuex状态管理
    C、 直接修改其他组件的data属性             D、 使用父传子的props和子传父的$emit

  6. 下列哪项不是Vue生命周期钩子？（D）
    A、 beforeCreate B、 created C、 beforeDestroy D、 afterMounted

  7. 当我们使用v-for指令时，我们应该使用什么关键字来获取当前迭代项的索引？（B）
    A、 key B、 index C、 I D、 item

  8. 在Vue中，哪个方法用来注册一个全局组件？（A）
    A、 Vue.component()             B、 Vue.register()
    C、 Vue.globalComponent()             D、 Vue.use()

  9. 什么是Vue的单文件组件（SFC）的默认扩展名？（A）
    A、 .vue B、 .js C、 .jsx D、 .html

  10. .在Vue Router中，哪个组件用于渲染匹配到的路由组件？（B）
    A、 B、
    C、 D、

  11. 下面哪一个不是Vue中的指令？（D）
    A、 v-text B、 v-html C、 v-on D、setup

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

  13. 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>

  14. 在Vue中能够实现元素单击事件绑定的代码是( D )。
    A、 @:click B、 @onclick C、 :click D、 v-on:click

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

二．判断题

1.在Vue中，v-bind指令只能用于绑定HTML元素的属性不能用于绑定组件的属性。（×）

2.例的数据对象data必须是一个函数，当组件被多次使用时，这确保了每个组件实例都有自己独立的数据副本。（√）

3.计算属性（computed properties）在依赖的数据发生变化时会自动重新计算，并且计算属性是惰性的，只有当它们所依赖的数据发生改变时才会更新。（√）

4.在Vue中，你可以直接修改来自父组件的props属性这样的修改会反映到父组件中。（×）

5.Vue Router中的路由模式包括hash模式和history模式，其中hash模式不需要服务器配置，而history模式可能需要服务器端做额外的配置以支持HTML5 History API。（√）

三．程序分析题

<!DOCTYPE html>
<html>
<head>
  <title>Vue 填空题</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
  <div id="app">
    <input type="text" v-model="1. ___________ " />
    <p>你输入的内容是: {{2. ___________}}</p>

    <button @click=" 3. ___________">点击问候</button>
    <p>{{ greetingMessage }}</p>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        4. ___________: '',
        greetingMessage: ''
      },
      methods: {
          5. ___________() {
          this.greetingMessage = '你好, ' + this.message;
        }
      }
    });
  </script>
</body>
</html>

答案：
1.v-model=“message” - 将v-model指令绑定到message数据属性。
2.{{ message }} - 在插值表达式中使用message来显示用户输入的内容。
3.@click=“greet” - 将click事件绑定到greet方法。
4.message: ‘’ - 在data选项中定义一个名为message的数据属性，并初始化为空字符串。
5.greet - 定义methods中的greet方法。

四．简答题

1.vue-router有哪几种导航钩子？
三种。
一种是全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。
第二种：组件内的钩子；
第三种：单独路由独享组件

2.说出至少4种vue当中的指令和它的用法？
v-if：判断是否隐藏；v-for：数据循环出来；v-bind:class：绑定一个属性；v-model：实现双向绑定

3.v-on 常用修饰符
.stop 该修饰符将阻止事件向上冒泡。同理于调用 event.stopPropagation() 方法
.prevent 该修饰符会阻止当前事件的默认行为。同理于调用 event.preventDefault() 方法
.self 该指令只当事件是从事件绑定的元素本身触发时才触发回调
.once 该修饰符表示绑定的事件只会被触发一次

4.v-for 与 v-if 的优先级
v-for比v-if优先，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候。

5.Vue子组件调用父组件的方法
第一种方法是直接在子组件中通过this. p a r e n t . e v e n t 来调用父组件的方法第二种方法是在子组件里用 parent.event来调用父组件的方法 第二种方法是在子组件里用 parent.event来调用父组件的方法第二种方法是在子组件里用emit向父组件触发一个事件，父组件监听这个事件就行了。

复习2

一．选择题

1、下列不属于 Vue 开发所需工具的是（D ）。
A．Chrome 浏览器 B．VS Code 编辑器 C．vue-devtools D．微信开发者工具
2、npm 包管理器是基于（ A）平台使用的。
A．Node.js B．Vue C．Babel D．Angular
3、下列选项中，用来安装 vue 模块的正确命令是（A ）。
A．npm install vue B．node.js install vue
C．node install vue D．npm I vue
4、Vue 中实现数据双向绑定的是（ C ）。
A．v-bind B．v-for C．v-model D．v-if
5、在 Vue 中，能够实现页面单击事件绑定的代码是（ B）。
A．v-on:enter B．v-on:click
C．v-on:mouseenter D．v-on:doubleclick
6、下面列出的钩子函数会在 Vue 实例销毁完成时执行的是（ B）。
A．updated B．destroyed C．created D．mounted
7、下列 vue-router 插件的安装命令，正确的是（ A ）。
A．npm install vue-router B．node install vue-router
C．npm Install vueRouter D．npm I vue-router
8、下列选项中说法正确的是（ B ）。
A ．新版的 Vue CLI的包名称为 vue-cli
B．执行 npm uninstall vue-cli -g 命令可以全局删除 vue-cli 包
C．使用 yarn install add @ vue/cli 命令可以全局安装 @ vue/cli 工具
D ．通过 vue add ui 命令来创建图形用户界面
9、关于 CLI 服务，下列选项说法错误的是（ C ）。
A ．在 @ vue/cli-service 中安装了一个名为 vue-cli-service 的命令
B．vue.config.js 是一个可选的配置文件
C．通过 npx vue-cli-service helps 查看所有的可用命令
D ．通过 vue ui 使用 GUI 图形用户界面来运行更多的特性脚本
10、下列关于 SSR 路由的说法，错误的是（ B）。
A ．SSR 的路由需要采用 history 的方式
B．history 模式的路由提交不到服务器上
C．history 模式完成 URL 跳转而无须重新加载页面
D ．hash 模式路由，地址栏 URL 中 hash 改变不会重新加载页面
11、下列选项中，（A ）指令可用来切换元素的可见状态。
A ．v-show
B．v-hide
C．v-toggle
D ．v-slideHide
12、下列关于 ref 作用的说法，错误的是（ D）。
A ．ref 在子组件中使用时，使用 this.$refs.name 获取到组件实例，可以使用组件的所有属性和方法
B．ref 加在普通的元素上，用 this.ref.name 获取到的是 DOM 元素
C．可以利用 v-for 和 ref 获取一组数组或 DOM 节点
D ．ref 在 DOM 渲染完成之前就能使用
13、在Vue中的哪个方法可以定义计算属性？（D）
A. filters
B. methods
C. watch
D. computed
14、下面代码中哪一个选项不可以使cc样式起作用？（D）
A. < p :class= {cc:true} >洛阳牡丹甲天下，花开时节动京城</ p>
B. < p class=“cc”>洛阳牡丹甲天下，花开时节动京城</ p>
C. < p :class= {cc：25>20} >洛阳牡丹甲天下，花开时节动京城</ p>
D. < p :class=“20>25?‘cc’:‘’”>洛阳牡丹甲天下，花开时节动京城</ p>
15、在Vue中的哪个方法是侦听器？（B）
A. map
B. watch
C. computed
D. filters

二．判断题

1． Vue 与 React 语法是完全相同的。（×）
2． 增加代码的耦合度是Vue的优势之一。（×）
3．Vue 是一套构建用户界面的渐进式框架，Vue 的核心只关注视图层。（√）
4．Vue 中 MVVM 框架主要由 3 部分组成 ：Model、View 和 View Model。（√）
5．Vue 可以在 Node 环境下进行开发，并借助 npm 包管理器来安装依赖。（√）

三．简答题

1、vue内置指令主要内容有哪些？（1点，1分）
v-on:事件监听 //v-on:click 页面单击事件绑定的代码
v-bind：单向数据绑定
v-model：双向数据绑定
v-for：遍历数组、对象字符串（列表渲染）
v-if:条件渲染
v-show：显示隐藏
v-text：插入文本内容
v-html：插入包含HTML的内容

2、请简述 JavaScript钩子函数包括哪些。
beforeEnter
enter
afterEnter
enterCancelled
beforeLeave
leave
afterLeave
leaveCancelled

3、请简述什么是 Vue。

一套用于构建用户界面的渐进式框架，本身就是一个 js 文件，与其他大型框架相比，Vue 被设计为可以自底向上逐层应用。

4、请简述 Vue 优势有哪些。

1）轻量级
2）双向数据绑定，MVVM 框架
3）指令，主要包括内置指令和自定义指令，以“ v- ”开头，作用于 HTML 元素。
4）插件，插件用于对 Vue 框架功能进行扩展，通过 MyPlugin.install 完成插件的编写，简单配置后就可以全局使用

四．程序分析题

<template>
  <div id="app">
    <h1>{{ title }}</h1>
    <p v-if="isVisible">{{ message }}</p>
    <button @click="toggleVisibility">Toggle Visibility</button>
    <child-component :message="message" @childEvent="handleChildEvent"> </child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  name: 'App',
  components: {
    ChildComponent,
  },
  data() {
    return {
      title: 'Vue App',
      message: 'Hello Vue!',
      isVisible: true,
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    },
    handleChildEvent(payload) {
      console.log('Received from child:', payload);
    }
  },

computed: {
    formattedMessage() {
      return this.message.toUpperCase();
    }
  },
  watch: {
    message(newVal, oldVal) {
      console.log(`Message changed from ${oldVal} to ${newVal}`);
    }
  },
  created() {
    console.log('App component has been created');
  },
  mounted() {
    console.log('App component has been mounted');
  }
};
</script>

阅读以上代码，回答以下问题：
1、描述v-if指令的作用，并说明在本例中

标签会在什么时候显示或隐藏？
答：v-if指令用于条件性地渲染DOM元素。如果isVisible为true，则

标签会被渲染；如果isVisible为false，则

标签不会出现在DOM中。

2、@click指令绑定了什么？点击按钮时会发生什么？
答：@click指令绑定的是toggleVisibility方法，当用户点击按钮时，该方法会被调用，进而改变isVisible的状态，导致

标签显示或隐藏。

3、watch选项中的message观察者做什么？它何时被触发？
答：watch选项中的message观察者监听了message的变化。一旦message的值发生改变，观察者就会触发，并执行相应的回调函数，输出旧值和新值到控制台。

4、代码中的@和冒号：分别是什么的缩写？
答： @是v-on、 冒号：是v-bind的缩写

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布