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

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


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

第一章

一、 填空题

  1. 用户界面
  2. ViewModel
  3. refs
  4. vue-devtools
  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实例并实现数据的绑定效果。
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>登录页面</title>
  
  <script src="vue.js"></script>
</head>
<body>
  
  <div id="app">
    
    <p>{{login}}</p>
  </div>
    <script>
      // 实例化
      var vm = new Vue({
        el: '#app',
        // 定义初始数据
        data: {
          login: '登录页面'
        }
      })
      </script>
</body>
</html>
  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. D
  2. A
  3. C
  4. B
  5. B

四、 简答题

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

在Vue项目中,每个Vue应用都是通过Vue构造器创建新的Vue实例开始的。
通过new关键字的方式创建vm实例对象。
创建方式:

<script>
var vm = new Vue({
  // 选项
})
<script>

其中,配置选项的主要内容及含义:
1). data:Vue实例数据对象
2). methods:定义Vue实例中方法
3). components:定义子组件
4). computed:计算属性
5). filters: 过滤器
6). el: 唯一根元素
7). watch: 监听数据变化

  1. 请简述什么是Vue组件化开发。

1). 在Vue中,组件是构成页面中独立结构单元,能够减少重复代码的编写
2). 提高开发效率,降低代码之间的耦合程度,使项目更易维护和管理
3). 组件主要以页面结构形式存在,不同组件也具有基本交互功能,根据业务逻辑实现复杂的项目功能

  1. 请简单介绍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:显示隐藏

五、 编程题

  1. 编写页面样式:

.compare{
      margin: 0 auto;
      width: 500px;
    }
    ul{
      padding: 0;
    }
    ul li {
      list-style: none;
      margin-top: 20px;
    }
 

编写页面结构:

<div id="app">
  
  <div class="compare">
    <ul>
      <li>
        请输入第一个数:<input type="text" v-model="num1">
      </li>
      <li>
        请输入第二个数:<input type="text" v-model="num2">
      </li>
      <li>
        <input type="button" value="比较" @click='compare()'>
      </li>
    </ul>
    <div class="result">
      得出结果:{{result}}
    </div>
  </div>
</div>

<script src="vue.js"></script>

编写JavaScript代码:

<script>
    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) ? '第一个数大于第二个数' : '第一个数小于第二个数'
          }
        }
      }
    })
  </script>
  1. 编写页面结构:
  <div id="app">

<div class="calc">
<ul>
<li>
请输入第一个数:<input type="text" v-model="num1">
</li>
<li>
<select name="" id="fuhao">
<option value="1" onclick="">+</option>
<option value="2" onclick="">-</option>
<option value="3" onclick="">*</option>
<option value="4" onclick="">/</option>
</select>
</li>
<li>
请输入第二个数:<input type="text" v-model="num2">
</li>
<li>
<input type="button" value="计算" @click='calc()'>
</li>
</ul>
<div class="result">
得出结果:{{result}}
</div>
</div>    
</div>

编写JavaScript代码:

<script>
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)
}
}
}
}
})
</script>

Ω

第3章

一、 填空题

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

二、 判断题

三、 选择题

  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:Vue3.vm.el: vm.

e

l

访

v

m

使

D

O

M

4

.

v

m

.

el用来访问vm实例使用的根DOM元素 4). vm.

el访vm使DOM4.vm.children: vm.

c

h

i

l

d

r

e

n

5

.

v

m

.

children用来获取当前实例的直接子组件 5). vm.

children5.vm.root: vm.

r

o

o

t

V

u

e

6

.

v

m

.

root用来获取当前组件树的根Vue实例,如果当前实例没有父实例,则获取到的是该实例本身 6). vm.

rootVue6.vm.slots:插槽就是定义在组件内部的template模板,可以通过

s

l

o

t

s

7

.

v

m

.

slots动态获取 7). vm.

slots7.vm.attrs: vm.$attrs可以获取组件的属性,但其获取的属性中不包含class、style以及被声明为props的属性

五、 编程题

  1. 编写页面样式:

* {
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;
}

编写页面结构:

<div id="app">
<my-component>

<template v-slot:header>
<div id="c_nav" class="c-nav">
<span class="cloud"></span>
<ul ref='nav'>
<li v-bind:class="{currentName}" v-for="item,key in list" @mouseenter="current(key)" @mouseleave="cancel()"
:id=key>
<a href="#">{{item}}</a>
</li>
</ul>
</div>
</template>
</my-component>
</div>

