Vue课后练习题及答案解析

Vue课后练习题

第一章 Vue.js基础入门

填空题

1. Vue是一套构建________的渐进式框架。

用户界面

2. MVVM主要包含3个部分，分别是Model、View和________。

ViewModel

3. Vue中通过________属性获取相应的DOM元素。

refs

4. 在进行Vue调试时，通过使用________工具来完成项目开发。

vue-devtools

5. Vue中页面结构以________形式存在。

组件

判断题

6. Vue与Angular和React框架不同的是，Vue设计为自下而上逐层应用。 （对）
7. Vue完全能够为复杂的单页应用提供驱动。 （对）
8. Vue是一套构建用户界面的渐进式框架，Vue的核心只关注视图层。 （对）
9. Vue中MVVM框架主要由3部分组成：Model，View和ViewModel。 （对）
10. Vue可以在Node环境下进行开发，并借助npm包管理器来安装依赖。 （对）

选择题

11. 下面关于Vue说法错误的是（D）

A. Vue与Angular都可以用来创建复杂的前端项目。
B. Vue的又是主要包括轻量级、双向数据绑定。
C. Vue在进行实例化之前，应确保已经引入了核心文件vue.js。
D. Vue与React语法完全相同。

12. 下面关于Vue的优势说法错误的是（C）

A. 双向数据绑定
B. 轻量级框架
C. 增加代码的耦合度
D. 实现组件化

13. 下列不属于Vue开发所必须的工具的是（D）

A. Chrome浏览器
B. VSCode编辑器
C. vue-devtools
D. 微信开发者工具

14. npm包管理器是基于（A）平台使用的。

A. Node.js
B. Vue
C. Babel
D. Angular

15. 下列选项中，用来安装vue模块的正确命令是（A）。

A. npm install vue
B. node.js install vue
C. node install vue
D. npm I vue

第二章 Vue开发基础（上）

填空题

1. Vue实例对象通过________方式来创建。

new Vue（）

2. Vue初始化数据在实例对象的________参数中进行定义。

data

3. Vue实例对象中的el参数表示________。

唯一根标签

4. Vue中实现双向数据绑定的指令是 ________。

v-model

5. Vue事件绑定指令是________。

v-on

判断题

6. 在项目中引入vue.js文件，才可以创建Vue实例。 （对）
7. Vue实例对象指令主要包括自定义指令和内置指令，通过指令省去DOM操作。 （对）
8. Vue事件传递方式有冒泡和捕获，默认是冒泡。 （对）
9. Vue开发提出了组件化开发思想，每个组件都是一个孤立的单元。 （对）
10. 在Vue中beforeDestroy与destroyed钩子函数执行后，都可以获取到Vue实例。 （对）

选择题

11. 下列关于Vue实例对象说法不正确的是（D）

A. Vue实例对象通过new Vue({})方式创建的
B. Vue实例对象只允许有唯一的一个根标签
C. 通过methods参数可以定义事件处理函数
D. Vue实例对象中data数据不具有响应特性

12. Vue实例对象中能够监听状态变化的参数是（A）

A. watch
B. filters
C. watching
D. components

13. Vue中实现数据双向绑定的是（C）

A. v-bind
B. v-for
C. v-model
D. v-if

14. 在Vue中，能够实现页面单击事件的的代码是（B）

A. v-on:enter
B. v-on:click
C. v-on:mourseenter
D. v-on:doubleclick

15. 下面列出的钩子函数在Vue实例销毁完成时执行的是（B）

A. updated
B. destroyed
C. created
D. mounted

第三章 Vue开发基础（下）

填空题

1. Vue实例对象通过________方式来获取。

vm.$root

2. Vue初始数据通过________f方式获取。

vm.$data

3. Vue中通过________获取当前实例的子组件。

vm.$children

4. Vue中创建插件提供的方法是________。

install

5. Vue中通过________创建自定义指令。

Vue.deirective()

判断题

