第一章  初识vue.js

一.填空题

1.Vue是一套用于构建___用户界面_____的渐进式框架.

2.Vue中的指令以______v-__开头.

3.Node.js 是一个基于____V8___引擎的JavaScript运行环境。
4.在yam 中,__yarn add__命令用于添加指定名称的包。
5.在 npm 中,___npm uninstall________命令用于卸载指定名称的包。

二、判断题


1.在Vue 项目中,执行yam dev命令可以完成项目构建。(X)
2.在 Vue 项目中,执行npm update命令可以更新指定名称的包。()
3.mpm是一个包管理工具,用来解决Node.js代码部署问题。(X
4.在使用yum之前,需要先确保计算机中已经安装了Node.js。(
5.Vue可以在Nodejs环境下进行开发,并借助npm工具安装依赖。()


三、选择题


1.下列选项中,关于Vue说法错误的是(D)。
A.Vue 相比Angular和React而言,是一个轻量级的前端库 B.Vue 支持 Pinia 插件 C.Vue支持双向数据绑定
D.Vue中自定义指令以“on-”开头
2.下列选项中,关于npm工具说法正确的是(B)。
A.使用npm安装同一个包时,会对包进行缓存,再次安装时无须重复下载 B,mpm安装包时,必须等到当前包安装完成后才会继续后面的安装 C.使用“npm install包名-g”命令表示将包安装到当前项目中 D.使用npm命令时,不需要安装Node.js
3、下列选项中,关于MVVM的说法错误的是(D)。

A.Model主要负责业务数据的处理 B.View负责视图的处理
C.ViewModel负责监听Model或View的改变
D.Model和View可以直接通信,互相监控双方的动作,并及时进行相应操作
4.mpm包管理工具基于的运行环境是(A)。
A. Node.js    B. Vue    C. Babel    D. Angular    
5、下列选项中,属于Vue特性的是(B、C、D)。(多选)
A.轻量级    B.数据驱动视图    
C双向数据绑定    D,插件化开发    
四、简答题
1.请简述 Vue 的特性。

Vue 的特性如下。

1 .数据驱动视图

在使用 Vue 的页面中,Vue 会监听数据变化,当页面数据发生变化时,Vue 会自动重新渲染页面结构。

2 .双向数据绑定

Vue 实现了双向数据绑定,即当数据发生变化时,视图也会发生变化;当视图发生变化时,数据也会跟着同步变化。

3 .指令

指令主要包括内置指令和自定义指令,内置指令是 Vue 本身自带的指令,而自定义指令是由用户自己定义的指令。指令的名称以“v-”开头,作用于 HTML 中的元素。将指令绑定在元素上时,指令会给绑定的元素添加一些特殊的行为。 4 插件 Vue 支持插件,通过加载插件可以实现更多的功能。


2.请简述 MVVM 的组成部分及基本工作原理。

MVVM 主要包含 Model(数据模型)、View(视图)和 ViewModel(视图模型)。其 中,Model 是指数据部分,负责业务数据的处理;View 是指视图部分,即用户界面,负责 视图处理;ViewModel 用于连接视图与数据模型,负责监听 Model 或者 View 的改变。

第二章 Vue.js开发基础

一.填空题

1.在Vue中,每个单文件组件由_____模板______、_____样式_____逻辑三个部分构成。
2.Vue 中实现数据双向绑定的指令是__v-model________
3.在 Vue 中,可以通过______Mustache________语法将数据输出到页面中。
4.reactive()函数通常用来定义____响应式______数据。
5.Vue中属性绑定的指令是_v-bind____。


二、判断题


I.rel()函数用于将响应式对象中的单个属性转换为响应式数据。(X)
2.Vue中绑定样式类可以通过v-bind指令操作style 属性来实现。()
3.toRef()函数用于将普通数据转换成响应式数据。(X)
4.$event是Vue提供的内置变量,使用它可以获取事件对象。( )
5.使用v-model 的.trim修饰符可以自动过滤用户输入的首尾空白字符。()


三、选择题


1下列关于单文件组件的说法中,错误的是(B)。

A、模板用于搭建当前组件的DOM结构
B.在 Vue3中,<template>标签中的DOM结构只能有一个根节点

C.样式用于通过CSS代码为当前组件设置样式
D.逻辑用于通过JavaScript代码处理组件的数据与业务
2、下列选项中,用于渲染DOM元素的文本内容的指令是(B)。
A.v-bind    B.v-text    Cv-on    D.v-for    
3.下列选项中,用于将响应式对象中的所有属性转换为响应式数据的函数是()。
A.ref()    B. reactive( )    C.toRef()    D. toRefs( D)    
4、下列关于事件修饰符的说法中,错误的是(B)。 A、使用.prevent修饰符可以阻止<a>标签的默认跳转行为 B.使用stop修饰符可以阻止默认事件行为
C.使用capture 修饰符可以改变事件的默认执行顺序,从冒泡方式更改为捕获方式 D.使用.self修饰符可以实现只有DOM元素本身才会触发事件
5.下列关于v-for的说法中,错误的是(A)。
A、使用v-for时,要指定key的值,key的值不具有唯一性

B.v-for可以辅助开发者基于一个数组、对象、数字或字符串循环渲染一个列表

C,v-for会根据数组中元素的个数来决定循环次数

D.v-for会根据对象中属性的个数来决定循环次数
四、简答题
1.请简述常见的事件修饰符。

在 Vue 中,经常会使用事件修饰符用于修饰事件,常见的事件修饰符有以下 5 种。

1 .通过.prevent 事件修饰符可以实现阻止默认事件行为的功能。

2 .通过.stop 事件修饰符可以实现阻止事件冒泡的功能。

3 .通过.capture 事件修饰符可以实现事件捕获的功能。

4 .通过.once 事件修饰符可以实现使事件只触发一次的功能。

5. 通过.self 事件修饰符可以实现只有 DOM 元素自身触发事件时才执行事件方法的 功能。


2.请简述 v-if 和 v-show 指令的区别。

在 Vue 中,条件渲染指令分为 v-if 和 v-show 两种。v-show 与 v-if 都用来决定某一个 元素是否在页面上显示出来。 v-if 是根据布尔值切换元素的显示或隐藏状态,本质是通过操作 DOM 元素来切换显 示状态。当给定的值为 true 时,元素存在于 DOM 树中;当给定的值为 false 时,元素从 DOM 树中移除。 v-show 的原理是通过为元素添加或移除 display: none 样式来实现元素的显示或隐藏。 当需要频繁切换某个元素的显示或隐藏时,使用 v-show 会更加节省性能上的开销; 而当只需要切换一次显示或隐藏时,使用 v-if 更合理。

第三章  组件基础

一.填空题

1.在使用选项式API时,可以通过 ____methods______ 选项来定义方法。
2.组合式API下的____onBeforeUnmount()______函数在组件实例被销毁前执行。
3.在 Vue中,可以通过Vue应用实例的____component()________方法实现全局组件的注册。
4,在组件的<template>标签中可以引用其他组件,被引用的组件需要写成__标签____的形式。
5.在 Vue 中,可以通过_____自定义事件_____实现子组件向父组件传递数据。


二、判断题


1.当使用组合式API时,数据和方法可以直接在setup()函数中定义。()
2.在Vue 中,可以通过type属性对父组件中传递过来的props数据进行基础类型检查。()
3.在 Vue中,可以调用defineProps()雨数声明props。()

4.在父组件中使用v-bind可以为子组件静态绑定props。(X)
5,在 Vue中,跨级组件之间的数据传递可以通过依赖注入来实现。()


三、选择题


1.下列选项中,关于组合式API下的生命周期函数说法错误的是(C)。

A. onBeforeMount()函数会在组件挂载之前被调用

B.onMounted()函数会在组件挂载完成后被调用 C.onUpdated( )函数会在组件更新前被调用
D. onUnmounted()函数会在组件实例被销毁后调用
2、下列选项中,关于props说法错误的是(A)。

A.对象形式的props不能使用多种验证方案
B.在声明props时通过添加default属性设置默认值

C.在声明props时通过添加required属性设置必填项

D.所有的 props 都遵循单项数据流原则
3.下列选项中,关于跨组件之间数据传递说法错误的是(D)。

A.对象形式的props不能使用多种验证方案

B.在声明props 时通过添加 default 属性设置默认值

C.对子组件而言,如果想要注入上层组件提供的数据,则需要使用到inject()函数 D.provide()函数可以接收2个参数,第1个参数是要注人的值,第2个参数是注入名
4.下列选项中,关于在使用setup语法糖时声明自定义事件的方式说法正确的是(C)。
A.emit()    B. delineProps( )C.defineEmits( )    D,props属性    
5.下列选项中,关于在使用组件时监听自定义事件的指令说法正确的是(A)。
A. v-on    B. v-bind    C.v-model    D. v-for    
四、简答题
1.请简述组件之问的数据共享有哪几种方式。

1 .通过 props 实现父组件向子组件中传递数据。

2. 通过自定义事件实现子组件向父组件中传递数据。

3 .通过依赖注入实现跨级组件之间的数据传递。


2.请简述如何解决组件之间的样式冲突。

在 Vue 中,解决组件之间的样式冲突有以下 2 种方式。

1 scoped 属性 Vue 为”。

2 深度选择器 深度选择器通过:deep()伪类来实现,在其小括号中可以定义用于子组件的选择器,例 如,“:deep(.title)”。

Logo

前往低代码交流专区

更多推荐