编写JavaScript代码:

<script>
// 注册组件
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 < vm.$refs.nav.getElementsByTagName('li').length; i++) {
vm.$refs.nav.getElementsByTagName('li')[i].className = ''
}
}
}
})
</script>
  1. 编写页面结构:
  <div id="app">
<my-component><my-component />
</div>

编写JavaScript代码:

<script>
// 定义一个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'
})
</script>

Ω

第4章

一、 填空题

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

二、 判断题

三、 选择题

  1. C
  2. D
  3. D

四、 简单题

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

入场钩子分别是beforeEnter(入场前)、enter(入场)、afterEnter(入场后)和enterCancelled(取消入场)
出场钩子分别是beforeLeave(出场前)、leave(出场)、afterLeave(出场后)和leaveCancelled(取消出场)
<transition
@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代码如下:
<body>

<template id="example1">
<div> 

<div class="form-input">
<input type="text" name="user" placeholder="请输入手机号/邮箱" class="form-input">
</div>
<div class="form-input">
<input type="password" name="psd" placeholder="请输入密码" class="form-input">
</div>
<button type="button" class="primary-button"><span>登录</span></button>
</div>
</template>

<template id="example2">
<div class="pic">
<img src="images/code.jpg">
</div>
</template>
<div id="content">
<div class="title">
<a href="javascript:;" @click="compontentName = 'example1',cur=0" :class="{active:cur == 0}">账号登录</a>
<a href="javascript:;" @click="compontentName = 'example2',cur=1" :class="{active:cur == 1}">二维码登录</a>
</div>
<transition enter-active-class="animated bounceInDown">
<component :is="compontentName"></component>
</transition>
</div>
</body>

css代码如下:


