Vue课后练习题及答案解析_vue3.0从入门到实战课后答案

Vue课后练习题

第一章 Vue.js基础入门

填空题

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

用户界面
1

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

ViewModel
1

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

refs
1

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

vue-devtools
1

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

组件
1

判断题

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语法完全相同。
1
2
3
4

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

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

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

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

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

A. Node.js
B. Vue
C. Babel
D. Angular
1
2
3
4

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

A. npm install vue
B. node.js install vue
C. node install vue
D. npm I vue
1
2
3
4

第二章 Vue开发基础（上）

填空题

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

new Vue（）
1

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

data
1

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

唯一根标签
1

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

v-model
1

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

v-on
1

判断题

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数据不具有响应特性
1
2
3
4

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

A. watch
B. filters
C. watching
D. components
1
2
3
4

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

A. v-bind
B. v-for
C. v-model
D. v-if
1
2
3
4

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

A. v-on:enter
B. v-on:click
C. v-on:mourseenter
D. v-on:doubleclick
1
2
3
4

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

A. updated
B. destroyed
C. created
D. mounted
1
2
3
4

第三章 Vue开发基础（下）

填空题

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

vm.$root
1

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

vm.$data
1

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

vm.$children
1

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

install
1

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

Vue.deirective()
1

判断题

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方式调用
1
2
3
4

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

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

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

A. $data
B. $component
C. $props
D. $root
1
2
3
4

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

A. $parent
B. $children
C. $child
D. $component
1
2
3
4

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

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

第四章 Vue过渡和动画

填空题

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

transition
1

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

name
1

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

appear
1

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

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

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

自定义过渡
1

判断题

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使用，不能单独使用
1
2
3
4

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

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

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

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

第五章 Vue路由

填空题

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

npm install vue-router
1

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

路由对象
1

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

命名路由
1

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

编程式导航
1

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

hash(#号)
1

判断题

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
1
2
3
4

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

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

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

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

第六章 Vuex状态管理

填空题

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

vm.$store
1

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

vm.$store.state
1

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

3.vm.$store.commit() 
1

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

store.registerModule() 
1

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

vm.$store.dispatch()
1

判断题

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数据
1
2
3
4

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

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

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

A. data
B. state
C. mutations
D. getters
1
2
3
4

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

A. state
B. mutations
C. actions
D. getters
1
2
3
4

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

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

第七章 Vue开发环境

填空题

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

@vue
1

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

npm install –g @vue/cli
1

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

vue -version(vue -V)
1

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

yarn global add @vue/cli
1

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

vue create 项目名
1

判断题

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 命令来创建图形用户界面
1
2
3
4

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

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

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

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

第八章 服务器渲染

填空题

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

webpack-hot-middleware
1

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

#
1

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

history
1

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

SEO（搜索引擎优化）
1

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

vue-server-renderer
1

判断题

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. 客户端应用程序既可以运行在浏览器上，又可以运行在服务器上
1
2
3
4

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

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

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

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

第九章 “微商城”项目

选择题

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

mt-
1

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

Axios
1

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

MUI
1

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

Object.defineProperty
1

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

<router-link>
1

判断题

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
1
2
3
4

12. 下列关于ref作用的说法，错误的是（D）

A. ref在子组件中使用时，使用this.$refs.name获取到组件实例，可以使用组件的所有属性和方法
B. ref加在普通的元素上，用this.ref.name 获取到的是DOM元素
C. 可以利用v-for和ref获取一组数组或DOM节点
D. ref在DOM渲染完成之前就能使用
1
2
3
4

13. 想要获取购物车小球在页面上的位置，以下可以使用的是（B）

A. offset（）
B. getBoundingClientRect()
C. width()
D. height()
1
2
3
4