《Vue.js前端开发实战》课后习题答案

• 前端

《Vue.js前端开发实战》课后习题答案

  • 第一章
      • 一、 填空题
      • 二、 判断题
      • 三、 选择题
      • 四、 简答题
      • 五、 编程题
  • 第2章
      • 一、 填空题
      • 二、 判断题
      • 三、 选择题
      • 四、 简答题
      • 五、 编程题
  • 第3章
      • 一、 填空题
      • 二、 判断题
      • 三、 选择题
      • 四、 简答题
      • 五、 编程题
  • 第4章
      • 一、 填空题
      • 二、 判断题
      • 三、 选择题
      • 四、 简单题
      • 五、编程题
  • 第5章
      • 一、 填空题
      • 二、 判断题
      • 三、 选择题
      • 四、 简单题
      • 五、编程题
        • 第一种方式
        • 第二种方式
  • 第6章
      • 一、 填空题
      • 二、 判断题
      • 三、 选择题
      • 四、 简答题
      • 五、编程题
  • 第7章
      • 一、 填空题
      • 二、 判断题
      • 三、 选择题
      • 四、 简单题
      • 五、 编程题
  • 第8章
      • 一、 填空题
      • 二、 判断题
      • 三、 选择题
      • 四、 简单题
      • 五、 编程题
  • 第9章
      • 一、 填空题
      • 二、 判断题
      • 三、 选择题
      • 四、 简单题

本答案仅供参考，禁止用于抄袭等不法用途

第一章

一、 填空题

  1. 用户界面
  2. ViewModel
  3. refs
  4. vue-devtools
  5. 组件

二、 判断题

  1. 对
  2. 对
  3. 对
  4. 对
  5. 对

三、 选择题

  1. D
  2. C
  3. D
  4. A
  5. A

四、 简答题

  1. 请简述什么是Vue。

Vue（读音/Vjuː/，类似于View）是一套用于构建用户界面的渐进式框架，与其他大型框架相比，Vue被设计为可以自底向上逐层应用。其他大型框架往往一开始就对项目的技术方案进行强制性的要求，而Vue更加灵活，开发者既可以选择使用Vue来开发一个全新项目，也可以将Vue引入到一个现有的项目中。

  1. 请简述Vue优势有那些。

轻量级: Vue相对简单、直接，所以Vue使用起来更加友好。

数据绑定: Vue是一个MVVM框架，即数据双向绑定。

指令: 指令主要包括内置指令和自定义指令，以“v-”开头，作用于HTML元素。

插件: 插件用于对Vue框架功能进行扩展，通过MyPlugin.install完成插件的编写，简单配置后就可以全局使用。

五、 编程题

  1. 请使用Vue.js动手创建Vue实例并实现数据的绑定效果。



  
  
  
  登录页面
  
  


  
  
    
    
{{login}}
  1. 请手动配置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章

一、 填空题

  1. new关键字
  2. data
  3. 唯一根标签
  4. v-model
  5. v-on

二、 判断题

  1. 对
  2. 对
  3. 对
  4. 对
  5. 对

三、 选择题

  1. D
  2. A
  3. C
  4. B
  5. B

四、 简答题

  1. 请简述什么是Vue实例对象。

在Vue项目中，每个Vue应用都是通过Vue构造器创建新的Vue实例开始的。

通过new关键字的方式创建vm实例对象。

创建方式：

编写JavaScript代码：
  1. 编写页面结构：
  
    
    
      
    
        
  • 
          请输入第一个数：
        
    • 
        
  • 
          
        
    • 
        
  • 
          请输入第二个数：
        
    • 
        
  • 
          
        
    • 
      

      
        得出结果：{{result}}

编写JavaScript代码：

Ω

第3章

一、 填空题

  1. vm.$root
  2. vm.$data
  3. vm.$children
  4. install
  5. Vue.directive()

二、 判断题

  1. 错
  2. 对
  3. 对
  4. 错
  5. 错

三、 选择题

  1. D
  2. CD
  3. B
  4. B
  5. D

四、 简答题

  1. 请简述什么是Vue插件。

Vue.use主要用于在Vue中安装插件，通过插件可以为Vue添加全局功能。插件可以是一个对象或函数，如果是对象，必须提供install()方法，用来安装插件；如果插件是一个函数，则该函数将被当成install()方法。

  1. 请简述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实例

  1. 请简单介绍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的属性

五、 编程题

  1. 编写页面样式：

编写页面结构：

编写JavaScript代码：
  1. 编写页面结构：

编写JavaScript代码：

Ω

第4章

一、 填空题

  1. transition
  2. name
  3. appear
  4. v-leave、v-leave-active、v-leave-to
  5. 自定义过渡

二、 判断题

  1. 对
  2. 错
  3. 对
  4. 错
  5. 对

三、 选择题

  1. C
  2. D
  3. D

四、 简单题

  1. 请简述JavaScript钩子函数包括哪些。

入场钩子分别是beforeEnter（入场前）、enter（入场）、afterEnter（入场后）和enterCancelled（取消入场）

出场钩子分别是beforeLeave（出场前）、leave（出场）、afterLeave（出场后）和leaveCancelled（取消出场）

@before-enter=“beforeEnter”

@enter=“enter”

@after-enter=“afterEnter”

@enter-cancelled=“enterCancelled”

@before-leave=“beforeLeave”

@leave=“leave”

@after-leave=“afterLeave”

@leave-cancelled=“leaveCancelled”

v-bind:css=“false”> // Vue会跳过CSS的检测

  1. 请简述6个内置的过渡类名有哪些。

进入（enter）：

v-enter: 在元素被插入之前生效，在元素被插入之后的下一帧移除

v-enter-active: 在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡动画完成之后移除

v-enter-to: 在元素被插入之后下一帧生效（与此同时v-enter被移除），在过渡动画完成之后移除

离开（leave）：

v-leave：在离开过渡被触发时立刻生效，下一帧被移除

v-leave-active：在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡完成之后移除

v-leave-to：在离开过渡被触发之后下一帧生效（与此同时v-leave被移除），在过渡动画完成之后移除

  1. 请简述自定义过渡类名的属性有哪些。

enter-class

enter-active-class

enter-to-class

leave-class

leave-active-class

leave-to-class

注意：自定义类名的优先级高于普通类名

五、编程题

  1. html代码如下：

  
  
  
  
  
    
      账号登录
      二维码登录

css代码如下:

                                                        
本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/d589ae0730.html
赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