#content{
width: 400px;;
margin: 60px auto;
}
.title{
height: 50px;
border-bottom: 1px solid #e1e7ec;
text-align: center;
}
#content a{
text-decoration: none;
color: black;
font-size: 16px;
background: #f1f1f1;
padding: 5px 10px;
margin: 0 10px;
border-radius: 5px;
}
.form-input{
height: 46px;
line-height: 46px;
margin-top: 10px;;
}
input{
box-sizing: border-box;
padding: 0 25px;
background: #eef3f5;
border-radius: 8px;
width: 100%;
height: 100%;
border: 0;
outline: 0;
font-size: 14px;
}
#content .active{
background-color: #09f;
color: #fff;
}
.primary-button{
background: linear-gradient(325deg,#4aa4ff,#1058fa);
width: 100%;
height: 42px;
border-radius: 23px;
border: 0;
outline: none;
color: #fff;
letter-spacing: 10px;
font-weight: 500;
font-size: 16px;
cursor: pointer;
margin-top: 30px;
}
.pic{
width: 200px;
height: 200px;
margin: 0 auto;
}
.pic img{
width: 100%;
height: 100%;
}

js代码如下:

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
Vue.component('example1',{template:'#example1'})
Vue.component('example2',{template:'#example2'})
var vm = new Vue({
el: '#content',
data: { 
compontentName :'example1',
cur:0
}
});
</script>

《Vue.js前端开发实战》课后习题答案插图
《Vue.js前端开发实战》课后习题答案插图(1)
2. html代码如下:

<div id="app">
<div>
<div v-for='item in showList'>{{item}}</div>
<div @click="showAll = !showAll" class="status">{{flag}}</div>
</div>
</div>

js代码如下:

<!-- 一开始只显示4个数据,点击展开显示全部 -->
<script type = "text/javascript">
var vm = new Vue({
el:'#app',
data() {
return {
fruitList:[
'草莓','苹果','香蕉','榴莲','香梨'  // 进行显示的数据
],
showAll:false,   // 标记数据是否需要完全显示的属性
}  
},
computed:{
showList:function(){
if(this.showAll == false){
var showList = [];
if(this.fruitList.length > 4){  // 一开始显示前4个数据
for(var i=0;i<4;i++){
showList.push(this.fruitList[i])
}
}else{
showList = this.fruitList
}
return showList;
}
else{
return this.fruitList;
}
},
flag:function(){
if(this.showAll == false){
return '单击展开'
}
else{
return '单击收起'
}
}
}
})
</script>

《Vue.js前端开发实战》课后习题答案插图(2)
《Vue.js前端开发实战》课后习题答案插图(3)
Ω

第5章

一、 填空题

  1. npm install vue-router
  2. 路由对象
  3. 命名路由
  4. 编程式导航
  5. hash(#号)

二、 判断题

三、 选择题

  1. A
  2. A
  3. C

四、 简单题

  1. 请简述npm方式安装vue-router的步骤。

1.首先通过cd命令进入创建好的项目目录里面
cd 文件名
2.使用以下npm命令来安装路由
方式一:npm install vue-router –save(不加版本号)
// –save 会在package.json包配置文件中添加对应的配置
方式二:npm install vue-router@3.1.x(指定版本号)
安装完成之后可以在package.json文件中查看到vue-router的相关信息
3.在main.js文件中引入路由、安装路由功能等,示例代码如下
import Vue from ‘vue’
import VueRouter from ‘vue-router’ // 引入插件
import App from ‘./App’
Vue.use(VueRouter) // 注册组件
const router = new VueRouter({ // 创建实例
routes:[] // 配置路由规则
})
const app = new Vue({
el: ‘#app’,
router:router, // 挂载路由
render:h=>h(App)
})

  1. 请简述vue-router路由的作用。

根据不同的url哈希值,在路由视图中显示不同的页面,实现非跳转式的页面切换
在单页面应用中更新视图可以不用重新请求页面
用户体验好,不需要每次都从服务器全部获取,快速展现给用户

  1. 请简单列举并说明路由对象包括哪些属性。

路由对象表示当前激活的路由的状态信息,包含了当前URL解析得到的信息,还有URL匹配到的路由记录,this.

r

o

u

t

e

r

t

h

i

s

.

router表示全局路由器对象,this.

routerthis.route表示当前正在用于跳转的路由器对象,$route的常用属性信息如下:
$route.path:对应当前路由地址
$route.query:一个{key:value}对象,表示 URL查询参数
$route.params:一个{key:value}对象,路由转跳携带参数
$route.hash:在history模式下获取当前路由的hash值(带#),如果没有hash值,则为空字符串
$route.fullPath:完成解析后的URL,包含查询参数和hash的完整路径
$route.name:当前路由的名称
$route.matched:路由记录,当前路由下路由声明的所有信息,从父路由(如果有)到当前路由为止
$route.redirectedFrom:如果存在重定向,即为重定向来源的路由

五、编程题

题目:请使用Vue路由相关知识动手实现Tab栏切换案例。在这里提供了2种方式来实现,分别是单页面构建和手动搭建webpack+vue项目。

第一种方式
  1. html代码如下:
<body>
<div id="app">
<ul>
<li>
<router-link to="/payment">待付款</router-link>
</li>
<li>
<router-link to="/deliver">待发货</router-link>
</li>
<li>
<router-link to="/receive">待收货</router-link>
</li>
</ul>

<router-view></router-view>
</div>
<template id="Payment">
<div class="pay">
<p>待付款商品信息</p>
</div>
</template>
<template id="Deliver">
<div class="pay">
<p>待发货商品信息</p>
</div>
</template>
<template id="Receive">
<div class="pay">
<p>待收货商品信息</p>
</div>
</template>
</body>

css示例代码如下:


*{
margin: 0;
padding: 0;
}
#app{
width:100%;
}
#app ul{
height: 30px;
list-style: none;
display: flex;
flex-wrap: wrap;
align-content: flex-center;
align-items: center;
justify-content: space-around;
text-align: center;
}
#app>ul>li{
border: 1px solid red;
flex: 1;
}
li a{
width: 100%;
text-decoration: none;
line-height: 30px;
display: inline-block;
}
.pay p{
text-align:center;
line-height: 200px;
}
/* router-link激活选中时的状态 */
.router-link-active{
background-color: orange;
color: #fff;
}

js代码如下:

<script>
// 1 定义路由组件
const ListOne = {template:'#Payment'}
const ListTwo = {template:'#Deliver'}
const ListThree = {template:'#Receive'}
// 2 定义路由,创建 router 实例
const router=new VueRouter({
routes:[
{ path: '/', redirect: '/payment' },
{ path:'/payment',component:ListOne },
{ path:'/deliver',component:ListTwo },
{ path:'/receive',component:ListThree }
]
});
// 3 创建和挂载根实例
const app = new Vue({
router
}).$mount('#app')
</script>
第二种方式