6. Vue提供全局的API接口component() ，不能用来注册组件（错）
7. Vue中Vue.config对象用来实现Vue全局配置（对）
8. Vue中data选项中的数据具有响应特性（对）
9. Vue中通过vm.$slots可以获取子组件实例对象（错）
10. Vue实例对象中通过$options可以获取到父作用域下的所有属性（错）

选择题

11. 下列关于Vue实例对象接口的说法，错误的是（D）

A. Vue实例对象提供了实例可操作方法
B. Vue实例对象$data数据可以由实例vm委托代理
C. 通过Vue实例对象可以进行Vue全局配置
D. Vue实例对象接口同样可以通过Vue方式调用

12. 下面关于Vue全局配置的说法，错误的是（CD）

A. Vue.config.devtools可以设置devtools调试工具的启动和关闭
B. Vue.config是一个对象，包含Vue的全局配置
C. Vue.component()可以获取Vue全局配置对象
D. Vue.set.config可以获取到全局配置对象

13. 下列不属于Vue实例对象属性的是（B）

A. $data
B. $component
C. $props
D. $root

14. Vue实例对象获取子组件实例对象的方式（B）

A. $parent
B. $children
C. $child
D. $component

15. 下面关于Vue.mixin的说法，错误的是（D）

A. Vue.mixin是Vue提供的全局接口API
B. Vue.mixin可以用来注入组件的选项
C. 使用Vue.mixin可能会影响所有的Vue实例
D. Vue.mixin不可以用来注入自定义选项的处理逻辑

第四章 Vue过渡和动画

填空题

1. Vue提供的内置过渡封装组件是________。

transition

2. 在过渡封装组件中使用________属性可以重置过渡中切换类名的前缀。

name

3. 通过________特性设置节点在初始渲染的过渡。

appear

4. 在离开的过渡中有________、________、________3个class切换。

v-leave  v-leave-active    v-leave-to

5. ________的类名优先级要高于普通的类名。

自定义过渡

判断题

6. 函数式组件中的render()函数用来创建组件的模板（对）
7. 给过渡元素添加v-bind:class=“true”，Vue会跳过CSS的检测（错）
8. 在@before-enter阶段可以设置元素开始动画之前的起始样式（对）
9. 在使用animate.css库时，基本的class样式名时animate （错）
10. enter和leave动画钩子函数，除el参数外海湖传入一个done作为参数（对）

选择题

11. 下列选项中关于钩子函数说法，正确的时（C）

A. @leave-cancelled函数只能用与v-if
B. 对于@enter来说，当与CSS结合使用时，回调函数done时必选的
C. done作为参数，作用就是告知Vue动画结束
D. 钩子函数需要结合CSS transitions 或 animations使用，不能单独使用

12. 下列关于Vue为标签提供的过度类名的说法，错误的是（D）

A. v-enter在元素被插入之前生效，在元素被插入之后的下一帧移除
B. v-leave在离开过度被触发时立刻生效，下一帧被移除
C. v-enter-active可以控制进入过渡的不同的缓和曲线
D. 如果name属性为my-name，那么my-就是过渡中切换的类名前缀

13. 下列选项中关于多个元素过渡的说法，错误的时（D）

A. 当有相同标签名的元素切换时，需要通过key特性设置唯一的值来标记以让Vue区分它们
B. 不相同元素之间可以通过v-if和v-else来进行过渡
C. <transition>组件的默认行为指定进入和离开同时发生
D. 不可以给同一个元素的key特性设置不同的状态来代替v-if和v-else

第五章 Vue路由

填空题

1. 在项目中可以通过npm命令________安装路由vue-router。

npm install vue-router

2. 使用________获取当前激活的路由的状态信息。

路由对象

3. 通过一个名称来标识一个路由的方式叫做________ 。

命名路由

4. 在业务逻辑代码中实现导航跳转的方式成为________。

编程式导航

5. 单页面应用主要通过URL中的________实现不同页面之间的切换。

