- Vue基础入门
一、填空题
Vue是一套构建__用户界面_____的渐进式框架。
MVVM主要包含3个部分，分别是Model、View和____ViewModel___。
Vue中通过___refs____属性获取相应DOM元素。
在进行Vue调试时，通常使用___vue-devtools___工具来完成项目开发。
Vue中页面结构以___组件 ___形式存在。
二、判断题
Vue与Angular和React框架不同的是，Vue设计为自下而上逐层应用。（T ）
Vue完全能够为复杂的单页应用提供驱动。（T ）
Vue是一套构建用户界面的渐进式框架，Vue的核心只关注视图层。（T ）
Vue中MVVM框架主要包含3部分组成：Model、View和ViewModle。（ T）
Vue可以在Node环境下进行开发，并借助npm包管理器来安装依赖。（T ）
三、选择题
- 下列关于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.VS Code编辑器
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优势有那些。
请简单介绍Vue、React之间的区别。
五、编程题
请使用Vue.js动手创建一个登录页面。
请手动配置Vue.js开发环境。
- Vue开发基础（上）
一、填空题
- Vue实例对象通过___new____方式来创建。
- Vue初始数据在实例对象的___data____参数中进行定义。
- Vue实例对象中el参数表示___唯一根标签 ____。
- Vue中实现双向数据绑定的指令是___v-model____。
- Vue事件绑定指令是___v-on____。
二、判断题
- 在项目中引入了vue.js文件，才可以创建Vue实例。（T ）
- Vue实例对象指令主要包括自定义指令和内置指令，通过指令省去DOM操作。（ T）
- 事件传递方式有冒泡和捕获，默认是冒泡。（T ）
- Vue开发提出了组件化开发思想，每个组件都是一个孤立的单元。（T ）
- 在Vue中beforeDestroy与destroyed生命周期函数执行后，都可以获取到Vue实例。（T ）
三、选择题
- 下列关于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 ）。
l A.v-bind
l B.v-for
l C.v-model
l D.v-if
- 在Vue中，能够实现页面单击事件绑定的代码是（B ）。
A.v-on:enter
B.v-on:click
C.v-on:mouseenter
D.v-on:doubleclick
- 下面列出的钩子函数会在Vue实例销毁完成时执行的是（ B）。
A.updated
B.destroyed
C.created
D.mounted
四、简答题
- 请简述什么是Vue实例对象。
- 请简述什么是Vue组件化开发。
- 请简单介绍Vue数据绑定内置指令主要内容有哪些。
五、编程题
- 请实现一个比较两个数字大小的页面。
- 请实现一个简单的网页计算器。
- Vue开发基础（下）
一、填空题
- Vue实例对象通过___vm.$root____方式来获取。
- Vue初始数据通过___vm.$data___方式获取。
- Vue中通过___vm.$children____获取当前实例的子组件。
- Vue中创建插件提供的方法是___install____。
- Vue中通过___Vue.directive()____创建自定义指令。
二、判断题
- Vue提供的全局API接口component()，不能用来注册组件。（F ）
Vue 提供的全局 API 接口 component() 是用于注册组件的。
- Vue中Vue.config对象用来实现Vue全局配置。（T ）
- Vue中data选项中的数据具有响应特性。（T ）
- Vue中，可以通过vm.$slots获取子组件实例对象。（F ）
在 Vue 中，vm.$slots 并不是用来获取子组件实例对象的。vm.$slots 是一个对象，用于访问父组件传递给子组件的插槽内容。
- Vue实例对象中通过$options可以获取到父作用域下的所有属性。（ F）
$options 属性是一个对象，包含了 Vue 实例的初始化选项。它是在创建 Vue 实例时从组件选项中生成的，并且包含了组件的数据、计算属性、方法等。但是它并不包含父作用域中的属性。
要访问父作用域中的属性，可以使用 Vue 提供的 props 选项来声明父组件向子组件传递的属性，然后在子组件内部使用 this.$props 来访问这些属性。
三、选择题
- 下列关于Vue实例对象接口说法，错误的是（D ）。
A.Vue实例对象提供了实例可操作方法
B.Vue实例对象$data数据可以由实例vm委托代理
C.通过Vue实例对象可以进行Vue全局配置
D.Vue实例对象接口同样可以通过Vue方式调用
Vue 实例对象并没有 "接口" 这个特定的概念。
- 下面关于Vue全局配置说法，错误的是（CD ）。
A.Vue.config.devtools可以设置devtools调试工具的启用和关闭
B.Vue.config是一个对象，包含Vue的全局配置
C.Vue.component()可以获取Vue全局配置对象
Vue.component() 是用于注册全局组件的方法，但它并不是通过 Vue 的全局配置对象调用的。实际上，Vue 的全局配置对象是通过 Vue.config 来访问的，它包含了一些全局配置选项，如 silent、optionMergeStrategies 等。
D.Vue.set.config可以获取到全局配置对象
- 下列不属于Vue实例对象属性的是（B ）。
l A.$data
l B.$component
l C.$props
l D.$root
解释：
A. $data：Vue 实例对象的 $data 属性用于访问实例的数据对象。
B. $component：在 Vue 实例对象中，并没有 $component 这个属性。
C. $props：Vue 实例对象的 $props 属性用于访问父组件传递给子组件的属性。
D. $root：Vue 实例对象的 $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不可以用来注入自定义选项的处理逻辑
D. 错误。Vue.mixin 可以用来注入自定义选项的处理逻辑。你可以在混入对象中定义自己的选项和逻辑，然后通过 Vue.mixin 将它们注入到组件中。
四、简答题
- 请简述什么是Vue插件。
- 请简述Vue全局API接口主要内容。
- 请简单介绍Vue实例对象属性和方法。
五、编程题
- 请使用插槽vm.$slots动手实现一个导航栏结构。
- 请创建一个自定义插件，实现一个登录页面。
- Vue过渡和动画
一、填空题
- Vue提供了内置的过渡封装组件是 transition 。
- 在过渡封装组件中使用 name 属性可以重置过渡中切换类名的前缀。
- 通过 appear 特性设置节点在初始渲染的过渡。
- 在离开的过渡中有 v-leave 、 v-leave-to 、 v-leave-active 3个class切换。
- 自定义过渡 的类名优先级要高于普通的类名。
二、判断题
- 函数式组件中的render()函数用来创建组件模板。（T）
- 给过渡元素添加v-bind:css="true"，Vue会跳过CSS的检测。（F）
Vue 中，v-bind:css 或简写形式 :css 并不是用来跳过 CSS 检测的选项。
实际上，Vue 的过渡系统通过添加 CSS 类名来触发过渡效果。当元素进入或离开过渡时，Vue 会根据添加或移除的 CSS 类名来应用相应的过渡效果。
- 在@before-enter阶段可以设置元素开始动画之前的起始样式。（T）
- 在使用animate.css库时，基本的class样式名是animate。（F）
- enter和leave动画钩子函数，除el参数外还会传入一个done作为参数。（T）
三、选择题
- 下列选项中关于动画钩子函数说法正确的是（C）。
A. @leave-cancelled函数只能用于v-if中
B. 对于@enter来说，当与CSS结合使用时，回调函数done是必选的
C. done作为参数，作用就是告知Vue动画结束
D. 钩子函数需要结合CSS transitions或animations 使用，不能单独使用
A. @leave-cancelled 函数不仅可以在 v-if 中使用，也可以在其他支持动画的地方使用，例如 v-show、transition 组件等。
B. 对于 @enter 钩子函数，在与 CSS 结合使用时，回调函数 done 是可选的。done 函数用于通知 Vue 动画进入阶段已完成，如果没有提供 done 函数，Vue 会根据过渡的 CSS 动画或过渡的持续时间自动完成过渡。
C. 正确。done 函数作为参数传递给动画钩子函数，用于告知 Vue 动画已经结束。通过调用 done 函数，可以在动画完成后执行其他操作或处理逻辑。
D. 错误。动画钩子函数可以与 CSS transitions 或 animations 结合使用，但并不是必须的。你可以使用动画钩子函数来执行自定义的过渡逻辑，不依赖于 CSS transitions 或 animations。
- 下列关于Vue为<transition>标签提供的过渡类名的说法，错误的是（D）。
A. v-enter在元素被插入之前生效，在元素被插入之后的下一帧移除
B. v-leave在离开过渡被触发时立刻生效，下一帧被移除
C. v-enter-active可以控制进入过渡的不同的缓和曲线
D. 如果name属性为my-name，那么my-就是在过渡中切换的类名的前缀
- 下列选项中关于多个元素过渡的说法，错误的是（D）。
l A. 当有相同标签名的元素切换时，需要通过key特性设置唯一的值来标记以让Vue区分它们
l B. 不相同元素之间可以使用v-if和v-else来进行过渡
l C. <transition>组件的默认行为指定进入和离开同时发生
l D. 不可以给同一个元素的key特性设置不同的状态来代替v-if和v-else
四、简答题
- 请简述JavaScript钩子函数包括哪些。
- 请简述6个内置的过渡类名。
- 请简述自定义过渡类名的属性有哪些。
五、编程题
- 编写一个登录页面，使用Tab栏实现“账号登录”和“二维码登录”这两种方式的切换，并通过transition组件结合animate.css实现切换时的动画效果。
- 实现单击一个按钮后，切换盒子的展开和收起状态。
- Vue路由
一、填空题
- 在项目中可以通过npm命令 npm install vue-router 安装路由vue-router。
- 使用 路由对象 获取当前激活的路由的状态信息。
- 通过一个名称来标识一个路由的方式叫作 命名路由 。
- 在业务逻辑代码中实现导航跳转的方式称为 编程式导航 。
- 单页面应用主要通过URL中的 hash(#) 实现不同组件之间的切换。
二、判断题
- 后端路由通过用户请求的URL导航到具体的html页面。（T）
- 开发环境下，使用import VueRouter from 'vueRouter'来导入路由。（F）
import VueRouter from 'vue-router';
- 嵌套路由的使用，主要是由页面结构来决定的。（T）
- params方式传参类似于GET请求。（F）
params 方式传参是在路由中传递参数的一种方式，但它并不类似于 GET 请求。
在 Vue Router 中，我们可以通过路由的 params 字段来传递参数。这种方式将参数直接包含在 URL 中
- 在单页面应用中更新视图可以不用重新请求页面。（T）
三、选择题
- 下列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）。
l A. 在目标页面中也可以使用“$route.params.参数名”来获取参数
l B. 在页面跳转的时候，不能在地址栏看到请求参数
l C. params方式传递的参数会在地址栏展示
l D. 在目标页面中使用“this.$route.params.参数名”来获取参数
关于 query 方式传参：
A. 正确。query 方式传递的参数会在地址栏展示，参数会以键值对的形式追加在 URL 的查询字符串中，例如：/target-page?param1=value1¶m2=value2。
B. 正确。在页面跳转的时候，可以在地址栏中看到请求参数，因为参数会以查询字符串的形式显示在 URL 中。
C. 错误。在目标页面中获取 query 参数的正确方式是使用 $route.query.参数名，而不是 this.route.query.参数名。正确的使用方式应该是 this.$route.query.参数名。
D. 错误。this.$route.params.参数名 是用于获取路由参数（params）的方式，而不是获取 query 参数。
关于 params 方式传参：
A. 正确。在目标页面中也可以使用 $route.params.参数名 来获取路由参数。
B. 正确。在页面跳转的时候，不能在地址栏中看到 params 参数，因为它们不会显示在 URL 中。
C. 错误。params 方式传递的参数不会在地址栏展示，不会直接显示在 URL 中。
D. 正确。在目标页面中使用 this.$route.params.参数名 来获取路由参数是正确的用法。
总结：
query 方式传参会在地址栏展示参数，使用 $route.query.参数名 来获取参数；而 params 方式传参不会在地址栏展示参数，使用 $route.params.参数名 来获取参数。
四、简答题
- 请简述npm方式安装vue-router的步骤。
- 请简述vue-router路由的作用。
- 请简单列举并说明路由对象包括哪些属性。
五、编程题
请使用Vue路由相关知识动手实现Tab栏切换案例，要求如下。
- 创建一个components/Message.vue组件，用来展示页面内容。
- 创建3个子路由，分别是“待付款”“待发货”“待收货”页面，在每个子路由页面单独写出相应的内容，页面效果如下图所示。
- Vuex状态管理
一、填空题
- Vuex实例对象通过____vm.$store___方式来获取。
- Vuex实例对象中初始数据状态通过___vm.$store.state___方式获取。
- Vuex实例对象中组件状态通过___vm.$store.commit()____方式改变。
- Vuex中创建动态模块提供的方法是___store.registerModule()____。
- Vuex中通过___vm.$store.dispatch()____实现actions状态分发。
二、判断题
- Vuex实例对象可以调用Vue全局接口。（F ）
- Vuex中Vue.config对象用来实现Vuex全局配置。（F ）
Vue.config 对象并不用于实现 Vuex 的全局配置。Vue.config 是 Vue.js 的全局配置对象，用于配置 Vue 实例的全局行为
- Vuex中state选项中数据是初始数据状态。（ T）
- Vuex中插槽可以实现组件任意嵌套，且在版本2.2.6+以后开始支持。（F ）
插槽（Slots）并不是 Vuex 的功能之一，而是 Vue.js 组件系统的一项特性。
插槽（Slots）是用于在组件中定义可扩展的内容区域，允许我们在组件中嵌套其他组件或者插入内容。它提供了一种组件之间通信和组合的方式，但与 Vuex 并无直接关联。
Axious
- 当在Vuex实例对象中调用store时，一定会获取到store实例对象。（T ）
三、选择题
- 下列关于Vuex实例对象接口的说法，错误的是（B ）。
A.Vuex实例对象提供了store实例对象可操作方法
B.Vuex实例对象$data数据可以由实例委托代理
Vuex 实例对象 $data 数据不可以由实例委托代理。在 Vuex 中，$data 并不是 Vuex 实例的一个属性或方法。Vuex 实例对象提供了 store 实例对象可操作方法，用于管理和操作状态数据。
C.通过Vuex实例对象实现组件状态的管理维护
D.Vuex实例对象初始数据是state数据
- 下面关于Vuex核心模块说法，错误的是（B ）。
A.Vuex配置对象中，actions选项是异步的
B.Vuex.config对象是全局配置对象
Vuex.config 对象不是全局配置对象。在 Vuex 中，并没有名为 Vuex.config 的全局配置对象。在 Vuex 的配置对象中，actions 选项是用于定义异步操作的方法，mutations 选项是用于定义同步操作的方法。通过 commit 完成 mutations 的提交。
C.Vuex配置对象中，mutations选项是同步的
D.通过commit完成mutations提交
- 下列不属于Vuex.Store配置对象接收参数的是（ A）。
l A.data B.state C.mutations D.getters
data 不是 Vuex.Store 配置对象接收的参数。在 Vuex.Store 配置对象中，可以接收的参数有 state、mutations、actions、getters 等。
- Vuex实例对象中类似于computed计算属性功能的选项是（D ）。
- state B.mutations C.actions D.getters
getters 是类似于 computed 计算属性功能的选项。在 Vuex 的配置对象中，可以定义 getters，用于派生出一些基于状态的计算属性。
- 下面对于Vuex中actions说法，不正确的是（ ABD）。
A.actions中事件函数通过commit完成分发
B.acitons中事件处理函数接收context对象
C.actions与Vue实例中的methods是类似的
D.可以用来注入自定义选项的处理逻辑
A. actions 中的事件函数不是通过 commit 完成分发，而是通过 dispatch 来触发。commit 用于触发 mutations。
B. actions 中的事件处理函数接收的参数是一个 context 对象，可以通过该对象调用 commit、dispatch、getters 等方法。
C. actions 与 Vue 实例中的 methods 是类似的，都用于定义方法和处理逻辑。
D. actions 不能用于注入自定义选项的处理逻辑，而是用于定义异步操作的方法。
四、简答题
- 请简要分析Vuex的设计思想。
- 简述Vuex配置对象中的主要内容有哪些。
- 简述Vuex中的actions的含义。
五、编程题
请编程实现列表的增、删、改、查操作。
- Vue开发环境
一、填空题
- 对于CLI类型的插件，需要以 @vue 为前缀。
- 使用npm包通过 npm install –g @vue/cli 命令全局安装@vue/cli 3.x。
- 使用 vue -version(vue –V) 来查看vue的版本号。
- 使用yarn包通过 yarn global add @vue/cli 命令全局安装@vue/cli 3.x。
- 在 Vue CLI 3中使用 vue create 项目名 命令来创建一个Vue项目。
二、判断题
- 卸载vue-cli的命令是npm uninstall vue-cli -g。（T）
- 添加CLI插件的命令是vue add vue-eslint。（F）
正确的命令是 vue add eslint。
- 插件不能修改webpack的内部配置，但是可以向 vue-cli-service 注入命令。（F）
插件不能修改 webpack 的内部配置，并且也不能直接向 vue-cli-service 注入命令。插件可以通过修改或扩展配置来影响这些命令的行为，但无法直接注入新的命令。
- Vue CLI通过vue ui命令来创建图形用户界面。（T）
- 在文件中用“key=value”（键值对）的方式来设置环境变量。（T）
三、选择题
- 下列选项中说法正确的是（B）。
A. 新版的Vue CLI的包名称为vue-cli
B. 执行npm uninstall vue-cli -g命令可以全局删除vue-cli包
C. 使用yarn install add @vue/cli命令可以全局安装@vue/cli工具
D. 通过vue add ui命令来创建图形用户界面
A. 新版的 Vue CLI 的包名称为 @vue/cli，不是 vue-cli。
C. 使用 yarn install add @vue/cli 命令是错误的，正确的命令是 yarn global add @vue/cli 或 npm install -g @vue/cli，用于全局安装 Vue CLI 工具。
D. 通过 vue add ui 命令无法创建图形用户界面，正确的命令是 vue ui，用于启动 Vue UI，通过图形界面来管理和运行项目。
- 关于CLI服务，下列选项说法错误的是（C）。
A. 在@vue/cli-service中安装了一个名为vue-cli-service的命令
B. vue.config.js是一个可选的配置文件
C. 通过npx vue-cli-service helps查看所有的可用命令
C. 通过 npx vue-cli-service helps 命令是错误的，正确的命令是 npx vue-cli-service help，用于查看可用命令的帮助信息。
D. 通过vue ui使用GUI图形用户界面来运行更多的特性脚本
- 下列选项中说法正确的是（AD）。
l A. 使用相对路径引入的静态资源文件，会被webpack处理解析为模块依赖
l B. 放在public文件夹下的资源将会经过webpack的处理
l C. 通过绝对路径被引用的资源将会经过webpack的处理
l D. URL以~开始，会被认为是模块请求
B. 放在 public 文件夹下的资源文件不会经过 webpack 的处理，而是直接被复制到输出目录。
C. 通过绝对路径引用的资源文件不会经过 webpack 的处理，而是被视为普通的静态资源。
四、简答题
- 简述如何安装Vue CLI 3.x版本的脚手架。
- 简述如何在现有项目中安装CLI插件和第三方插件。
- 简单介绍CLI服务vue-cli-service <command>中的command命令包括哪些。
五、编程题
- 简单描述Vue CLI 3安装的过程。
- 简单描述使用Vue CLI 3创建项目的步骤。
- 服务器端渲染
一、填空题
- webpack-hot-middleware 插件可以用来进行页面的热重载。
- hash模式路由，地址栏URL中会自带 # 符号。
- SSR的路由需要采用 history 的方式。
- SEO 是利用搜索引擎规则，提高网站在搜索引擎内自然排名的一种技术。
- Vue中使用服务器端渲染，需要借助Vue的扩展工具 vue-sever-render 。
二、判断题
- 客户端渲染，即传统的单页面应用模式。（T）
- webpack-dev-middleware中间件对更改的文件进行监控。（T）
- 服务端渲染不利于SEO。（F）
服务端渲染指的是在服务器端生成完整的 HTML 页面，并将其发送给客户端。相比于传统的客户端渲染（Client-Side Rendering，CSR），服务端渲染能够提供更好的 SEO 支持
- 服务器渲染应用程序，需要处于Node.js server运行环境。（T）
- 使用git-bash命令行工具，输入指令mkdirs vue-ssr创建项目。（F）。
mkdir vue-ssr
三、选择题
- 下列选项中说法正确的是（A）。
A. vue-server-renderer的版本要与Vue版本相匹配
B. 客户端渲染，需要使用entry-server.js和entry-client.js两个入口文件
在客户端渲染中，需要使用两个入口文件：entry-server.js 用于服务器端渲染，entry-client.js 用于客户端渲染。
C.App.js是应用程序的入口，它对应vue-cli创建的项目的app.js文件
app.js 不是应用程序的入口，它对应的是 vue-cli 创建的项目的入口文件，通常是 main.js
- 客户端应用程序既可以运行在浏览器上，又可以运行在服务器上
客户端应用程序通常是指在浏览器上运行的前端应用，而服务器端应用程序是指在服务器上运行的后端应用。它们有不同的运行环境和目的。
- 下列关于SSR路由说法，错误的是（A）。
- SSR的路由需要采用history的方式
SSR 的路由可以采用 history 的方式，也可以采用 hash 的方式。具体的选择取决于项目需求和技术栈的选择。
B. history模式的路由提交不到服务器上
C. history模式完成URL跳转而无须重新加载页面
D. hash模式路由，地址栏URL中hash改变不会重新加载页面
- 下列关于Nuxt.js的说法，错误的是（D）。
l A. 使用“create-nuxt-app 项目名”命令创建项目
l B. 使用Nuxt.js搭建的项目中，pages目录是用来存放应用的路由及视图
l C. 在Nuxt.js项目中，声明式路由在html标签中通过<nuxt-link>完成路由跳转
l D. Nuxt.js项目中需要根据目录结构手动完成对应的路由配置
Nuxt.js 采用约定优于配置的方式，根据文件的目录结构自动生成路由配置，无需手动完成对应的路由配置。这样可以简化开发流程并提高开发效率。
四、简答题
- 请简述什么是服务器端渲染。
- 请简述服务器端渲染的代码逻辑和处理步骤。
- 请简述Nuxt.js中，声明式路由和编程式路由的区别。
五、编程题
基于Nuxt.js开发一个Vue程序，实现登录和注册切换。