webpack+vue,项目搭建准备工作参考本章第5.3小节,项目源代码见本章配套资源课后习题第5章源代码中Tab文件。

编写components/Message.vue页面,示例代码如下

 <template>
<div id="appCon">
<ul>
<li>
<router-link to="/payment">待付款</router-link>
</li>
<li>
<router-link to="/deliver">待发货</router-link>
</li>
<li>
<router-link to="/receive">待收货</router-link>
</li>
</ul>

<router-view></router-view>
</div>
</template>
<script>
export default {
data () {
return {
}
}
}
</script>
<style lang="scss">
*{
margin: 0;
padding: 0;
}
#appCon{
width:100%;
}
#appCon ul{
height: 30px;
list-style: none;
display: flex;
flex-wrap: wrap;
align-content: flex-center;
align-items: center;
justify-content: space-around;
text-align: center;
}
#appCon>ul>li{
border: 1px solid red;
flex: 1;
}
li a{
text-decoration: none;
line-height: 30px;
height: 30px;
display: block;
}
.my-active{
background: orange;
font-weight: 800;
color: #fff;
}
.mui-input-group .mui-input-row{
margin-bottom: 10px;
background: #fff;
}
.mui-btn-block{
padding: 10px 0;
}
.login-container{
display: flex;
justify-content: center;
padding-top: 10px;
span{
padding: 5px 20px;
border-radius: 5px;
font-size: 16px;
}
}
</style>

编写逻辑入口main.js文件,示例代码如下:

import Vue from 'vue'  //引入vue.js,因为在webpack.config中进行配置地址了
import app from './App.vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import router from './router.js'
// 导入mui样式
import './lib/mui/css/mui.css'
new Vue({
el: '#app',
render: c =>  c(app),
router
})

编写router.js文件,配置路由,示例代码如下:

import VueRouter from 'vue-router'
// 导入tabbar对应的路由组件
import Message from './components/Message.vue'
import Payment from './components/sub/Payment.vue'
import Deliver from './components/sub/Deliver.vue'
import Receive from './components/sub/Receive.vue'
// 创建路由对象
var router = new VueRouter({
routes:[// 配置路由规则
{ path: '/', redirect: '/payment'},
{ path: '/message', component: Message},
{ path: '/payment', component: Payment},
{ path: '/deliver', component: Deliver},
{ path: '/receive', component: Receive}
],
linkActiveClass:'my-active'
})
export default router

编写App.vue文件,渲染路由组件,示例代码如下:

<template>
<div id="app">
<message>
</message>
</div>
</template>
<script>
import message from './components/Message.vue'
export default {
// 注册子组件的节点
components:{
message
},
}
</script>
<style lang="scss" scoped>
.my-active{
background: #007aff;
font-weight: 800;
color: #fff;
}
.mui-input-group .mui-input-row{
margin-bottom: 10px;
background: #fff;
}
.mui-btn-block{
padding: 10px 0;
}
.login-container{
display: flex;
justify-content: center;
padding-top: 10px;
span{
padding: 5px 20px;
border-radius: 5px;
font-size: 16px;
}
}
</style>

编写待发货、待付款、待收货页面,文件路径components/sub目录下,以待发货页面为例,示例代码如下:

<template>
<div>
<p>待发货</p>
</div>
</template>
<style scoped>
p{
text-align:center;
line-height: 200px;
}
</style>

Ω

第6章

一、 填空题

  1. vm.$store
  2. vm.$store.state
  3. vm.$store.commit()
  4. store.registerModule()
  5. vm.$store.dispatch()

二、 判断题

三、 选择题

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

四、 简答题

  1. 请简要概述Vuex的设计思想。

Vuex是Vue团队提供的一套组件状态管理维护的解决方案。Vuex作为Vue插件来使用,进一步完善了Vue基础代码功能,使Vue组件状态更加容易维护,为大型项目开发提供了强大的技术支持。

  1. 简述Vuex配置对象中的主要内容有哪些。

1). actions:用来定义事件处理方法,用于处理state数据
2). mutations:选项中的事件处理方法接收state对象作为参数,即初始数据
3). getters:store实例允许在store中定义getters计算属性,类似于Vue实例的computed
4). modules:modules用来在store实例中定义模块对象
5). plugins:Vuex中的插件配置选项为plugins,插件本身为函数
6). devtools:store实例配置中的devtools选项用来设置是否在devtools调试工具中启用Vuex,默认值为true,表示在启用,设为false表示停止使用

  1. 简述Vuex中的actions的含义。

actions选项用来定义事件处理方法,用于处理state数据。actions类似于mutations,不同之处在于actions是异步执行的,事件处理函数可以接收{commit}对象,完成mutation提交,从而方便devtools调试工具跟踪状态的state变化。
在使用时,需要在store仓库中注册actions选项,在里面定义事件处理方法。事件处理方法接收context作为第1个参数,payload作为第2个参数(根据需要进行选择)。

五、编程题

  1. 编写页面结构:
  <div id="app">
<div class="wrapper">

<div class="message">
<div class="info">
<input class="value" type="text" v-model="value" placeholder="请输入内容">
</div>
<div class="btn">
<span @click="add">添加</span>
<span @click="find">查找</span>
</div>
</div>

<ul>	
<li>
</li>
<li v-for="item,key in list" :id="key" @click="" v-if="item.isFind">
<div class="info">
{{item.info}}
<input class="newValue" type="text" v-model="newValue" v-if="item.isShow" @blur="blur(key)">
</div>
<div class="btn">
<span @click="del(key)">刪除</span>
<span @click="edit(key)">编辑</span>
</div>
</li>
</ul>
</div>
</div>
  1. 编写JavaScript代码:
<script>
var store = new Vuex.Store({
state: {
list: [{
id: 0,
info: '列表0',
isShow: false,
isFind: true
}, {
id: 1,
info: '列表0',
isShow: false,
isFind: true
}, {
id: 2,
info: '列表0',
isShow: false,
isFind: true
}, {
id: 3,
info: '列表3',
isShow: false,
isFind: true
}, {
id: 4,
info: '列表4',
isShow: false,
isFind: true
}, {
id: 5,
info: '列表0',
isShow: false,
isFind: true
}, {
id: 6,
info: '列表6',
isShow: false,
isFind: true
}, {
id: 7,
info: '列表0',
isShow: false,
isFind: true
}, {
id: 8,
info: '列表8',
isShow: false,
isFind: true
}, {
id: 9,
info: '列表9',
isShow: false,
isFind: true
}],
newList: []
},
mutations: {
add(state, payload) {
state.list.push({
id: state.list.length,
info: payload,
isShow: false,
isFind: true
})
},
del(state, payload) {
state.list.splice(payload, 1)
},
edit(state, payload) {
state.list.splice(payload.key, 1, payload.value)
}
},
actions: {
add({ commit }, payload) {
commit('add', payload)
},
del({ commit }, payload) {
commit('del', payload)
},
edit({ commit }, payload) {
console.log(payload)
commit('edit', payload)
},
}
})
//创建Vue实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
list: [],
value: '',
newValue: '',
isShow: false,
},
created() {
this.list = this.$store.state.list
},
methods: {
add() {
if (this.value) {
this.$store.dispatch('add', this.value)
}
},
del(key) {
this.$store.dispatch('del', key)
},
edit(key) {
for (var i = 0; i < this.list.length; i++) {
if (i == key) {
this.list[key].isShow = true
} else {
this.list[i].isShow = false
}
}
},
find() {
if (!this.value) {
alert('输入内容不能为空')
} else {
for (var j = 0; j < this.list.length; j++) {
if (this.value != this.list[j].info) {
this.list[j].isFind = false
}
}
}
},
blur(key) {
this.$store.dispatch({
type: 'edit',
value: {
id: key,
info: this.newValue,
isShow: false,
isFind: true
},
key: key
})
}
},
store
});
</script>

Ω

第7章

一、 填空题

  1. @vue
  2. npm install –g @vue/cli
  3. vue -version(vue -V)
  4. yarn global add @vue/cli
  5. vue create 项目名

二、 判断题

三、 选择题

  1. B
  2. C
  3. AD

四、 简单题

  1. 简述如何安装Vue CLI 3.x版本的脚手架。

前提:推荐使用Node 8.11.0+和NPM 3+
通过npm的方式全局安装@vue/cli脚手架
npm install @vue/cli –g // -g表示全局安装

  1. 简述如何在现有项目中安装CLI插件和第三方插件。

