《Vue.js前端开发实战》课后习题答案
- 第一章
- 一、 填空题
- 二、 判断题
- 三、 选择题
- 四、 简答题
- 五、 编程题
- 第2章
- 一、 填空题
- 二、 判断题
- 三、 选择题
- 四、 简答题
- 五、 编程题
- 第3章
- 一、 填空题
- 二、 判断题
- 三、 选择题
- 四、 简答题
- 五、 编程题
- 第4章
- 一、 填空题
- 二、 判断题
- 三、 选择题
- 四、 简单题
- 五、编程题
- 第5章
- 一、 填空题
- 二、 判断题
- 三、 选择题
- 四、 简单题
- 五、编程题
- 第一种方式
- 第二种方式
- 第6章
- 一、 填空题
- 二、 判断题
- 三、 选择题
- 四、 简答题
- 五、编程题
- 第7章
- 一、 填空题
- 二、 判断题
- 三、 选择题
- 四、 简单题
- 五、 编程题
- 第8章
- 一、 填空题
- 二、 判断题
- 三、 选择题
- 四、 简单题
- 五、 编程题
- 第9章
- 一、 填空题
- 二、 判断题
- 三、 选择题
- 四、 简单题
本答案仅供参考，禁止用于抄袭等不法用途
第一章
一、 填空题
- 用户界面
- ViewModel
- refs
- vue-devtools
- 组件
二、 判断题
- 对
- 对
- 对
- 对
- 对
三、 选择题
- D
- C
- D
- A
- A
四、 简答题
- 请简述什么是Vue。
Vue（读音/Vjuː/，类似于View）是一套用于构建用户界面的渐进式框架，与其他大型框架相比，Vue被设计为可以自底向上逐层应用。其他大型框架往往一开始就对项目的技术方案进行强制性的要求，而Vue更加灵活，开发者既可以选择使用Vue来开发一个全新项目，也可以将Vue引入到一个现有的项目中。
- 请简述Vue优势有那些。
轻量级: Vue相对简单、直接，所以Vue使用起来更加友好。
数据绑定: Vue是一个MVVM框架，即数据双向绑定。
指令: 指令主要包括内置指令和自定义指令，以“v-”开头，作用于HTML元素。
插件: 插件用于对Vue框架功能进行扩展，通过MyPlugin.install完成插件的编写，简单配置后就可以全局使用。
五、 编程题
- 请使用Vue.js动手创建Vue实例并实现数据的绑定效果。
登录页面
// 实例化 var vm = new Vue({ el: '#app', // 定义初始数据 data: { login: '登录页面' } }){{login}}
- 请手动配置Vue.js开发环境。
1）. 打开git-bash命令行工具
2）. 安装Node环境
3）. 打开解压好的vue-devtools-5.1.1文件，执行命令如下
npm install
npm run build
4）. 打开Chrome浏览器，添加vue-devtools调试工具
5）. 安装脚手架工具： npm install vue-cli@2.9.x –g
6）. 安装webpack打包工具： npm install webpack@4.27.x –g
7）. 构建项目：vue init webpack app
Ω
第2章
一、 填空题
- new关键字
- data
- 唯一根标签
- v-model
- v-on
二、 判断题
- 对
- 对
- 对
- 对
- 对
三、 选择题
- D
- A
- C
- B
- B
四、 简答题
- 请简述什么是Vue实例对象。
在Vue项目中，每个Vue应用都是通过Vue构造器创建新的Vue实例开始的。
通过new关键字的方式创建vm实例对象。
创建方式：
var vm = new Vue({ // 选项 })其中，配置选项的主要内容及含义：
1）. data：Vue实例数据对象
2）. methods：定义Vue实例中方法
3）. components：定义子组件
4）. computed：计算属性
5）. filters: 过滤器
6）. el: 唯一根元素
7）. watch: 监听数据变化
- 请简述什么是Vue组件化开发。
1）. 在Vue中，组件是构成页面中独立结构单元，能够减少重复代码的编写
2）. 提高开发效率，降低代码之间的耦合程度，使项目更易维护和管理
3）. 组件主要以页面结构形式存在，不同组件也具有基本交互功能，根据业务逻辑实现复杂的项目功能
- 请简单介绍Vue内置指令主要内容有哪些。
1）. v-model：双向数据绑定
2）. v-on：监听事件
3）. v-bind：单向数据绑定
4）. v-text：插入文本内容
5）. v-html：插入包含HTML的内容
6）. v-for：列表渲染
7）. v-if：条件渲染
8）. v-show：显示隐藏
五、 编程题
- 编写页面样式：
.compare{ margin: 0 auto; width: 500px; } ul{ padding: 0; } ul li { list-style: none; margin-top: 20px; }编写页面结构：
- 请输入第一个数：
- 请输入第二个数：
得出结果：{{result}}编写JavaScript代码：
var vm = new Vue({ el: '#app', // 定义初始数据 data: { num1: '', num2: '', result: '' }, // 定义事件处理函数compare methods: { compare() { if (!this.num1 || !this.num2) { this.result = '输入的数不能为空' } else { this.result = parseInt(this.num1) == parseInt(this.num2) ? '两个数相等' : parseInt(this.num1) > parseInt(this.num2) ? '第一个数大于第二个数' : '第一个数小于第二个数' } } } })- 编写页面结构：
- 请输入第一个数：
- + - * /
- 请输入第二个数：
得出结果：{{result}}编写JavaScript代码：
var vm = new Vue({ el: '#app', // 定义初始数据 data: { num1: '', num2: '', result: '' }, // 定义事件处理函数compare methods: { calc() { if (!this.num1 || !this.num2) { this.result = '输入的数不能为空' } else { var fuhao = document.getElementById('fuhao').value; if (fuhao == "1") { this.result = parseInt(this.num1) + parseInt(this.num2) } if (fuhao == "2") { this.result = parseInt(this.num1) - parseInt(this.num2) } if (fuhao == "3") { this.result = parseInt(this.num1) * parseInt(this.num2) } if (fuhao == "4") { this.result = parseInt(this.num1) / parseInt(this.num2) } } } } })Ω
第3章
一、 填空题
- vm.$root
- vm.$data
- vm.$children
- install
- Vue.directive()
二、 判断题
- 错
- 对
- 对
- 错
- 错
三、 选择题
- D
- CD
- B
- B
- D
四、 简答题
- 请简述什么是Vue插件。
Vue.use主要用于在Vue中安装插件，通过插件可以为Vue添加全局功能。插件可以是一个对象或函数，如果是对象，必须提供install()方法，用来安装插件；如果插件是一个函数，则该函数将被当成install()方法。
- 请简述Vue全局API接口主要内容。
1）. Vue.directive():Vue中有很多内置指令，如v-model、v-for和v-bind等
2）. Vue.use():Vue.use主要用于在Vue中安装插件，通过插件可以为Vue添加全局功能
3）. Vue.extend():Vue.extend用于基于Vue构造器创建一个Vue子类，可以对Vue构造器进行扩展
4）. Vue.set():Vue的核心具有一套响应式系统，简单来说就是通过监听器监听数据层的数据变化，当数据改变后，通知视图也自动更新
5）. Vue.mixin():Vue.mixin用于全局注册一个混入，它将影响之后创建的每个Vue实例
- 请简单介绍Vue实例对象属性和方法。
1）. vm. p r o p s : 使 用 v m . props: 使用vm. props:使用vm.props属性可以接收上级组件向下传递的数据
2）. vm. o p t i o n s : V u e 实 例 初 始 化 时 ， 除 了 传 入 指 定 的 选 项 外 ， 还 可 以 传 入 自 定 义 选 项 3 ） . v m . options: Vue实例初始化时，除了传入指定的选项外，还可以传入自定义选项 3）. vm. options:Vue实例初始化时，除了传入指定的选项外，还可以传入自定义选项3）.vm.el: vm. e l 用 来 访 问 v m 实 例 使 用 的 根 D O M 元 素 4 ） . v m . el用来访问vm实例使用的根DOM元素 4）. vm. el用来访问vm实例使用的根DOM元素4）.vm.children: vm. c h i l d r e n 用 来 获 取 当 前 实 例 的 直 接 子 组 件 5 ） . v m . children用来获取当前实例的直接子组件 5）. vm. children用来获取当前实例的直接子组件5）.vm.root: vm. r o o t 用 来 获 取 当 前 组 件 树 的 根 V u e 实 例 ， 如 果 当 前 实 例 没 有 父 实 例 ， 则 获 取 到 的 是 该 实 例 本 身 6 ） . v m . root用来获取当前组件树的根Vue实例，如果当前实例没有父实例，则获取到的是该实例本身 6）. vm. root用来获取当前组件树的根Vue实例，如果当前实例没有父实例，则获取到的是该实例本身6）.vm.slots:插槽就是定义在组件内部的template模板，可以通过 s l o t s 动 态 获 取 7 ） . v m . slots动态获取 7）. vm. slots动态获取7）.vm.attrs: vm.$attrs可以获取组件的属性，但其获取的属性中不包含class、style以及被声明为props的属性
五、 编程题
- 编写页面样式：
* { margin: 0; padding: 0 } ul { list-style: none; } .c-nav { width: 900px; height: 42px; margin: 0 auto; border-radius: 5px; position: relative; } .c-nav li { float: left; width: 83px; text-align: center; line-height: 42px; } .c-nav li a { color: #333; display: inline-block; height: 42px; } header { background: #ccc; } .c-nav li.current a { color: red; }编写页面结构：
编写JavaScript代码：
// 注册组件 Vue.component('my-component', { render(createElement) { return createElement('div', [ createElement('header', this.$slots.header), ]) } }) var vm = new Vue({ el: '#app', // 定义初始数据 data: { list: ['首页新闻', '公司简介', '招聘信息', '活动策划', '师资力量'], currentName: '', }, methods: { // 定义事件处理函数 current(key) { vm.$refs.nav.getElementsByTagName('li')[key].className = 'current'; }, cancel() { for (var i = 0; i- 编写页面结构：
编写JavaScript代码：
// 定义一个MyPlugin（自定义插件）对象 let MyPlugin = {} // 编写插件对象的install方法 // install()方法有两个参数，第1个参数Vue是Vue的构造器，options是一个可选的配置对象。 MyPlugin.install = function (Vue, options) { // 在插件中为Vue创建组件myComponent Vue.component('my-component', { template: '{{msg}}', data() { return { msg: '我是登录页面' } } }) } // 调用Vue.use()方法安装插件，在第1个参数中传入插件对象MyPlugin，第2个参数传入可选配置。 Vue.use(MyPlugin, { someOption: true }) var vm = new Vue({ el: '#app' })Ω
第4章
一、 填空题
- transition
- name
- appear
- v-leave、v-leave-active、v-leave-to
- 自定义过渡
二、 判断题
- 对
- 错
- 对
- 错
- 对
三、 选择题
- C
- D
- D
四、 简单题
- 请简述JavaScript钩子函数包括哪些。
入场钩子分别是beforeEnter（入场前）、enter（入场）、afterEnter（入场后）和enterCancelled（取消入场）
出场钩子分别是beforeLeave（出场前）、leave（出场）、afterLeave（出场后）和leaveCancelled（取消出场）
// Vue会跳过CSS的检测
- 请简述6个内置的过渡类名有哪些。
进入（enter）：
v-enter: 在元素被插入之前生效，在元素被插入之后的下一帧移除
v-enter-active: 在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡动画完成之后移除
v-enter-to: 在元素被插入之后下一帧生效（与此同时v-enter被移除），在过渡动画完成之后移除
离开（leave）：
v-leave：在离开过渡被触发时立刻生效，下一帧被移除
v-leave-active：在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡完成之后移除
v-leave-to：在离开过渡被触发之后下一帧生效（与此同时v-leave被移除），在过渡动画完成之后移除
- 请简述自定义过渡类名的属性有哪些。
enter-class
enter-active-class
enter-to-class
leave-class
leave-active-class
leave-to-class
注意：自定义类名的优先级高于普通类名
五、编程题
- html代码如下：
登录
css代码如下:
