一 单选题，每道小题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. 使用_________方式传参，参数会以查询字符串的形式显示在浏览器地址栏中