CLI插件安装完成之后,在package.json文件中查看,是以@vue/cli-plugin-开头。
注意:vue add 安装和调用只是 Vue CLI 插件,普通的npm包还是用npm 来进行安装的。
例如 vue add @vue/eslint
第三方插件:
如果不带@vue/前缀,将会安装第三方包
例如 vue add vuetify

  1. 简单介绍CLI服务vue-cli-service( )中的command命令包括哪些。

serve start development server 启动服务
build build for production 生成用于生产环境的包
inspect inspect internal webpack config 审查webpack配置
lint lint and fix source files lint?并修复源文件

五、 编程题

  1. 简单描述Vue CLI 3安装的过程。

步骤如下:以npm包管理器为例
推荐使用Node 8.11.0+和NPM 3+
安装版本要求:
Node.js 8.11.0+
NPM 3+
如果之前已经全局安装了旧版的vue-cli(1.x或2.x),需要先进行卸载,指令如下:
npm uninstall vue-cli -g
如果之前没有全局安装旧版,则直接全局安装@vue/cli脚手架,指令如下:
npm install @vue/cli –g
vue –V 查看版本号

  1. 简单描述使用Vue CLI 3创建项目的方法步骤。

步骤如下:
打开命令行工具,切换到项目根目录,执行以下指令来创建项目:
vue create hello-vue(项目名)
在交互界面中,选择手动配置项,进行配置
项目创建完成后,执行以下命令进去项目目录:
cd hello-vue
执行命令,启动项目
npm run server

Ω

第8章

一、 填空题

  1. webpack-hot-middleware
  2. #
  3. history
  4. SEO(搜索引擎优化)
  5. vue-server-renderer

二、 判断题

三、 选择题

  1. A
  2. B
  3. D

四、 简单题

  1. 请简述什么是服务器端渲染。

服务器端渲染(简称SSR),是将组件或页面通过服务器生成html字符串,再发送到浏览器,最后将静态标记”混合”为客户端上完全交互的应用程序,简单理解就是将页面在服务器中完成渲染,然后在客户端直接展示。

  1. 请简述服务器端渲染的代码逻辑和处理步骤。

Vue进行服务器端渲染时,需要利用Node.js搭建一个服务器,并添加服务器端渲染的代码逻辑。
使用webpack-dev-middleware中间件对更改的文件进行监控,使用webpack-hot-middleware中间件进行页面的热更新,使用vue-server-renderer插件来渲染服务器端打包的bundle文件到客户端。

  1. 请简述Nuxt.js中,声明式路由和编程式路由的区别

声明式路由:在页面中使用完成路由跳转。
编程式路由:在JavaScript代码中实现路由的跳转。

五、 编程题

  1. 参考本书第8章课后习题配套源代码: 08-1编程题\login

Ω

第9章

一、 填空题

  1. mt-
  2. Axios
  3. MUI
  4. Object. defineProperty

二、 判断题

三、 选择题

  1. A
  2. D
  3. B

四、 简单题

  1. 请简单列举一个项目从开始到上线的开发流程需要的步骤。

1、产品创意
在这一阶段就是决定要做一个什么产品(What),为什么要做这个产品(Why),解决What和Why的问题
2、产品原型
在这一阶段,通过由产品经理对原型进行设计包括功能、页面,最重要的是用户体验
3、美工设计
在这一阶段,美工设计人员根据产品经理提供的原型图实现PSD设计图稿,并切图
4、前端实现
在这一阶段,前端开发工程师拿到美工设计好的psd图,负责具体的HTML、CSS静态页面的实现,以及动态特效、动态数据的绑定和交互的实现
5、后端实现
在这一阶段,实现数据处理、业务逻辑代码
6、测试、试运营、上线
由测试人员进行项目测试。将所有的问题解决后,就可以试运行,将项目上线

  1. 请简单列举6个“微商城”项目中用到的重点知识。

1、路由的配置
2、Vuex的配置
3、axios的配置以及接口的调用
4、购物车功能的实现
5、底部导航栏的实现
6、分类列表的实现
7、图片预览的实现vue-preview插件

本站无任何商业行为
个人在线分享-虚灵IT资料分享 » 《Vue.js前端开发实战》课后习题答案
E-->