Vue课后练习题
第一章 Vue.js基础入门
填空题
- Vue是一套构建________的渐进式框架。
用户界面
- MVVM主要包含3个部分,分别是Model、View和________。
ViewModel
- Vue中通过________属性获取相应的DOM元素。
refs
- 在进行Vue调试时,通过使用________工具来完成项目开发。
vue-devtools
- Vue中页面结构以________形式存在。
组件
判断题
- Vue与Angular和React框架不同的是,Vue设计为自下而上逐层应用。 (对)
- Vue完全能够为复杂的单页应用提供驱动。 (对)
- Vue是一套构建用户界面的渐进式框架,Vue的核心只关注视图层。 (对)
- Vue中MVVM框架主要由3部分组成:Model,View和ViewModel。 (对)
- Vue可以在Node环境下进行开发,并借助npm包管理器来安装依赖。 (对)
选择题
- 下面关于Vue说法错误的是(D)
A. Vue与Angular都可以用来创建复杂的前端项目。
B. Vue的又是主要包括轻量级、双向数据绑定。
C. Vue在进行实例化之前,应确保已经引入了核心文件vue.js。
D. Vue与React语法完全相同。
- 下面关于Vue的优势说法错误的是(C)
A. 双向数据绑定
B. 轻量级框架
C. 增加代码的耦合度
D. 实现组件化
- 下列不属于Vue开发所必须的工具的是(D)
A. Chrome浏览器
B. VSCode编辑器
C. vue-devtools
D. 微信开发者工具
- npm包管理器是基于(A)平台使用的。
A. Node.js
B. Vue
C. Babel
D. Angular
- 下列选项中,用来安装vue模块的正确命令是(A)。
A. npm install vue
B. node.js install vue
C. node install vue
D. npm I vue
第二章 Vue开发基础(上)
填空题
- Vue实例对象通过________方式来创建。
new Vue()
- Vue初始化数据在实例对象的________参数中进行定义。
data
- Vue实例对象中的el参数表示________。
唯一根标签
- Vue中实现双向数据绑定的指令是 ________。
v-model
- Vue事件绑定指令是________。
v-on
判断题
- 在项目中引入vue.js文件,才可以创建Vue实例。 (对)
- Vue实例对象指令主要包括自定义指令和内置指令,通过指令省去DOM操作。 (对)
- Vue事件传递方式有冒泡和捕获,默认是冒泡。 (对)
- Vue开发提出了组件化开发思想,每个组件都是一个孤立的单元。 (对)
- 在Vue中beforeDestroy与destroyed钩子函数执行后,都可以获取到Vue实例。 (对)
选择题
- 下列关于Vue实例对象说法不正确的是(D)
A. Vue实例对象通过new Vue({})方式创建的
B. Vue实例对象只允许有唯一的一个根标签
C. 通过methods参数可以定义事件处理函数
D. Vue实例对象中data数据不具有响应特性
- Vue实例对象中能够监听状态变化的参数是(A)
A. watch
B. filters
C. watching
D. components
- Vue中实现数据双向绑定的是(C)
A. v-bind
B. v-for
C. v-model
D. v-if
- 在Vue中,能够实现页面单击事件的的代码是(B)
A. v-on:enter
B. v-on:click
C. v-on:mourseenter
D. v-on:doubleclick
- 下面列出的钩子函数在Vue实例销毁完成时执行的是(B)
A. updated
B. destroyed
C. created
D. mounted
第三章 Vue开发基础(下)
填空题
- Vue实例对象通过________方式来获取。
vm.$root
- Vue初始数据通过________f方式获取。
vm.$data
- Vue中通过________获取当前实例的子组件。
vm.$children
- Vue中创建插件提供的方法是________。
install
- Vue中通过________创建自定义指令。
Vue.deirective()
判断题
- Vue提供全局的API接口component() ,不能用来注册组件(错)
- Vue中Vue.config对象用来实现Vue全局配置(对)
- Vue中data选项中的数据具有响应特性(对)
- Vue中通过vm.$slots可以获取子组件实例对象(错)
- Vue实例对象中通过$options可以获取到父作用域下的所有属性(错)
选择题
- 下列关于Vue实例对象接口的说法,错误的是(D)
A. Vue实例对象提供了实例可操作方法
B. Vue实例对象$data数据可以由实例vm委托代理
C. 通过Vue实例对象可以进行Vue全局配置
D. Vue实例对象接口同样可以通过Vue方式调用
- 下面关于Vue全局配置的说法,错误的是(CD)
A. Vue.config.devtools可以设置devtools调试工具的启动和关闭
B. Vue.config是一个对象,包含Vue的全局配置
C. Vue.component()可以获取Vue全局配置对象
D. Vue.set.config可以获取到全局配置对象
- 下列不属于Vue实例对象属性的是(B)
A. $data
B. $component
C. $props
D. $root
- Vue实例对象获取子组件实例对象的方式(B)
A. $parent
B. $children
C. $child
D. $component
- 下面关于Vue.mixin的说法,错误的是(D)
A. Vue.mixin是Vue提供的全局接口API
B. Vue.mixin可以用来注入组件的选项
C. 使用Vue.mixin可能会影响所有的Vue实例
D. Vue.mixin不可以用来注入自定义选项的处理逻辑
第四章 Vue过渡和动画
填空题
- Vue提供的内置过渡封装组件是________。
transition
- 在过渡封装组件中使用________属性可以重置过渡中切换类名的前缀。
name
- 通过________特性设置节点在初始渲染的过渡。
appear
- 在离开的过渡中有________、________、________3个class切换。
v-leave v-leave-active v-leave-to
- ________的类名优先级要高于普通的类名。
自定义过渡
判断题
- 函数式组件中的render()函数用来创建组件的模板(对)
- 给过渡元素添加v-bind:class=“true”,Vue会跳过CSS的检测(错)
- 在@before-enter阶段可以设置元素开始动画之前的起始样式(对)
- 在使用animate.css库时,基本的class样式名时animate (错)
- enter和leave动画钩子函数,除el参数外海湖传入一个done作为参数(对)
选择题
- 下列选项中关于钩子函数说法,正确的时(C)
A. @leave-cancelled函数只能用与v-if
B. 对于@enter来说,当与CSS结合使用时,回调函数done时必选的
C. done作为参数,作用就是告知Vue动画结束
D. 钩子函数需要结合CSS transitions 或 animations使用,不能单独使用
- 下列关于Vue为标签提供的过度类名的说法,错误的是(D)
A. v-enter在元素被插入之前生效,在元素被插入之后的下一帧移除
B. v-leave在离开过度被触发时立刻生效,下一帧被移除
C. v-enter-active可以控制进入过渡的不同的缓和曲线
D. 如果name属性为my-name,那么my-就是过渡中切换的类名前缀
- 下列选项中关于多个元素过渡的说法,错误的时(D)
A. 当有相同标签名的元素切换时,需要通过key特性设置唯一的值来标记以让Vue区分它们
B. 不相同元素之间可以通过v-if和v-else来进行过渡
C. <transition>组件的默认行为指定进入和离开同时发生
D. 不可以给同一个元素的key特性设置不同的状态来代替v-if和v-else
第五章 Vue路由
填空题
- 在项目中可以通过npm命令________安装路由vue-router。
npm install vue-router
- 使用________获取当前激活的路由的状态信息。
路由对象
- 通过一个名称来标识一个路由的方式叫做________ 。
命名路由
- 在业务逻辑代码中实现导航跳转的方式成为________。
编程式导航
- 单页面应用主要通过URL中的________实现不同页面之间的切换。
hash(#号)
判断题
- 后端路由通过用户请求的URL导航到具体的html页面。(对)
- 开发环境下使用import VueRouter from ‘vueRouter’ 来导入路由。(错)
- 嵌套路由的使用,主要是由页面结构来决定的。(对)
- params方式传参类似于GET请求。(错)
- 在单页面应用中更新视图可以不同重新请求页面。(对)
选择题
- 下列vue-router插件的安装命令,正确的是(A)
A. npm install vue-router
B. node install vue-router
C. npm install vueRouter
D. npm I vue-router
- 下列关于query方式传参的说法,正确的是(C)
A. query方式传递的参数会在地址栏展示
B. 在页面跳转的时候,不能在地址栏看到请求参数
C. 在目标页面中使用“this.route.query.参数名”来获取参数
D. 在目标页面中使用“this.$route.params.参数名”来获取参数
- 下列关于params方式传参的说法,错误的是(C)
A. 在目标页面中也可以使用“$route.params.参数名”来获取参数
B. 在页面跳转的时候,不能在地址栏看到请求参数
C. 以params方式传递的参数会在地址栏展示
D. 在目标页面中使用“this.$route.params.参数名”来获取参数
第六章 Vuex状态管理
填空题
- Vuex实例对象通过________方式获取。
vm.$store
- Vuex实例对象中初始数据状态通过________方式获取。
vm.$store.state
- Vuex实例对象中组件状态通过________方式改变。
3.vm.$store.commit()
- Vuex中创建动态模块提供的方法是________。
store.registerModule()
- Vuex中通过________实现actions状态分发。
vm.$store.dispatch()
判断题
- Vuex实例对象可以调用Vue全局接口。(错)
- Vuex中的Vue.config对象用来实现Vuex全局配置。(错)
- Vuex的state选项中数据是初始数据状态。(对)
- Vuex中插槽可以实现组件任意嵌套,且在版本2.2.6+以后开始支持。(错)
- 当在Vuex实例对象中调用store时,一定会获取到store实例对象。(对)
选择题
- 下列关于Vuex实例对象接口的说法,错误的是(B)
A. Vuex实例对象共提供了store实例对象可操作方法
B. Vuex实例对象$data数据可以由实例委托代理
C. 通过Vuex实例对象可实现组件状态的管理委托
D. Vuex实例对象初始数据是state数据
- 下面关于Vuex核心模块的说法,错误的是(B)
A. Vuex配置对象中,actions选项是异步的
B. Vuex.config对象是全局配置对象
C. Vuex配置对象中,mutations选项是同步的
D. 通过commit完成mutations提交
- 下列不属于Vuex.Store配置对象接受的是(A)
A. data
B. state
C. mutations
D. getters
- Vuex实例对象中类似于computed计算属性功能的选项是(D)
A. state
B. mutations
C. actions
D. getters
- 下面关于Vuex中的actions的说法,不正确的是(ABD)
A. actions中事件函数通过commit完成分支
B. actions中事件处理函数接受context对象
C. actions与Vue实例中的methods是类似的
D. 可以用来注入自定义选项的处理逻辑
第七章 Vue开发环境
填空题
- 对于CLI类型的插件,需要以________为前缀。
@vue
- 使用npm包通过________命令全局安装@vue/cli 3.X。
npm install –g @vue/cli
- 使用________来插卡Vue的版本号。
vue -version(vue -V)
- 使用yarn包通过________命令全局安装@vue/cli 3.X。
yarn global add @vue/cli
- 在Vue CLI 3中使用________命令来创建一个Vue项目。
vue create 项目名
判断题
- 卸载vue-cli的命令时 npm uninstall vue-vli -g。(对)
- 添加CLI插件的指令时 vue add vue-eslint。 (错)
- 插件不能修改webpack的内部配置,但是可以向vue-cli-service注入命令。(错)
- Vue CLI 通过vue ui命令来创建图形用户界面。(对)
- 在文件中使用“key=value”(键值对)的方式来设置环境变量。(对)
选择题
- 下列选项中说法正确的是(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 命令来创建图形用户界面
- 关于CLI服务,下列选项中说法错误的是(C)
A. 在@vue/cli-service中安装了一个名为vue-cli-service的命令
B. vue.config.js是一个可选的配置文件
C. 通过npx vue-cli-service helps查看所有的可用命令
D. 通过vue ui使用GUI图形用户界面来运行更多的特性脚本
- 下列选项中说法正确的是(AD)
A. 使用相对路径引入的静态资源文件,会被webpoack处理解析为模块依赖
B. 放在public文件夹下的资源将会经过webpack的处理
C. 通过绝对路径被引用的资源将会经过webpack的处理
D. URL以~开始,会被认为是模块请求
第八章 服务器渲染
填空题
- ________插件可以用来进行页面的热重载。
webpack-hot-middleware
- hash模式路由,地址栏URL中会自带________符号。
#
- SSR的路由需要采用________ 的方式。
history
- ________是利用搜索引擎规则,提高网站在搜索引擎内自然排名的一种技术。
SEO(搜索引擎优化)
- Vue中使用服务器渲染,需要借助Vue的扩展工具________ 。
vue-server-renderer
判断题
- 客户端渲染,即传统的单页面应用模式。(对)
- webpack-dev-middleware 中间件会对更改的文件进行监控。(对)
- 服务器渲染不利于SEO。(错)
- 服务器渲染应用程序,需要处于Node.js server运行环境。(对)
- 使用git-bash命令工具,输入指令mkdirs vue-ssr 来创建项目。(错)
选择题
- 下列选项说法正确的是(A)
A. vue-server-renderer的版本要与vue版本相匹配
B. 客户端渲染,需要使用entry-server.js和entry.client.js两个入口文件
C. app.js是应用程序的入口,它对应vue-cli创建的项目的app.js文件
D. 客户端应用程序既可以运行在浏览器上,又可以运行在服务器上
- 下列关于SSR路由的说法,错误的是(B)
A. SSR的路由需要采用history的方式
B. history模式的路由提交不到服务器上
C. history模式完成URL跳转而无重新加载页面
D. hash模式路由,地址栏URL中hash改变不会重新加载页面
- 下列关于Nuxt.js的说法,错误的是(D)
A. 使用“creat-nuxt-app项目名”命令创建项目
B. 使用Nuxt.js搭建的项目中,pages目录是用来存放应用的路由及视图
C. 在Nuxt.js项目中,声明式路由在html标签中通过<nuxt-link>完成路由跳转
D. Nuxt.js项目中需要根据目录结构手动完成对应的路由配置
第九章 “微商城”项目
选择题
- 使用Mini UI库的页面,需要通过________前缀来定义标签名。
mt-
- ________是一个基于Promise的HTTP库,可以用在浏览器和node.js中。
Axios
- ________是最接近原生App体验的高性能前端框架。
MUI
- 使用________,可以给Vue函数添加一个原型属性$http,指向axios。
Object.defineProperty
- 使用路由的声明式导航,在html标签中使用________组件来实现路由的跳转。
<router-link>
判断题
- MUI是一套代码片段,提供了配套的样式和HTML代码段。(错)
- 使用lazy-load可以实现图片懒加载。(对)
- 通过this.$store.state.*可以访问state中的数据。(对)
- 组件想要修改数据,需要调用mutations提供的方法,通过语句this.$store.emit(‘方法名’)实现。(错)
- better-scroll是一款支持各种滚动场景需求的插件。(对)
选择题
- 下列选项中,(A)指令可用来切换元素的可见状态
A. v-sjow
B. v-hide
C. v-toggle
D. v-slideHide
- 下列关于ref作用的说法,错误的是(D)
A. ref在子组件中使用时,使用this.$refs.name获取到组件实例,可以使用组件的所有属性和方法
B. ref加在普通的元素上,用this.ref.name 获取到的是DOM元素
C. 可以利用v-for和ref获取一组数组或DOM节点
D. ref在DOM渲染完成之前就能使用
- 想要获取购物车小球在页面上的位置,以下可以使用的是(B)
A. offset()
B. getBoundingClientRect()
C. width()
D. height()