Vue应用开发-练习题

文档来源网络整理侵权删除PAGE第一章：情境一一、选择题1.下列哪个选项不是单页面应用程序（SPA）的优点？A.不需要重新加载整个页面，运行流畅 B.高效的前后端分离模式C.有利于SEO D.减轻服务器压力2.下列哪些是Vue的特性？(多选)A.轻量级B.双向数据绑定C.组件化D.数据驱动视图3.不属于Vue使用虚拟DOM的特点是？A.虚拟节点可以理解成节点描述对象，它描述了应该怎样去创建真实的DOM节点B.虚拟DOM优势：渲染引擎操作DOM慢，JS运行效率高，于是将DOM对比操作放在JS层，提高效率C.提升渲染性能VirtualDOM的优势不在于单次的操作，而是在大量、频繁的数据更新下，能够对视图进行合理、高效的更新D.VirtualDOM是以JavaScript对象为基础，所以必须依赖于浏览器才能运行4.下面不属于Vue组件的是？A.VueRouter B.VueCLIC.VuexD.ElementUI5.VueRouter功能不包括？A.嵌套路由映射 B.动态路由选择C.页面布局D.模块化、基于组件的路由配置6.VueCli功能不包括？A.实现的交互式的项目脚手架 B.调试应用程序C.实现的零配置原型开发D.运行时依赖7.React和Vue描述错误的是？A.在React应用中，当某个组件的状态发生变化时，它会以该组件为根，重新渲染整个组件子树 B.在Vue中，一切都是JavaScriptC.Vue和React都提供了强大的路由来应对大型应用D.在Vue应用中，组件的依赖是在渲染过程中自动追踪的，所以系统能精确知晓哪个组件确实需要被重渲染8.AngularJS和Vue描述错误的是？A.AngularJS有更好的性能，并且非常非常容易优化 B.AngularJS使用双向绑定，Vue在不同组件间强制使用单向数据流C.Vue.js是一个更加灵活开放的解决方案D.Vue的一些语法和AngularJS的很相似，因为AngularJS是Vue早期开发的灵感来源9.Angular和Vue描述错误的是？A.这两个框架都很快，有非常类似的benchmark数据 B.Angular事实上必须用TypeScript来开发C.Angular相比Vue于更加灵活D.最近的Angular版本中在使用了AOT和tree-shaking技术后使得最终的代码体积减小了许多10.下面关于Vuex描述错误的是？A.Vuex是一个专为Vue.js应用程序开发的状态管理模式库 B.Vuex采用分布式存储管理应用的所有组件的状态C.每一个Vuex应用的核心就是store（仓库），store基本上就是一个容器，它包含着你的应用中大部分的状态stateD.在单页面应用中，Vuex能很好的在组件外部管理状态二、简答题1.什么是Vue框架？2.Vue生态系统中包括了哪些插件？第一章：情境二一、选择题1.关于Vue-cli说法错误的是？A.VueCLI是一个基于Vue.js进行快速开发的完整系统B.CLI(@vue/cli)是一个全局安装的npm包，提供了终端里的Vue命令C.CLI目前还不能提供图形化界面管理你的所有项目D.CLI服务是构建于webpack和webpack-dev-server之上的2.下列关于Vue2和Vue3的描述错误的是？A.Vue3中Template支持多个根标签，Vue2不支持B.Vue3中的生命周期的挂载钩子是onMounted，需要引入才能使用C.Vue3组合API中的setup()方法中不可以使用生命周期钩子函数D.Vue3引入了tree-shaking，以模块的方式引入api，减小打包体积3.下列关于VueCli的描述错误的是？A.VueCLI有几个独立的部分，VueCLI仓库里同时管理了多个单独发布的包B.安装Vue3+命令为：npminstallvue-cliC.安装Vue3+命令为：npminstall@vue/cliD.安装Vue3+后若要使用init命令，还需安装npminstall@vue/cli-init4.下列关于VueInit项目描述错误的是？A.build为项目构建包B.config为项目开发环境配置包C.src为项目源码包D.index.html文件在src源码包中，所有的页面文件都放置在源码包内5.下列哪个选项不是单页面应用程序（SPA）的优点？A.不需要重新加载整个页面，运行流畅 B.高效的前后端分离模式C.有利于SEO D.减轻服务器压力6.下列关于NodeJs的描述错误的是？A.Node.js在一台服务器上处理数千个并发连接时需引入管理线程B.Node.js是一个开源与跨平台的JavaScript运行时环境C.Node.js在浏览器外运行V8JavaScript引擎 D.Node.js应用程序运行于单个进程中，无需为每个请求创建新的线程7.下列关于npm的描述错误的是？A.Npm是Node.js标准的软件包管理器B.Npm制定版本安装命令个：npmi<package-name>#版本C.Npm提供包下载、更新、卸载、版本控制、运行任务等功能 D.Npm可运行package.json中定义的任务8.使用VueInit创建项目可采用的包有？（多选）A.browserifyB.browserify-simpleC.webpackD.webpack-simple9.使用VueInit创建项目时描述信息错的的是？A.Projectname：项目名称，可直接回车B.Installvue-router?(y/n)：是否安装VueRouterC.UseESLinttolintyourcode?(y/n)：是否初始化代码D.SetupunittestswithKarma+Mocha?(y/n)：是否安装单元测试10.本机同时启动两个Init项目，描述正确的是？A.第二个项目无法启动，端口被占用B.第二个项目无法启动，因同一台机器智能启动一个项目C.第二个项目可以启动，自动采用其余端口D.第二个项目可以启动，自动停止第一个项目二、简答题1.阐述VueCli从2.x升级到3.x过程。2.阐述Vueinit项目目录结构。第一章：情境三一、选择题1.关于VueCliCreate项目命令正确的是？A.vuecreateprojectNameB.vuecreatebrowserifyprojectNameC.vuecreatewebpackprojectNameD.vuecreatewebpack-simpleprojectName2.关于VueCliCreate项目包结构描述错误的是？A./node_modules：项目依赖包B./public：入口文件公共包C./src：源码包D./router：项目路由配置包3.关于VueCli描述错误的是？A.Create项目不能创建Vue3.x项目B.使用vuecreate之前必须安装vuecliC.vuecli的安装命令是npminstall-g@vue/cliD.@vue/cli兼容init创建项目方式4.关于main.js描述错误的是？A.main.js是项目全局js入口文件B.main.js中需要初始化Vue实例，并绑定index.html中id为app的divC.在main.js中使用了VueRender服务器渲染技术D.main.js和index.html在同一个目录5.启动create项目的命令正确的是？A.npmrunserverB.npmrunserveC.npmrundevD.npmrunlive6.Vue项目默认启动端口是？A.80B.443C.8080D.80887.关于App.vue描述正确的是？（多选）A.App.vue是项目的根组件B.App.vue由template、script、style组成C.App.vue由main.js导入，并渲染到index.html页面D.App.vue中需要导出vue实例，并指定名字8.关于App.vue导入组件描述错误的是？A.在script标签中使用import语法导入组件B.在components中注册组件C.导入组件可以同名D.在template中使用组件9.关于init和create项目描述错误的是？A.init项目需要选择模版，create项目无需选择模版B.init项目和create项目包结构相同C.init项目和create项目启动命令不同D.create项目能创建vue3.x项目二、简答题1.阐述Vuecreate单页面渲染过程。2.阐述Vueinit、create项目的区别。第一章：情境四一、选择题1.关于VueCliui项目命令正确的是？A.vueuiprojectNameB.vueuibrowserifyprojectNameC.vueuiwebpackprojectNameD.vueui2.关于VueCliUi项目包结构描述正确的是？（多选）A./node_modules：项目依赖包B./public：入口文件公共包C./src：源码包D./src/router：项目路由配置包3.启动vueui项目的命令正确的是？A.npmrunserverB.npmrunserveC.npmrundevD.npmrunlive4.关于vueui项目描述错误的是？A.可以选择Vue2、Vue3、手动配置方式、远程预设方式创建项目B.可以在项目管理中直接编译和启动项目C.项目管理器地址http://localhost:8000/project/selectD.需使用命令方式启动项目5.关于vueui项目自动依赖的环境有？（多选）A.Vue3B.babelC.ESLintD.ElementUI二、简答题1.阐述Vueui创建项目流程。第二章：情境一一、选择题1.Vue模板语法有？（多选）A.插值B.指令C.缩写D.脚本2.Vue插值使用场景不包括？A.TextB.HTMLC.JavaScriptD.CSS3.下列关于v-model的说法，哪项是不正确的是？A.v-model如果为不同元素绑定数据，则使用不同的元素property，并抛出不同的事件B.v-model本质上是语法糖，它负责监听用户的输入事件以更新数据C.v-model是内置指令，不能用在自定义组件上D.对input使用v-model，实际上是指定其:value和input事件4.关于Vue双向数据绑定说法错误的是：A.Vue实现双向数据绑定是采用数据劫持和发布者-订阅者模式B.Object.defineProperty(obj,key,val)可以监听数组变化，不需要做特殊处理C.Vue2.0数据劫持是利用ES5的Object.defineProperty(obj,key,val)方法来劫持每个属性的getter和setterD.用户更新了View，Model的数据也自动被更新了，这种情况就是双向数据绑定5.以下代码打印结果为：<divid="app">{{message.split('').reverse().join('')}}</div><script>newVue({el:"#app",data:{message:"hello"}});</script>A.helloB.helC.ollehD.llo6.现有以下代码，下面说法错误的是：<divv-show='flag'>v-show</div><divv-if='flag'>v-flag</div>A.当flag是true时，两个div都能显示出来B.当flag是false时，第一个div进行了渲染C.当flag是false时，第一个div设置了display:noneD.当flag是false时，第二个div设置了visible:hidden7.关于v-model描述错误的是？A.v-model指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定B.v-model本质上是语法糖，它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理C.v-model使用表单元素的value、checked、selected属性的初始值作为数据来源D.v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件8.不是Vue.js指令的是？A.v-textB.v-refC.v-bindD.v-model9.v-for遍历对象写法错误的是？A.(value,index)inobjectB.valueinobjectC.(value,name)inobjectD.(value,name,index)inobject10.不是vue事件修饰符的是？A..stopB..preventC..selfD..one二、简答题1.说出几种vue的指令和用法。2.Vue中的单向数据流和双向数据绑定是什意思？第二章：情境二一、选择题1.有如下代码，最终渲染出来的div元素的class属性值是：<divclass="static"v-bind:class="{active:isActive,'text-danger':hasError}"/>data:{isActive:true,hasError:false} A.staticisActive B.staticactiveC.statichasError D.isActive2.关于绑定HTMLClass书写错误的是？A.<divv-bind:class="{active:isActive}"></div>B.<divv-bind:class="[activeClass,errorClass]"></div>C.<divv-bind:class="[active:isActive,errorClass]"></div>D.<divv-bind:class="[isActive?activeClass:'',errorClass]"></div>3.关于绑定HTMLStyle书写错误的是？A.<divv-bind:style="{color:activeColor,fontSize:fontSize+'px'}"></div>B.<divv-bind:style="styleObject"></div>C.<divv-bind:style="[baseStyles,overridingStyles]"></div>D.<divv-bind:style="[color:activeColor,overridingStyles]"></div>4.关于vue过渡与动画描述错误的是？A.在CSS过渡和动画中自动应用classB.不能使用第三方CSS动画库C.在过渡钩子函数中使用JavaScript直接操作DOMD.可以配合使用第三方JavaScript动画库，如Velocity.js5.关于过渡类名描述错误的是？A.v-enter：定义进入过渡生效时的状态B.v-enter-active：定义进入过渡生效时的状态C.v-leave：定义离开过渡的开始状态D.v-leave-active：定义离开过渡生效时的状态6.下列情形不可以给元素和组件添加进入/离开过渡的是A.条件渲染(使用v-if)B.事件绑定(使用v-on)C.条件展示(使用v-show)D.动态组件7.过渡的种类不包括？A.单元素的过渡B.多个元素的过渡C.列表过渡D.页面过渡8.当插入或删除包含在transition组件中的元素时，下面描述错误的是？A.自动嗅探目标元素是否应用了CSS过渡或动画，如果是，在恰当的时机添加/删除CSS类名B.如果过渡组件提供了JavaScript钩子函数，这些钩子函数将在恰当的时机被调用C.如果没有找到JavaScript钩子并且也没有检测到CSS过渡/动画，DOM操作(插入/删除)在下一帧中立即执行D.不做任何处理9.过渡元素为：<transitionname="my-transition">，过渡类名错误的是？A.v-enterB.my-transition-enterC.my-transition-leave D.my-transition-leave-active10.关于<transition-group>描述正确的是？（多选）A.不同于<transition>，它会以一个真实元素呈现：默认为一个<span>。你也可以通过tagattribute更换为其他元素B.过渡模式不可用，因为我们不再相互切换特有的元素C.内部元素总是需要提供唯一的keyattribute值 D.CSS过渡的类将会应用在内部的元素中，而不是这个组/容器本身二、简答题1.书写class绑定中三目表达式的例子。2.阐述Css过渡与动画的区别。第二章：情境三一、选择题1.关于计算属性的描述，错误的是？ A.Vue实例中用computed定义计算属性 B.定义计算属性，实际定义了计算属性方法C.计算属性无需返回值D.可以像绑定普通动态属性一样在模板中绑定计算属性2.下列关于计算属性和方法描述错误的是？ A.计算属性是基于响应式依赖进行缓存的 B.计算属性只在相关响应式依赖发生改变时它们才会重新求值C.方法调用将总会再次执行函数D.方法调用可以缓存上次调用结果3.下列描述错误的是？ A.侦听器更方便观察和响应Vue实例上的数据变动 B.侦听器过多会造成滥用watch的情况C.计算属性默认有getter、setter方法D.模型数据变化后，计算属性setter方法被调用4.可使用过滤器的是？（多选） A.{{}} B.v-modelC.v-bindD.v-on5.关于过滤器的描述，错误的是？ A.Vue实例中用filters定义过滤器 B.定义过滤器，实际定义了过滤器方法C.过滤器无需返回值D.Vue.filter定义全局过滤器6.下列描述错误的是？ A.当全局过滤器和局部过滤器重名时，会采用全局过滤器 B.过滤器函数总接收表达式的值作为第一个参数C.过滤器可以串联D.过滤器应该被添加在JavaScript表达式的尾部，由“管道”符号指示二、简答题1.阐述计算属性和方法的区别。2.阐述过滤器使用场景。第三章：情境一一、选择题1.关于Vue组件化说法错误的是？ A.所谓组件化，就是把页面拆分成多个组件(component)，每个组件依赖的CSS、JavaScript、模板、图片等资源放在一起开发和维护B.组件是资源独立的，组件在系统内部可复用，但是组件和组件之间不可以嵌套C.Vue的组件之间可以进行通信D.组件化能提高开发效率，方便重复使用，简化调试步骤，提升项目可维护性，便于多人协同开发2.关于Vue组件间通信说法错误的是？ A.Vuex可以实现任何关系的组件间的通信B.如果子组件修改，通过props获取的父组件传过去的字符串或数字会报错C.子组件可以通过$emit给父组件传值D.可以通过context进行组件间传值3.关于Vue组件间的参数传递，下列哪项是不正确的？ A.若子组件给父组件传值，可使用$emit方法B.祖孙组件之间可以使用provide和inject方式跨层级相互传值C.若子组件使用$emit('say')派发事件，父组件可使用@say监听D.若父组件给子组件传值，子组件可通过props接受数据4.Vue组件的结构包括？（多选） A.templateB.scriptC.styleD.html5.关于组件注册描述错误的是？ A.组件可全局注册，也可局部注册B.局部注册的组件在其子组件中可用C.全局注册的组件在其子组件中可用D.引入组件语法：importComponentAfrom'./ComponentA'6.不是Prop类型的是？ A.StringB.NumberC.BooleanD.tuple7.关于prop描述错误的是？ A.Prop是可以在组件上注册的一些自定义attributeB.当一个值传递给一个prop属性的时候，它就变成了那个组件实例的一个属性C.prop定义时必须声明类型D.prop可传递静态值，也可传递动态属性8.关于监听子组件描述错误的是？ A.子组件可以通过调用内建的$emit方法并传入事件名称来触发一个事件B.父组件在调用子组件时候，通过监听子组件发射的事件名，来调用处理函数C.子组件调用$emit方法，除了事件名作为第一参数外，只能传递1个参数D.$emit方法可以发射单一的值，也可发射一个对象9.插槽定义错误的是？ A.<slot></slot>B.<slotname="header"></slot>C.<slotv-bind:user="user">{{user.lastName}}</slot>D.<slat></slat>10.关于插槽的描述错误的是？ A.插槽内只能写HTML代码B.一个不带name的<slot>出口会带有隐含的名字“default”C.在向具名插槽提供内容的时候，我们可以在一个<template>元素上使用v-slot指令，并以v-slot的参数的形式提供其名称D.v-slot缩写为#二、简答题1.vue组件中data为什么是一个函数？2.vue父子组件如何传递数据？第三章：情境二一、选择题1.以下选项中不可以进行路由跳转的是？ A.push()B.replace()C.route-linkD.jump()2.以下获取动态路由{path:'/user/:id'}中id的值正确的是？ A.this.$route.params.idB.this.route.params.idC.this.$router.params.idD.this.router.params.id3.VueRouter功能有？（多选） A.嵌套的路由/视图表B.模块化的、基于组件的路由配置C.路由参数、查询、通配符D.细粒度的导航控制4.视图命名定义错误的是？A.<router-viewclass="viewone"></router-view>B.<router-viewclass="viewtwo"name="a"></router-view>C.<router-viewclass="viewthree"name="b"></router-view>D.<router-viewclass="viewfour"id="c"></router-view>5.动态路由绑定正确的是？A./user/#usernameB./user/{username}C./user/:usernameD./user/${username}6.路由push函数可接受的参数有？（多选）A.字符串B.对象C.命名的路由D.带查询参数7.关于router的描述错误的是？A.借助vue-router嵌套路由配置，可以很简单地表达多层嵌套的组件关系B.定义路由的时候可以配置meta字段C.动态路由“路径参数”使用冒号:标记D./a的别名是/b，意味着，当用户访问/b时，URL会跳转到/a二、简答题1.vuerouter如何实现重定向？2.书写一个嵌套路由的例子。第四章：情境一一、选择题1.关于vue-resource插件说法错误的是？ A.体积小：Vue-Resource非常小巧，压缩文件仅14KB，gzip文件仅5.3KB B.支持PromiseAPI和URITemplates C.支持拦截器 D.只支持Vue2.02.vue-resourcebody支持的数据类型有？(多选) A.Object B.FormData C.String D.None3.vue-resourceHTTP方法不支持？ A.get B.head C.jsonp D.options4.vue-resource响应对象不包含哪个属性？ A.url B.body C.content D.status5.vue-resource请求参数包含？（多选） A.url B.body C.headers D.method二、简答题1.书写vueresourceget请求例子。2.书写vueresourcepost请求例子。第四章：情境二一、选择题1.关于axios说法错误的是？ A.Axios是一个基于promise的HTTP库，支持promise所有的APIB.它可以拦截请求和响应C.它可以转换请求数据和响应数据，并对响应回来的内容自动转换成JSON类型的数据D.安全性更高，客户端不支持防御XSRF2.axios有哪些常用方法？(多选) A.axios.get(url[,config]) B.axios.delete(url[,config])C.axios.post(url[,data[,config]])D.axios.put(url[,data[,config]])3.以下哪些是axios相关配置属性？（多选） A.url B.method C.headers D.param4.axiosHTTP方法不支持？ A.get B.head C.jsonp D.options5.axios响应对象不包含哪个信息？ A.data B.headers C.content D.status二、简答题1.书写axiosget请求例子。2.书写axiospost请求例子。第五章：情境一一、选择题1.Nginx常用命令有？A.#sbin/nginxB.#sbin/nginx-sstopC.#sbin/nginx-sreloadD.#kill-QUITnginx-master-id2.Vue项目打包命令是？ A.npmrunbuild B.npmrundev C.npmrunstaging D.npmrunlive3.Vue项目打包命后会生成什么文件夹？ A./webapp B./dist C./class D./webRoot4.关于Nginx的描述错误的是？ A.Nginx是一款高性能的http服务器、反向代理服务器及电子邮件（IMAP/POP3）代理服务器 B.nginx能够支撑5万并发链接，并且cpu、内存等资源消耗却非常低，运行非常稳定 C.Nginx的安装需要gcc-c++、pcre等 D.nginx.conf.default优先级高于nginx.conf5.关于Nginx配置的描述错误的是？ A.listen：侦听端口号 B.location：网页地址映射配置 C.root：定义服务器的默认网站根目录位置 D.server：服务器配置二、简答题1.简述Vue项目部署流程。2.简述几项Nginx配置及其含义。第一章：情境一一、选择题1.C2.ABCD3.D4.D5.C6.B7.B8.A9.C10.B二、简答题1.什么是Vue框架？Vue是一套用于构建用户界面的渐进式框架，是一套MVVM模型框架。2.Vue生态系统中包括了哪些插件？Devtools、VueCLI、VueLoader核心插件：VueRouter、Vuex、Vue服务端渲染（VueRender）第一章：情境二一、选择题1.C2.C3.B4.D5.C6.A7.B8.ABCD9.C10.C二、简答题1.阐述VueCli从2.x升级到3.x过程。npmuninstallvue-cli-gnpminstall@vue/cli-gnpminstall@vue/cli-init-g2.阐述Vueinit项目目录结构。build：项目构建包config：项目环境配置包src：源码目录static：静态资源文件包index.html：入口页面第一章：情境三一、选择题1.A2.B3.A4.D5.B6.C7.ABCD8.C9.B二、简答题1.阐述Vuecreate单页面渲染过程。 项目构建之初，也已经生成好了SPA入口界面/public/index.html，并在系统入口处（/src/main.js）构建了Vue对象，并将App.vue对象渲染的界面挂载在index.html中id="app"的div标签上。2.阐述Vueinit、create项目的区别。创建项目命令不同，init要选择模版包名；生成项目包结构不同，create项目将index.html文件移到了public目录下；启动项目命令不同，init项目npmrundev，create项目npmrunserve；第一章：情境四一、选择题1.D2.ABCD3.B4.D5.ABC二、简答题1.阐述Vueui创建项目流程。 vueui创建新项目配置依赖和插件编译启动项目。第二章：情境一一、选择题1.ABC2.D3.C4.B5.C6.D7.C8.B9.A10.D二、简答题1.说出几种vue的指令和用法。 v-model双向数据绑定；v-for循环；v-ifv-show显示与隐藏；v-on事件；v-once只绑定一次；2.Vue中的单向数据流和双向数据绑定是什意思？ 单项数据流：数据是单向的，父组件的数据传递给子组件，只能单项绑定，不可以在子组件修改父组件的数据； 双向数据绑定：数据和页面进行双向绑定，相互影响；第二章：情境二一、选择题1.B2.C3.D4.B5.A6.B7.D8.D9.A10.ABCD二、简答题1.书写class绑定中三目表达式的例子。 <divv-bind:class="[isActive?activeClass:'',errorClass]"></div>2.阐述Css过渡与动画的区别。 CSS动画用法同CSS过渡，区别是在动画中v-enter类名在节点插入DOM后不会立即删除，而是在animationend事件触发时删除。第二章：情境三一、选择题1.C2.D3.C4.AC5.C6.A二、简答题1.阐述计算属性和方法的区别。 计算属性是基于它们的响应式依赖进行缓存的，在模型未改变之前，返回缓存数据； 每当触发重新渲染时，调用方法将总会再次执行函数；2.阐述过滤器使用场景。 字符过滤、数据处理等。第三章：情境一一、选择题1.B2.D3.B4.ABC5.B6.D7.C8.