hash(#号)

判断题

6. 后端路由通过用户请求的URL导航到具体的html页面。（对）
7. 开发环境下使用import VueRouter from ‘vueRouter’ 来导入路由。（错）
8. 嵌套路由的使用，主要是由页面结构来决定的。（对）
9. params方式传参类似于GET请求。（错）
10. 在单页面应用中更新视图可以不同重新请求页面。（对）

选择题

11. 下列vue-router插件的安装命令，正确的是（A）

A. npm install vue-router
B. node install vue-router
C. npm install vueRouter
D. npm I vue-router

12. 下列关于query方式传参的说法，正确的是（C）

A. query方式传递的参数会在地址栏展示
B. 在页面跳转的时候，不能在地址栏看到请求参数
C. 在目标页面中使用“this.route.query.参数名”来获取参数
D. 在目标页面中使用“this.$route.params.参数名”来获取参数

13. 下列关于params方式传参的说法，错误的是（C）

A. 在目标页面中也可以使用“$route.params.参数名”来获取参数
B. 在页面跳转的时候，不能在地址栏看到请求参数
C. 以params方式传递的参数会在地址栏展示
D. 在目标页面中使用“this.$route.params.参数名”来获取参数

第六章 Vuex状态管理

填空题

1. Vuex实例对象通过________方式获取。

vm.$store

2. Vuex实例对象中初始数据状态通过________方式获取。

vm.$store.state

3. Vuex实例对象中组件状态通过________方式改变。

3.vm.$store.commit() 

4. Vuex中创建动态模块提供的方法是________。

store.registerModule() 

5. Vuex中通过________实现actions状态分发。

vm.$store.dispatch()

判断题

6. Vuex实例对象可以调用Vue全局接口。（错）
7. Vuex中的Vue.config对象用来实现Vuex全局配置。（错）
8. Vuex的state选项中数据是初始数据状态。（对）
9. Vuex中插槽可以实现组件任意嵌套，且在版本2.2.6+以后开始支持。（错）
10. 当在Vuex实例对象中调用store时，一定会获取到store实例对象。（对）

选择题

11. 下列关于Vuex实例对象接口的说法，错误的是（B）

A. Vuex实例对象共提供了store实例对象可操作方法
B. Vuex实例对象$data数据可以由实例委托代理
C. 通过Vuex实例对象可实现组件状态的管理委托
D. Vuex实例对象初始数据是state数据

12. 下面关于Vuex核心模块的说法，错误的是（B）

A. Vuex配置对象中，actions选项是异步的
B. Vuex.config对象是全局配置对象
C. Vuex配置对象中，mutations选项是同步的
D. 通过commit完成mutations提交

13. 下列不属于Vuex.Store配置对象接受的是（A）

A. data
B. state
C. mutations
D. getters

14. Vuex实例对象中类似于computed计算属性功能的选项是（D）

A. state
B. mutations
C. actions
D. getters

15. 下面关于Vuex中的actions的说法，不正确的是（ABD）

A. actions中事件函数通过commit完成分支
B. actions中事件处理函数接受context对象
C. actions与Vue实例中的methods是类似的
D. 可以用来注入自定义选项的处理逻辑

第七章 Vue开发环境

填空题

1. 对于CLI类型的插件，需要以________为前缀。

@vue

2. 使用npm包通过________命令全局安装@vue/cli 3.X。

npm install –g @vue/cli

3. 使用________来插卡Vue的版本号。

vue -version(vue -V)

4. 使用yarn包通过________命令全局安装@vue/cli 3.X。

yarn global add @vue/cli

5. 在Vue CLI 3中使用________命令来创建一个Vue项目。

vue create 项目名

判断题

6. 卸载vue-cli的命令时 npm uninstall vue-vli -g。（对）
7. 添加CLI插件的指令时 vue add vue-eslint。 （错）
8. 插件不能修改webpack的内部配置，但是可以向vue-cli-service注入命令。（错）
9. Vue CLI 通过vue ui命令来创建图形用户界面。（对）
10. 在文件中使用“key=value”(键值对)的方式来设置环境变量。（对）

选择题

11. 下列选项中说法正确的是（B）

A. 新版的Vue VLI的包名称为vue-cli
B. 执行npm uninstall vue-cli -g 命令可以全局删除vue-cli包
C. 使用给yarn install add @vue/cli 命令可以全局安装@vue/cli工具
D. 通过 vue add ui 命令来创建图形用户界面

12. 关于CLI服务，下列选项中说法错误的是（C）

A. 在@vue/cli-service中安装了一个名为vue-cli-service的命令
B. vue.config.js是一个可选的配置文件
C. 通过npx vue-cli-service helps查看所有的可用命令
D. 通过vue ui使用GUI图形用户界面来运行更多的特性脚本

13. 下列选项中说法正确的是（AD）

A. 使用相对路径引入的静态资源文件，会被webpoack处理解析为模块依赖
B. 放在public文件夹下的资源将会经过webpack的处理
C. 通过绝对路径被引用的资源将会经过webpack的处理
D. URL以~开始，会被认为是模块请求

第八章 服务器渲染

填空题

1. ________插件可以用来进行页面的热重载。

webpack-hot-middleware

2. hash模式路由，地址栏URL中会自带________符号。

#

3. SSR的路由需要采用________ 的方式。

history

4. ________是利用搜索引擎规则，提高网站在搜索引擎内自然排名的一种技术。

SEO（搜索引擎优化）

5. Vue中使用服务器渲染，需要借助Vue的扩展工具________ 。

vue-server-renderer

判断题

6. 客户端渲染，即传统的单页面应用模式。（对）
7. webpack-dev-middleware 中间件会对更改的文件进行监控。（对）
8. 服务器渲染不利于SEO。（错）
9. 服务器渲染应用程序，需要处于Node.js server运行环境。（对）
10. 使用git-bash命令工具，输入指令mkdirs vue-ssr 来创建项目。（错）

选择题

11. 下列选项说法正确的是（A）

A. vue-server-renderer的版本要与vue版本相匹配
B. 客户端渲染，需要使用entry-server.js和entry.client.js两个入口文件
C. app.js是应用程序的入口，它对应vue-cli创建的项目的app.js文件
D. 客户端应用程序既可以运行在浏览器上，又可以运行在服务器上

12. 下列关于SSR路由的说法，错误的是（B）

A. SSR的路由需要采用history的方式
B. history模式的路由提交不到服务器上
C. history模式完成URL跳转而无重新加载页面
D. hash模式路由，地址栏URL中hash改变不会重新加载页面

13. 下列关于Nuxt.js的说法，错误的是（D）

A. 使用“creat-nuxt-app项目名”命令创建项目
B. 使用Nuxt.js搭建的项目中，pages目录是用来存放应用的路由及视图
C. 在Nuxt.js项目中，声明式路由在html标签中通过<nuxt-link>完成路由跳转
D. Nuxt.js项目中需要根据目录结构手动完成对应的路由配置

第九章 “微商城”项目

选择题

1. 使用Mini UI库的页面，需要通过________前缀来定义标签名。

mt-

2. ________是一个基于Promise的HTTP库，可以用在浏览器和node.js中。

Axios

3. ________是最接近原生App体验的高性能前端框架。

MUI

4. 使用________，可以给Vue函数添加一个原型属性$http,指向axios。

Object.defineProperty

5. 使用路由的声明式导航，在html标签中使用________组件来实现路由的跳转。

<router-link>

判断题

6. MUI是一套代码片段，提供了配套的样式和HTML代码段。（错）
7. 使用lazy-load可以实现图片懒加载。（对）
8. 通过this.$store.state.*可以访问state中的数据。（对）
9. 组件想要修改数据，需要调用mutations提供的方法，通过语句this.$store.emit(‘方法名’)实现。（错）
10. better-scroll是一款支持各种滚动场景需求的插件。（对）

选择题

11. 下列选项中，（A）指令可用来切换元素的可见状态

A. v-sjow
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. 想要获取购物车小球在页面上的位置，以下可以使用的是（B）

A. offset（）
B. getBoundingClientRect()
C. width()
D. height()