vue习题
一 单选题，每道小题1分，共9道小题，9分1. 下面选项中，可以用来创建store实例对象的是（）。Anew Vuex.Store({})Bnew Vue({})Cnew Vuex({})Dnew Store({})2. 以下代码 {{this.$store.state.name}}var store = new Vuex.Store({state:{name:'store'}})var vm=
一 单选题，每道小题1分，共9道小题，9分
1. 下面选项中，可以用来创建store实例对象的是（）。
A new Vuex.Store({})
B new Vue({})
C new Vuex({})
D new Store({})
2. 以下代码
<div id="app">
<p>{{this.$store.state.name}}</p>
</div>
<script>
var store = new Vuex.Store({
state:{name:'store'}
})
var vm = new Vue({el:'#app',store})
</script>中的this指的是（）。
A <p>标签
B window对象
C store实例
D Vue实例
3. 以下代码
const store = new Vuex.Store({
state: { name: 'name初始值' },
})
store.replaceState({ name: 'b' })
console..log(store.state.name)执行后的结果是（）。
A name
B name初始值
C b
D a
正确答案：C
4. 下面选项中，可以实现actions中事件处理函数状态分发的是（dispatch）。
A mutations
B actions()
C commit()
D dispatch()
正确答案：D
5. devtools选项用来设置是否在devtools调试工具中启用Vuex，表示启用的值是（true）。
A vuex
B false
C devtools
D true
正确答案：D
6. 下面选项中，可以用来创建vue项目的命令的是（vue）。
A vue init shopcart
B vue init webpack shopcart
C vue shopcart
D vue install shopcart
正确答案：B
答案解析：store实例配置中的devtools选项用来设置是否在devtools调试工具中启用Vuex，默认值为true，表示在启用，设为false表示停止使用。
devtools选项经常用在一个页面中存在多个store实例的情况。
7. 以下代码
const store = new Vuex.Store({
state: {
count: 0
},
// 修改count的值
mutations: {
increase (state) {
console.log(state.count) }
}
})
store.commit('increase');执行后的结果是（）。
A 2
B -1
C 1
D 0
8. 下面选项中，用来定义store实例的初始数据的是（）。
A getters
B actions
C mutations
D state
答案解析：state配置选项定义组件初始状态，类似于Vue实例中的data属性。
9. 下面选项中，可以实现mutations中事件处理函数状态提交的是（commit()）。
A actions
B commit()
C mutations()
D dispatch()
二 多选题，每道小题2分，共7道小题，14分
1. 下列选项中，subscribe函数接收的参数包括（）。
A actions
B getters
C mutation
D state
2. 下列选项中，说法正确的是。（）
A 在getters中定义的方法，接收commit作为参数
B 只有当getters的依赖值发生了改变才会被重新计算
C getters类似于Vue实例的computed
D store实例允许在store中定义getters计算属性
3. 下面选项中，说法正确的是。
A mutations选项可以用methods替代使用
B commit()可以接收{ type: 'receive', name: '我是传递的参数' }配置对象作为参数
C 在Vuex配置选项中，actions是同步(异步)执行的
D 在Vuex配置选项中，mutations是同步执行的
答案解析：mutations是同步函数，组件状态发生变化时，触发mutations中的事件处理方法来更新页面状态的变化，这是一种同步状态。
定义mutations中的事件处理方法，接收受参数为state和param，也可以直接接受{type:'',param:''}配置对象。
methods是在创建Vue实例时定义的，而mutations是在store实例创建时定义的，所以不能替代使用。
4. 下面选项中，属于模块操作方法的是（）。
A store.unregister('moduleName')
B store.Module('moduleName')
C store.unregisterModule('moduleName')
D store.registerModule('moduleName')
答案解析：暂无解析
5. 下面选项中，关于Vuex状态管理模式说法正确的是。（）
A Vuex是专门为Vue设计的状态管理库
B 在Vue中，组件的状态变化是通过Vue单向数据流的设计理念实现的
C Vue的单向数据流增强了组件之间的独立性
D Relux是专门为Vue设计的状态管理库
6. 下列选项中，属于modules中的配置选项的是（）。
A actions
B getters
C state
D key
答案解析：modules是store实例对象的选项，其参数构成主要包括:
key: {
state,
mutations,
actions,
getters,
modules
},
其中，
state表示初始数据、
mutations表示状态提交、
modules表示模块注册、
getters表示计算属性
actions状态分发。
7. 下面选项中，说法正确的是。（）
A Vuex的状态存储是响应式的，当store中数据状态发生变化，那么页面中的store数据也发生相应变化。
B this.$router.state可以获取到store中的state数据
C 改变store中的状态的唯一途径就是显式地提交mutation
D 每一个Vuex应用的核心就是store（仓库），即响应式容器
三 判断题，每道小题1分，共9道小题，9分
1. 通过store.replaceState({})可以切换Vue中data的数据状态。（）
2. store实例对象中的plugins选项的功能是定义初始数据( )
答案解析：Vuex中的插件配置选项为plugins。
3. 在Vue中，组件的状态变化是通过Vue单向数据流的设计理念实现的。（）
4. actions中的事件方法接收参数只能是commit对象，主要是用来完成状态提交。（）
5. 通过state配置选项定义组件初始状态，类似于Vue实例中data属性。（）
6. getters中的事件方法可以接收其它的getters作为第二个参数。（）
答案解析：getters中的doneTodosCount接收其他getters作为第2个参数；
7. mutations中的事件方法可以接收参数是commit对象，主要是用来完成状态提交。（）
8. 构造器创建store实例后，需要挂载到vm实例才能在项目中进行使用。（）
9. 通过store.unregisterModule('moduleName')来卸载静态模块。（）
四 填空题，每道小题1分，共9道小题，9分
1. store实例对象提供了动态创建模块的接口，即___________方法。
2. store.registerModule()方法之前首先要完成store实例对象创建，方法接受_________作为第一个参数。
答案解析：调用store.registerModule()方法之前首先要完成store实例对象创建，方法接收模块名称"myModule"作为第1个参数；
3. mutations中的事件处理函数可以接受_____作为参数，即初始数据。
4. actions中的事件处理函数可以接受{commit}作为第一个参数，用来完成___状态的提交。
5. state数据状态操作，可以通过___方法实现状态替换。
6. store实例配置中的__________选项用来设置是否在vue-devtools调试工具中启用Vuex。
7. 通过调用store.replaceState()方法能够实现状态切换，接收参数为__________新对象。
8. getters中定义事件处理函数方法，该方法接收__________参数作为第一个参数。
9. 以下代码
<script>
const store = new Vuex.Store({
state: {
count : 0
},
// 修改count的值
mutations: {
increase (state) {
state.count++
}
}
})
store.commit('increase')
console.log(store.state.count)
</script>执行后的结果是__________
一 单选题，每道小题1分，共20道小题，20分
1. 下面选项中，可以访问原始数据对象的是（）。
A vm.$methods
B vm.$props
C vm.$el
D vm.$data
答案解析：Vue实例创建之后，可以通过vm.$data访问原始数据对象。
Vue实例也代理了data对象上所有的属性，因此访问vm.name相当于访问vm.$data.name。
2. 以下代码
var vm = new Vue({
el: '#app',
data: {
price: 20,
num: 1
},
computed: {
// 总价格totalPrice
totalPrice () {
return this.price * this.num
}
}
})
console.log(vm.totalPrice);执行后的结果是（）。
A 0
B 2
C 20
D 1
3. 下列选项中，在插值表达式中可以使用过滤器来对数据进行处理，管道符号是（）。
A /
B >
C |
D \\
4. 下列选项中，可以实现绑定事件的指令是（）。
A v-show
B v-on
C v-html
D v-text
答案解析：v-show：控制元素显示隐藏；
v-on：监听事件；
v-html：插入包含HTML的内容；
v-text：插入文本内容；
5. 下列选项中，代表视图部分的是（）。
A Element
B DOM
C Model
D View
答案解析：MVVM主要包含3个部分，分别是Model、View和ViewMode。
Model指的是数据部分，主要负责业务数据；View指的是视图部分，即DOM元素，负责视图的处理。
6. Windows系统内置的命令行工具是（）。
A npm
B cmder
C git-bash
D cmd
7. 以下代码
<div id="app">
<div>{{message | toUpcase}}</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'helloworld'
},
filters: {
// 将 helloworld 转换为 HELLOWORLD
toUpcase (value) {
return value ? value.toUpperCase() : ''
}
}
});
</script>执行后的结果是（）。
A HELLOworld
B Helloworld
C HELLOWORLD
D HelloWorld
8. 下面选项中，可以引入vue.js文件的是（）。
A <a>
B <script>
C <style>
D <link>
9. 下列选项中，可以实现阻止事件冒泡行为的是（）。
A .self
B .capture
C .prevent
D .stop
答案解析：.stop：阻止事件冒泡；
.self：将事件绑定到自身，只有自身才能触发；
.capture：事件捕获；
.prevent：阻止默认事件行为；
10. 下面选项中，在创建Vue实例时，用来表示唯一根标签的是（）。
A watch
B components
C data
D el
答案解析：在创建Vue实例时，el表示唯一根标签，通过class或id选择器可用来将页面结构与Vue实例对象vm中的el绑定。
11. 下面选项中，是基于Chrome V8引擎的JavaScript运行环境，它可以让JavaScript运行在服务器端的是（）。
A npm.js
B jQuery.js
C vue.js
D Node.js
12. 下面选项中，主要用来编写网页的结构的是（）。
A php
B HTML
C CSS
D JavaScript
答案解析：Web前端使用HTML、CSS和JavaScript作为基础语言，它们分别用来实现网页的结构、样式和行为。
HTML主要用来编写网页的结构，例如<a></a>表示超链接。
13. 下面选项中，用于卸载指定包依赖的命令的是（）。
A npm uninstall
B npm install
C npm update
D npm start
答案解析：? npm install：安装项目所需要的全部包，需要配置package.json文件；
npm uninstall：卸载指定名称的包；
npm install 包名：安装指定名称的包，后面可以跟参数"-g"表示全局安装，"--save"表示本地安装；
npm update：更新指定名称的包；
npm start：项目启动；通过CDN方式引入Vue，可以缓解服务器的压力，加快文件的下载速度。目前，网络上有很多免费的CDN服务器可以使用
?npm run build：项目构建。
14. 下列选项中，可以实现获取随机数的是（）。
A Math.max()
B Math.min()
C Math.random()
D Math.floor()
答案解析：Math.max()获取最大数；
Math.min()获取最小数；
Math.random()获取随机数；
Math.floor()向下取整；
15. 下面选项中，表示一个Node.js的包管理工具，用来解决Node.js代码部署问题的是（）。
A webpack
B vue
C Node
D npm
答案解析：npm（Node.js Package Manager）是一个Node.js的包管理工具，用来解决Node.js代码部署问题。
在安装Node.js时会自动安装相应的npm版本，不需要单独安装。
16. 下面选项中，可以用来创建实例对象的关键字是（）。
A let
B var
C data
D new
答案解析：创建Vue实例的基本代码如下：
<script>
var vm = new Vue({
// 选项
})
</script>
其中，使用new关键字创建Vue实例对象。
17. 下面选项中，可以通过插值语法将data初始数据绑定到页面中的是（）。
A [[]]
B {}
C {{}}
D []
18. 以下代码
var vm = new Vue({
el: '#app',
data: {
cityName: 'shanghai'
},
// 使用watch监听cityName变化
watch: {
cityName (newName, oldName) {
console.log(newName, oldName)
}
}
})
vm.$data.cityName = 'beijing'执行后的结果是（）。
A bei shang
B shanghai
C beijing shanghai
D beijing
19. 下面选项中，那一项是一款基于Chrome浏览器的扩展，用于调试Vue应用的工具（）。
A VS code
B vue-devtools
C Wechat
D Chrome
答案解析：vue-devtools是一款基于Chrome浏览器的扩展，用于调试Vue应用，只需下载官方压缩包，配置Chrome浏览器的扩展程序即可使用。
20. 下列选项中，methods选项描述错误的是（）。
A methods选项中可以定义初始数据
B methods选项中用来定义事件处理函数
C methods选项中函数可以采用省略function的写法来实现
D methods选项中的函数可以通过this指针获取初始数据
答案解析：methods属性用来定义方法，通过Vue实例可以直接访问这些方法。
在定义的方法中，this指向Vue实例本身。
定义在methods属性中的方法可以作为页面中的事件处理方法使用，当事件触发后，执行相应的事件处理方法。
二 多选题，每道小题2分，共13道小题，26分
1. 下列选项中，可以实现插入内容的指令是（v-html,v-text）。
A v-show
B v-on
C v-html
D v-text
答案解析：v-html：插入包含HTML的内容；
v-text：插入文本内容；
2. 下面选项中，关于Visual Studio Code编辑器说法正确的是（）。
A Visual Studio Code编辑器不仅跨平台（支持Mac Windows以及Linux），使用起来也非常简单。
B 不能安装插件使用
C Visual Studio Code编辑器具备语法高亮显示 智能代码补全 自定义快捷键和代码匹配等功能。
D 轻巧极速，占用系统资源较少。
答案解析：VS Code编辑器特点主要包括：
1.轻巧极速，占用系统资源较少。
2.具备语法高亮显示、智能代码补全、自定义快捷键和代码匹配等功能。
3.跨平台。不同的开发人员为了工作需要，会选择不同平台来进行项目开发工作，这样就一定程度上限制了编辑器的使用范围。VS Code编辑器不仅跨平台（支持Mac、Windows以及Linux），使用起来也非常简单。
（4）主题界面的设计比较人性化。例如，可以快速查找文件直接进行开发，可以通过分屏显示代码，主题颜色可以进行自定义设置（默认是黑色），也可以快速查看最近打开的项目文件并查看项目文件结构。
（5）提供了丰富的插件。VS Code提供了插件扩展功能，用户根据需要自行下载安装，只需在安装配置成功之后，重新启动编辑器，就可以使用此插件提供的功能。
3. 下列选项中，可以实现为按钮绑定点击事件的是（）。
A <button $click="showInfo"></button>
B <button #click="showInfo"></button>
C <button @click="showInfo"></button>
D <button οnclick="showInfo"></button>
4. 下面选项中，属于Visual Studio Code编辑器优势的是（）。
A 简单
B 繁琐
C 高效
D 便捷
答案解析：VS Code编辑器特点主要包括：
1.轻巧极速，占用系统资源较少。
2.具备语法高亮显示、智能代码补全、自定义快捷键和代码匹配等功能。
3.跨平台。不同的开发人员为了工作需要，会选择不同平台来进行项目开发工作，这样就一定程度上限制了编辑器的使用范围。VS Code编辑器不仅跨平台（支持Mac、Windows以及Linux），使用起来也非常简单。
（4）主题界面的设计比较人性化。例如，可以快速查找文件直接进行开发，可以通过分屏显示代码，主题颜色可以进行自定义设置（默认是黑色），也可以快速查看最近打开的项目文件并查看项目文件结构。
（5）提供了丰富的插件。VS Code提供了插件扩展功能，用户根据需要自行下载安装，只需在安装配置成功之后，重新启动编辑器，就可以使用此插件提供的功能。
5. 下面选项中，用来与Vue实例对象vm中的el绑定选择器是（）。
A class
B id
C name
D in
6. Node.js有两个版本，主要包括( )
A MIN
B LTS长期版本
C Current最新版本
D LONG
答案解析：Node.js有两个版本，LTS（Long Term Support）是提供长期支持的版本，只进行微小的Bug修复且版本稳定，因此有很多用户在使用；
Current是当前发布的最新版本，增加了一些新特性，有利于进行新技术的开发使用。
7. 下列选项中，关于watch选项说法正确的是（）。
A watch选项中可以监听初始数据状态变化
B 当data中数据状态发生变化时，会触发watch选项中对应的事件处理函数
C watch选项可以用来替代computed选项使用
D watch选项中函数接收参数用来表示，新值和旧值。
8. 下面选项中，关于Vue说法正确的是（）。
A Vue不可以用来构建单页应用
B Vue通过虚拟DOM技术来减少对DOM的直接操作
C Vue支持单向和双向数据绑定
D Vue组件化的特性提高了开发效率 使代码更容易复用
答案解析：单页应用是前端开发的一种形式，在切换页面的时候，不会刷新整个页面，而是通过Ajax异步加载新的数据，改变页面的内容。为了更方便地开发这类复杂的应用，市面上出现了Angular、React、Vue等框架。Vue通过虚拟DOM技术来减少对DOM的直接操作，通过尽可能简单的API来实现响应的数据绑定，支持单向和双向数据绑定。组件化的特性提高了开发效率、使代码更容易复用，提高了项目的可维护性，便于团队的协同开发。
9. 下列选项中，Vue.js的版本主要包括（）。
A vue.press.js
B 开发版本
C 生产版本
D vue.max.js
10. 下面选项中，说法正确的是（）。
A el用来定义唯一根标签
B data中定义初始数据
C watch中定义初始数据
D methods中可以定义事件处理函数
答案解析：Vue提供了watch状态监听功能，只需监听当前Vue实例中的数据变化，就会调用当前数据所绑定的事件处理方法。
11. 下列选项中，关于computed属性说法正确的是（）。
A 当有一些数据需要随着其他数据变动而变动时，就需要使用computed计算属性。
B computed属性中函数可以通过this获取到初始数据
C computed属性中可以定义页面的事件处理函数
D 实现了一种更通用的方式来观察和响应Vue实例上的数据变动
答案解析：Vue 提供了一种更通用的方式来观察和响应Vue实例上的数据变动，当有一些数据需要随着其他数据变动而变动时，就需要使用computed计算属性。
在事件处理方法中，this指向的Vue实例的计算属性结果会被缓存起来，只有依赖的响应式属性变化时，才会重新计算，返回最终结果。
12. 下面选项中，用于开发和调试Web项目的工具的是（）。
A 浏览器
B 选择器
C 计时器
D vue-devtools扩展
13. 下列选项中，关于学生列表案例实现的说法正确的是（）。
A 学生信息列表可以通过数组的pop()方法实现删除学生信息
B 通过数组定义学生信息列表
C 学生信息列表可以通过数组的pull()方法实现添加学生信息
D v-for指令可以实现学生列表渲染
三 判断题，每道小题1分，共36道小题，36分
1. 指令npm install webpack@4.27.x -g表示全局安装webpack，且版本号是4.27.x。（）
2. 生命周期函数的最后阶段是实例的销毁。（）
答案解析：生命周期函数的最后阶段是实例的销毁，会执行beforeDestroy和destroyed钩子函数。
3. 生命周期函数的最后阶段是实例的销毁，会执行beforeDestroy和destroyed钩子函数。（）
4. Vue中，可以通过绑定类名实现元素样式。（）
5. 在Vue项目中，每个Vue应用都是通过Vue构造器创建新的Vue实例开始的。（）
6. Vue与Angular较为相似，但Angular在学习上有一定难度。（）
答案解析：Angular的学习成本高，使用起来比较复杂，而Vue相对简单、直接，所以Vue使用起来更加友好，更简单。
7. 通过<a href="#" @click.prevent="">登录</a>实现阻止a标签的默认事件行为。（）
8. 通过"{{data}}"语法，可以将data中数据插入到页面中。（）
9. Vue配置对象中，使用watch监听数据变化，并触发相应事件处理函数。（）
10. 事件修饰符是自定义事件行为，配合v-on指令来使用，写在事件之后，用"."符号连接。（）
11. 通过使用.prevent修饰符来阻止<a>标签的默认行为。（）
答案解析：.prevent可以实现阻止默认事件行为；
12. methods属性用来定义方法，通过Vue实例对象可以直接访问这些方法。（）
答案解析：methods属性用来定义方法，通过Vue实例可以直接访问这些方法。
在定义的方法中，this指向Vue实例本身。
定义在methods属性中的方法可以作为页面中的事件处理方法使用，当事件触发后，执行相应的事件处理方法。
13. v-text内部指令表示插入文本内容。（）
14. JavaScript主要包括行为，主要是为页面提供交互效果，实现更好的用户体验。（）
答案解析：Web前端使用HTML、CSS和JavaScript作为基础语言，它们分别用来实现网页的结构、样式和行为。
JavaScript的功能主要包括实现页面逻辑、行为、动作等，用来动态操作元素的属性，主要是为页面提供交互效果，实现更好的用户体验。
15. vue-cli是快速创建Vue项目的脚手架工具。（）
16. git-bash命令行工具可以代替Windows内置的cmd命令行工具来使用。（）
答案解析：git-bash是git（版本管理器）中提供的一个命令行工具，外观类似于Windows系统内置的cmd命令行工具，但用户体验更友好。
在实际开发中，经常会使用git-bash工具代替cmd。
17. 在构建大型交互式项目时，开发者需要编写大量的JavaScript代码来操作DOM，不需要处理浏览器的兼容问题。（）
答案解析：在构建大型交互式项目时，开发者需要编写大量的JavaScript代码来操作DOM（文档对象模型），并处理浏览器的兼容问题，代码逻辑越来越烦琐。
18. npm run build命令表示项目构建。（）
答案解析：? npm install：安装项目所需要的全部包，需要配置；package.json文件；
? npm uninstall：卸载指定名称的包；
? npm install 包名：安装指定名称的包，后面可以跟参数"-g"表示全局安装，"--save"表示本地安装；
? npm update：更新指定名称的包；
? npm start：项目启动；
? npm run build：项目构建。
19. 通过methods选项，可以定义Vue实例中的事件处理函数。（）
20. 通过new Vue({})的方式创建Vue实例对象。（）
21. input中的v-model用于在表单控件元素上创建双向数据绑定。（）
22. Windows内置的cmd命令行工具与git-bash完全相同。（）
答案解析：git-bash是git（版本管理器）中提供的一个命令行工具，外观类似于Windows系统内置的cmd命令行工具，但用户体验更友好。
在实际开发中，经常会使用git-bash工具代替cmd。
23. 管道符之前代码执行的结果会传到后面作为参数进行处理。（）
答案解析：管道符之前代码执行的结果会传到后面作为参数进行处理。
在多个参数进行传递时，第一个参数就是前一个方法执行的结果。
24. Vue中的页面结构是由组件构成的，不同组件可以表示不同页面，适合进行单页应用开发。（）
答案解析：在Vue中，组件是构成页面中独立结构单元，能够减少重复代码的编写，提高开发效率，降低代码之间的耦合程度，使项目更易维护和管理。
组件主要以页面结构形式存在，不同组件也具有基本交互功能，根据业务逻辑实现复杂的项目功能。
25. v-show内部指令表示显示隐藏。（）
26. Vue的核心文件有两种版本，其中开发版本和生产版本是完全相同的。（）
27. VS Code提供了插件扩展功能，用户根据需要自行下载安装。（）
28. vue-devtools可以独立于Chrome浏览器单独使用。（）
答案解析：vue-devtools是一款基于Chrome浏览器的扩展，用于调试Vue应用，只需下载官方压缩包，配置Chrome浏览器的扩展程序即可使用。
29. Node.js还提供了交互式环境REPL，类似Chrome浏览器的控制台。（）
30. 在使用vue-devtools调试工具之前，需要将vue-devtools调试工具添加到Chrome浏览器的扩展程序中去。（）
31. Vue中，可以用来绑定行内样式的是v-bind。（）
32. 目前市场三大前端主流框架分别是Angular、React和Vue.js。（）
答案解析：目前市场三大前端主流框架分别是Angular、React和Vue.js。
Vue之所以被开发者青睐，主要是Vue秉承了Angular和React框架两者的优势，并且Vue的代码简洁、上手容易，在市场上也得到大量应用。
33. 定义在methods属性中的方法可以作为页面中的事件处理方法使用，当事件触发后，执行相应的事件处理方法。（）
答案解析：methods属性用来定义方法，通过Vue实例可以直接访问这些方法。
在定义的方法中，this指向Vue实例本身。
定义在methods属性中的方法可以作为页面中的事件处理方法使用，当事件触发后，执行相应的事件处理方法。
34. VS Code编辑器不可以跨平台（支持Mac、Windows以及Linux），使用起来也非常简单。（）
答案解析：不同的开发人员为了工作需要，会选择不同平台来进行项目开发工作，这样就一定程度上限制了编辑器的使用范围。
VS Code编辑器不仅跨平台（支持Mac、Windows以及Linux），使用起来也非常简单。
35. Vue（读音/Vju?/，类似于View）是一套用于构建用户界面的渐进式框架。（）
36. Current是当前发布的最新版本，增加了一些新特性，有利于进行新技术的开发使用。（）
四 填空题，每道小题1分，共21道小题，21分
1. 4.x版本的webpack还需要安装__________脚手架工具才能正常使用。
2. 安装webpack完成后，执行__________命令，查看webpack版本。
3. Vue.component()方法接收的第一个参数是__________。
4. 以下代码
<div id="app">
<p>{{msg}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: { msg: '张三' },
beforeMount () {
console.log(this.$el.innerHTML)
},
})
</script>
执行后结果是__________。
5. __________主要包括内置指令和自定义指令，以"v-"开头，作用于HTML元素。
答案解析：指令主要包括内置指令和自定义指令，以"v-"开头，作用于HTML元素。
指令提供了一些特殊的特性，将指令绑定在元素上时，指令会给绑定的元素添加一些特殊的行为。
例如，v-bind动态绑定指令、v-if条件渲染指令、v-for列表渲染指令等。
6. Vue的数据驱动是通过__________模式来实现的。
答案解析：MVVM主要包含3个部分，分别是Model、View和ViewMode。
Model指的是数据部分，主要负责业务数据；View指的是视图部分，即DOM元素，负责视图的处理。
ViewModel是连接视图与数据的数据模型，负责监听Model或者View的修改。
7. _________样式包括颜色、大小、字体等，可以实现漂亮、布局合理的页面效果。
答案解析：Web前端使用HTML、CSS和JavaScript作为基础语言，它们分别用来实现网页的结构、样式和行为。
其中，CSS样式包括颜色、大小、字体等，实现漂亮、布局合理的页面效果。
8. vue-cli安装完成后，可以执行__________命令，查看安装的版本号。
9. <template>标签中书写HTML代码，然后通过__________值绑定到组件内的template属性上。
10. 局部注册组件的配置对象中，表示组件模板的是__________。
11. Vue实例创建后，如果挂载点__________唯一根标签存在，就进行页面挂载。
12. Vue生命周期函数中，__________函数会在创建实例对象之前执行。
答案解析：beforeCreate：创建实例对象之前执行；
created：创建实例对象之后执行；
beforeMount：页面挂载成功之前执行；
mounted：页面挂载成功之后执行；beforeUpdate：组件更新之前执行；
beforeUpdate：组件更新之前执行；
updated：组件更新之后执行；
beforeDestroy：实例销毁之前执行；
destroyed：实例销毁之后执行
13. Vue实例对象中，通过__________选项定义组件。
14. 当元素绑定的v-if指令的值设置为__________时表示显示元素，否则隐藏元素。
答案解析：v-if指令值为true，表示显示当前组件，否则隐藏当前组件；
15. _________即道具，用来接受父组件中定义的数据，其值为数组。
16. 以下代码
var vm = new Vue({
el: '#app',
data: { msg: '张三' },
created () {
console.log(this.$data.msg)
}
})
执行后结果是__________。
17. Vue提供方法中，可以用来实现全局注册组件的是_____ _____。
答案解析：Vue.component()方法用于全局注册组件，除了全局注册组件外，还可以局部注册组件，通过Vue实例的components属性来实现。
18. __________可以触发父组件中定义的事件，子组件的数据信息通过传递参数的方式完成。
19. Vue实例对象中，通过_____选项表示计算属性。
20. 在实现组件切换时，可以通过__________属性匹配组件的名称实现组件切换。
21. Vue生命周期函数中，__________函数会在创建实例对象完成之后执行。
答案解析：beforeCreate：创建实例对象之前执行；
created：创建实例对象之后执行；
beforeMount：页面挂载成功之前执行；
mounted：页面挂载成功之后执行；beforeUpdate：组件更新之前执行；
beforeUpdate：组件更新之前执行；
updated：组件更新之后执行；
beforeDestroy：实例销毁之前执行；
destroyed：实例销毁之后执行
五 程序填空，共15个空，每空2分，共 30 分
1. 通过在输入框内输入内容在list中查找数据并加以显示。
html内容部分：
<div id="app">
<input type="text" v-model="query" placeholder="请输入要查找的内容">
<transition-group[1]___________="ul" @before-enter="beforeEnter"
@enter="enter" @leave="leave" v-bind:css="false">
<li v-for="(item,index) in resultList" [2]___________ ="item.msg" :data-index="index">
{{item.msg}}
</li>
</transition-group>
</div>
脚本部分：
var vm = new Vue({
el: '#app',
data: {
query: '',
list: [{msg: 'a'}, {msg: 'ab'}, {msg: 'ca'}, {msg: 'd'}]
},
methods: {
beforeEnter(el) {
el.style.opacity = 0
el.style.height = 0
},
enter(el, done) {
var delay = el.dataset.index * 150
setTimeout(function() {
Velocity(el, {
opacity: 1,
height: '1.6em'
}, {
complete: done
})
}, delay)
},
leave(el, done) {
var delay = el.dataset.index * 150
setTimeout(function() {
Velocity(el, {
opacity: 0,
height: 0
}, {
complete: done
})
}, delay)
}
},
[3]_____: {
resultList() {
var key = [4]___________
return this.list.filter(function(item) {
if (item.msg.indexOf(key) != -1) {
return [5]___________
}
})
}
}
})
2. 通过输入框录入学生信息；通过学号删除学生信息。
html内容部分：
<div id="app">
<b-component dstu="addOneStudent" @deletestu="deleteOneStudent"></b-component>
<l-component v-bind:stulist="students"></l-component>
</div>
<template id="buttonComponent">
<div>
<div>
班级： <input type="text" v-model="cname">
学号： <input type="text" v-model="number">
姓名： <input type="text" v-model="name">
<button @click="addStudent">添加</button>
</div>
<div>
学号： <input type="text" v-model="deleteNumber"> <button @click="deleteStudent">删除</button>
</div>
</div>
</template>
<template id="listComponent">
<table border="1" width="30%" style="border-collapse:collapse">
<tr>
<th>班级</th>
<th>学号</th>
<th>姓名</th>
</tr>
<tr v-for="item in stulist">
<td>{{item.cname}}</td>
<td>{{item.number}}</td>
<td>{{item.name}}</td>
</tr>
</table>
</template>
脚本部分：
var bc = {
template: '#buttonComponent',
data() {
return {
cname: '',
number: '',
name: '',
deleteNumber: ''
}
},
methods: {
addStudent() {
this.$emit('[1] ____', {
cname: this.cname,
number: this.number,
name: this.name
})
},
deleteStudent() {
this.$emit('[2] ___ __', this.deleteNumber)
}
}
}
var lc = {
template: '#listComponent',
props: ['[3]_________________'],
}
var vm = new Vue({
el: '#app',
[4] ____________: {
bComponent: bc,
lComponent: lc
},
data: {
stu: {},
students: []
},
methods: {
addOneStudent(one) {
this.students.push(one)
},
deleteOneStudent(dnumber) {
this.students.splice(this.students.findIndex(e => [5]_____________ === dnumber), 1)
}
}
})
3. 输入框内输入1，2，3分别表示石头，剪刀，布；点击pk按钮，电脑自动生成石头，剪刀，布。并判断是用户胜利还是电脑胜利。
html内容部分：
<div id="app">
<div>
<h3>猜拳游戏</h3>
数字1：表示"石头"； 数字2：表示"剪刀"； 数字3：表示"布"；<input v-model="userData">
<div>
用户：{{user}} 电脑：{{computerData}} 胜负：{{success}}
</div>
<div>
<button @ [1]___________="pk">PK</button>
</div>
</div>
</div>
脚本部分：
var vm = new Vue({
el: '#app',
[2] _________ : {
userData: '',
computerData: '',
user: '',
success: ''
},
[3] __________: {
pk() {
switch (parseInt( [4] ___________ )) {
case 1:
this.user = '石头'
break;
case 2:
this.user = '剪刀'
break;
case 3:
this.user = '布'
break;
default:
this.user = '无效'
break;
}
var c = Math.floor(Math.random() * 3) + 1;
switch (c) {
case 1:
this.computerData = '石头'
break;
case 2:
this.computerData = '剪刀'
break;
case 3:
this.computerData = '布'
break;
default:
this.computerData = '无效'
break;
}
if (this.user != "无效") {
if (this.userData == c) {
this.success = '平局'
} else if (this.userData - c == [5]___________ || this.userData - c == 2) {
this.success = '用户胜利'
} else {
this.success = '电脑胜利'
}
} else {
this.success = '无效'
}
}
}
})
一 单选题，每道小题1分，共7道小题，7分
1. 下面选项中，用来访问子组件实例的是（）。
A vm.$children
B vm.$props
C vm.$slots
D vm.$attrs
答案解析：vm.$children用来获取当前实例的直接子组件。
需要注意的是，$children并不保证顺序，也不是响应式的。
2. 下面选项中，用于向响应式对象中动态添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新的是（）。
A ue.extends
B Vue.use
C Vue.extend
D Vue.set
3. 下面选项中，能够实现自定义指令的是（）。
A Vue.use()
B Vue.set()
C Vue.component()
D Vue.directive()
答案解析：Vue中有很多内置指令，如v-model、v-for和v-bind等。
除了内部内置指令，开发人员也可以根据需求使用Vue.directive注册自定义指令。
4. 下面选项中，用来访问vm实例使用的根DOM元素的是（）。
A vm.$el
B vm.$props
C vm.$slots
D vm.$attrs
答案解析：vm.$el用来访问vm实例使用的根DOM元素；
5. Vue全局配置对象config中用于控制生产信息的显示和隐藏的是（）。
A devtools
B productionTip
C tip
D silent
答案解析：通过Vue的全局配置productionTip可以控制生产信息的显示或隐藏；
6. 下面选项中，能够实现在Vue中安装插件的是（）。
A Vue.use()
B Vue.set()
C Vue.component()
D Vue.directive()
答案解析：Vue.use主要用于在Vue中安装插件，通过插件可以为Vue添加全局功能。
7. 下面选项中，用来获取用户自定义选项的是（）。
A vm.$data
B vm.$props
C vm.$attrs
D vm.$options
二 多选题，每道小题2分，共3道小题，6分
1. 下面选项中，vm.$attrs获取的属性不包括的是（）。
A class
B style
C props
D id
答案解析：vm.$attrs可以获取组件的属性，但其获取的属性中不包含class、style以及被声明为props的属性。
2. 下面选项中，说法正确的是（）。
A vm.$children用来获取当前组件的子组件
B vm.$root用来获取根实例对象
C vm.$slots用来获取初始数据
D vm.$attrs用来获取自定义属性
答案解析：vm.$root用来获取当前组件树的根Vue实例，如果当前实例没有父实例，则获取到的是该实例本身
3. 下面选项中，关于vm.$options说法错误的是（）。
A 自定义选项的值可以是数组，对象，函数等
B data中的数据也可以通过vm.options获取到
C 通过vm.options也可以获取到自定义选项
D vm.$options中的"$"符号可以使用"@"替换
答案解析：Vue实例初始化时，除了传入指定的选项外，还可以传入自定义选项。
自定义选项的值可以是数组、对象、函数等，通过vm.$options来获取。
三 判断题，每道小题1分，共12道小题，12分
1. 设置Vue的全局配置对象的productionTip的值为false会隐藏"生产信息"的提示。（）
2. 通过Vue全局配置中的devtools可以对该工具启用和停止。（）
3. vm.$root获取根Vue实例时，如果当前实例没有父实例，则获取到的是该实例本身。（）
4. 自定义选项与data数据一样都具有响应式属性。（）
答案解析：自定义数据，与data不同的是，它不具有响应特性；
5. Vue的核心具有一套响应式系统，简单来说就是通过监听器监听数据层的数据变化。（）
正确答案：对
6. vm.$attrs可以获取的属性中也包含class、style以及被声明为props的属性。（）
正确答案：错
答案解析：vm.$attrs可以获取的id属性
7. mixins是一种分发Vue组件中可复用功能的方式。（）
正确答案：对
答案解析：mixins是一种分发Vue组件中可复用功能的方式。
mixins对象可以包含任何组件选项，当组件使用mixins时，将定义的mixins对象引入组件中即可使用，mixins中的所有选项将会混入到组件自己的选项中。
8. Vue.extend有一个options参数，表示包含组件选项的对象。（）
正确答案：对
9. 插件可以是一个对象或函数，如果是对象，必须提供install()方法，用来安装插件。（）
正确答案：对
10. vm.$children并不保证顺序，也不是响应式的。（）
正确答案：对
11. Vue全局配置对象中，silent可以取消Vue日志和警告，值类型为boolean。（）
正确答案：对
答案解析：Vue全局配置对象中，silent可以取消Vue日志和警告，值类型为boolean；
默认值为false，设为true表示忽略警告和日志，否则不忽略。
12. 通过vm.$el获取到的DOM对象后，通过innerHTML属性可以修改元素内容。（）
正确答案：对
四 填空题，每道小题1分，共11道小题，11分
1. 以下代码
<div id="app">
<parent name="vm.$children"/>
</div>
<script>
Vue.component('parent',{
template:'<div></div>',
props:['name'],
})
var vm = new Vue({
el:'#app',
})
console.log(vm.$children[0].$props.name)
</script>执行后结果是__________。
正确答案：vm.$children
2. Vue全局配置对象是__________。
正确答案：Vue.config
答案解析：Vue提供了全局配置对象Vue.config，通过配置可以实现生产信息提示、警告忽略等人性化处理。
3. 设置Vue全局配置对象devtools值为____true______表示允许使用vue-devtools进行调试。
正确答案：true
4. <input>标签通过__________指令实现双向数据绑定。
正确答案：v-model
5. 以下代码
var mixin = {
data () {
return { message: 'hello' }
}
}
var vm = new Vue({
mixins: [mixin],
data () {
return { message: 'goodbye' }
},
created () {
console.log(this.$data.message)
}
});执行后结果是__________。
6. Vue全局配置对象中的silent值设置为__________表示忽略警告和日志。
答案解析：Vue全局配置对象中，silent可以取消Vue日志和警告，值类型为boolean；
默认值为false，设为true表示忽略警告和日志，否则不忽略。
7. 以下代码
<div id="app">
<parent name="vm.$props"/>
</div>
<script>
Vue.component('parent',{
template:'<div></div>',
props:['name'],
created(){
console.log(this.$props.name)
}
})
var vm = new Vue({
el:'#app',
})
</script>执行后结果是__________。
8. 以下代码
var vm = new Vue({
el: '#app',
data: {
obj: {}
}
})
Vue.set(vm.obj, 'b', '我是Vue.set添加的响应式属性obj.b');
console.log(vm.$data.obj.b);执行后的结果是__________。
9. 以下代码
var vm = new Vue({
el: '#app',
customOption: '我是自定义数据',
data: {
base: '我是基础数据'
},
created () {
console.log(this.$options.customOption)
}
});执行后的结果是__________。
10. Vue插件安装，需要调用__________方法实现。
答案解析：Vue.use主要用于在Vue中安装插件，通过插件可以为Vue添加全局功能；
插件可以是一个对象或函数，如果是对象，必须提供install()方法，用来安装插件；
如果是一个函数，则该函数将被当成install()方法；
11. 以下代码
<div id="app">
<my-component id="test"></my-component>
</div>
<script>
Vue.component('my-component', {
template: '<button @click="showAttrs">查看属性</button>',
methods: {
showAttrs () {
console.log(this.$attrs.id)
}
}
})
var vm = new Vue({ el: '#app' });
</script>
单击页面"查看属性"按钮，执行后结果是________。
一 单选题，每道小题1分，共9道小题，9分
1. 下面选项中，可以通过transition组件的钩子函数实现动画的是（）。
A v-enter
B v-enter-active
C enter-class
D @before-enter
2. 下面选项中，可以实现不同标签名的过渡效果的是（）。
A v-show 和v-hidden
B v-else 和v-show
C v-show 和v-if
D v-if 和v-else
3. 下面选项中，可以通过百分比的形式来规定动画的状态的是（）。
A v-enter-to
B CSS
C animate
D @keyframes
4. 下面选项中，属于JavaScript动画库的是（）。
A vue.js
B Velocity.js
C animate.css
D react.js
5. 下面选项中，用来实现<transition>组件过渡模式切换的是（）。
A pattern
B mode
C change
D type
6. 下面选项中，能够判断字符串中是否存在某一字符的是（）。
A inof
B indexOf
C index
D ndexOf
7. 下面选项中，相同标签名元素的过渡需要为元素定义的属性是（）。
A class
B key
C id
D name
8. Vue提供了内置的过渡封装组件是（）。
A transition
B Velocity
C animate
D group
9. 下面选项中，可以实现列表排序平滑过渡的是（）。
A v-mode
B v-move
C v-enter
D v-leave
二 多选题，每道小题2分，共2道小题，4分
1. 下面选项中，可以用来创建可复用组件过渡的组件模板结构的是（）。
A <transition>
B <transition-group>
C <model>
D <component>
2. 下面选项中，属于<transition>组件自定义类名属性的是（）。
A enter-active-class
B enter-to-class
C leave-class
D enter-class
三 判断题，每道小题1分，共11道小题，11分
1. 多个组件之间的过渡，不需要使用key特性，只需要使用动态组件即可。（）
2. 相同标签名元素只有通过v-if和v-else就可以实现元素的过渡效果。（）
通过设置不同key属性值
3. 在进行列表过渡时，过渡模式不可用，因为不再互相切换特有的元素。（）
4. Velocity.js支持链式动画，当一个元素连续应用多个velocity()时，动画以列队的方式执行。（）
5. Vue使用了FLIP简单动画队列来实现排序过渡，所以即使没有插入或者移除元素，对于元素顺序的变化也支持过渡动画。（）
6. 使用@keyframes规则创建动画，就是将一套CSS样式逐步演变成另一套样式，在创建动画过程
7. 在Vue中还可以实现列表的交错过渡效果，它是通过data属性与JavaScript通信来实现的。（）
8. 不同标签名元素必须绑定key值才能通过v-if和v-else实现元素的过渡效果。（）
9. 钩子函数可以结合CSS过渡（transitions）、动画（animations）使用，还可以单独使用。（）
10. 自定义类名的优先级高于普通类名。（）
11. 列表进入和离开的过渡可以通过name属性来自定义前缀。（）
四 填空题，每道小题1分，共10道小题，10分
1. 列表结构中的每一项，必须定义__________的值来作为唯一标识，否则将没有过渡效果。
2. <transition>组件中的mode模式值为__________时，表示当前元素先进行过渡，完成之后新元素过渡进入。
3. 元素上使用v-bind绑定的data-index属性，可以用______ dataset.index ____方式来获取index值。
4. 以下代码
<div id="app">
<transition name="fade">
<button v-bind:key="isEditing">
{{isEditing ? '保存' : '编辑'}}
</button>
</transition>
</div>
<script>
var vm = new Vue({ el: '#app', data: { isEditing: true } })
</script> 在浏览器中执行后，页面中展示的结果是__________。
正确答案：保存
5. transition组件中的钩子函数________表示在动画入场过程中触发。
6. __________是一种无状态（没有响应式数据）、无实例（没有this上下文）的组件。
7. 在列表过渡中，其<transition-group>标签上的__________属性，可以用来自定义标签名。
8. transition组件的动画类名中表示进入过渡生效时的状态，作用于整个过程的是_________。
9. 引入Velocity.js动画库之后，调用了Velocity()函数，该函数的第1个参数是__________。
10. Vue中通过__________指令控制元素显示隐藏。
一 单选题，每道小题1分，共4道小题，4分
1. 下列选项中，不属于CSS预处理器的是（）。
A Less
B Sass/SCSS
C scoped
D Stylus
2. 下列选项中，关于router.push()方法说法错误的是（）。
A 该方式的参数可以是一个字符串路径
B 这个方法不会向history栈添加记录
C 在参数对象中，如果提供了path，params会被忽略
D 该方法的参数可以是一个描述路径的对象
3. 一个单独的组件文件通常应包含哪几部分代码（）。
A <style>样式
B <template>模板
C <script>逻辑
D 以上全部
4. 在Vue项目中，可以使用以下（）命令初始化项目。
A npm run -y
B npm install -y
C npm init run -y
D npm init -y
二 多选题，每道小题2分，共5道小题，10分
1. 下列选项中，关于单独的组件文件说法正确的是（）。
A <style>可以省略
B <script>不能省略
C <template>不能省略
D <template>可以省略
2. 下列选项中，关于CSS预处理器说法正确的是（）。
A 无需考虑浏览器的兼容性问题
B 可以使CSS更加简洁
C 适用性和可读性最佳
D 更易于代码的维护
3. 下列选项中，关于router.go()方法说法正确的是（）。
A 表示在history历史记录中向前或者后退多少步
B $router.go()相当于window.history.go()
C $router.go(-1)表示后退一步
D $router.go(1)表示前进一步
4. 下列选项中，关于子路由children属性说法错误的是（）。
A 使用children属性实现子路由时，子路由的path属性前不要带"/"
B children也是一组路由
C 子组件没有路由导航和路由容器
D 每一个子路由里面只能嵌套一个组件
5. 下列选项中，属于路由对象$route的常用属性的是（）。
A paths
B hash
C params
D name
三 判断题，每道小题1分，共12道小题，12分
1. <router-link>标签主要实现跳转链接功能，属性 to='/'即是跳转到 path 为'/'的路径。（）
2. webpack打包工具，可以实现自动打包编译功能。（）
3. params方式传参，通常会搭配路由的history模式，将参数放在路径中或隐藏。（）
4. 存放在query对象中的参数值，在模板中可以使用插值表达式{{this.$route.querys.x}}输出x的值。（）
5. 如果<router-view>没有设置名字，那么默认渲染default对应的组件。（）
6. router.beforeEach()是全局钩子函数。（）
7. 单击"<route-link :to="...">"等同于调用router.push(...)方法。（）
8. 路由配置对象必须包含path和components属性。（）
9. 当使用对象作为路由的时候，to前面要加一个冒号，表示绑定。（）
10. 后端路由通过用户请求的URL分发到具体的处理程序，浏览器每次跳转到不同的URL，都会重新访问服务器。（）
11. 命名路由方式，无论path多长、多繁琐，都能直接通过name来引用，十分方便。（）
12. 通过query方式传递参数，类似于GET请求，在页面跳转的时候，可以在地址栏看到请求参数。（）
四 填空题，每道小题1分，共13道小题，13分
1. __________标签给子模板提供插入位置，充当占位符。
2. 在<style>标签上设置__________属性，表示CSS样式只能作用于当前的组件。
3. 在__________组件上定义name属性表示视图的名字，然后就可以根据不同的name值展示不同的页面。
4. 在路由对象的routes配置路由匹配规则时，path属性中需要使用__________的形式匹配参数。
5. __________属性，表示当前路由的名称。
6. 嵌套子路由的关键属性是__________，该属性也是一组路由，可以配置路由数组。
7. __________是由DCloud推出的一款接近原生APP体验的高性能前端框架。
8. 简而言之，__________就是在路由里面嵌套它的子路由。
9. 程序开发中的路由分为后端路由和__________。
10. 执行__________方法后，导航后不会向history栈添加新的记录，而是替换当前的history记录。
11. 通过_________命令安装路由。
12. __________表示当前激活的路由的状态信息，包含了当前URL解析得到的信息，还有URL匹配到的路由记录。
正确答案：路由对象
13. 使用_________方式传参，参数会以查询字符串的形式显示在浏览器地址栏中
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
3
0- 0
已为社区贡献2条内容
所有评论(0)