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

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

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

第一章

一、填空题

用户界面
ViewModel
refs
vue-devtools
组件

二、判断题

三、选择题

四、简答题

请简述什么是Vue。

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

请简述Vue优势有那些。

轻量级: Vue相对简单、直接，所以Vue使用起来更加友好。
数据绑定: Vue是一个MVVM框架，即数据双向绑定。
指令: 指令主要包括内置指令和自定义指令，以“v-”开头，作用于HTML元素。
插件: 插件用于对Vue框架功能进行扩展，通过MyPlugin.install完成插件的编写，简单配置后就可以全局使用。

五、编程题

请使用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>
  <!-- 引入vue.js -->
  <script src="vue.js"></script>
</head>
<body>
  <!-- 定义唯一根标签 -->
  <div id="app">
    <!-- 绑定login -->
    <p>{{login}}</p>
  </div>
    <script>
      // 实例化
      var vm = new Vue({
        el: '#app',
        // 定义初始数据
        data: {
          login: '登录页面'
        }
      })
      </script>
</body>
</html>

请手动配置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

二、判断题

三、选择题

四、简答题

请简述什么是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: 监听数据变化

请简述什么是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：显示隐藏

五、编程题

编写页面样式：

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

编写页面结构：

<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>
<!-- 引入vue.js -->
<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>

编写页面结构：

  <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章

一、填空题

vm.$root
vm.$data
vm.$children
install
Vue.directive()

二、判断题

三、选择题

四、简答题

请简述什么是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属性可以接收上级组件向下传递的数据
2）. vm. $o p t i o n s : V u e 实例初始化时，除了传入指定的选项外，还可以传入自定义选项 3 ） . v m .$ el: vm. $e l 用来访问 v m 实例使用的根 D O M 元素 4 ） . v m .$ children: vm. $c h i l d r e n 用来获取当前实例的直接子组件 5 ） . v m .$ root: vm. $r o o t 用来获取当前组件树的根 V u e 实例，如果当前实例没有父实例，则获取到的是该实例本身 6 ） . v m .$ slots:插槽就是定义在组件内部的template模板，可以通过 $s l o t s 动态获取 7 ） . v m .$ attrs: vm.$attrs可以获取组件的属性，但其获取的属性中不包含class、style以及被声明为props的属性

五、编程题

编写页面样式：

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

编写页面结构：

<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>

编写页面结构：

  <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: '<div>{{msg}}</div>',
        data() {
          return {
            msg: '我是登录页面'
          }
        }
      })
    }
    // 调用Vue.use()方法安装插件，在第1个参数中传入插件对象MyPlugin，第2个参数传入可选配置。
    Vue.use(MyPlugin, {
      someOption: true
    })
    var vm = new Vue({
      el: '#app'
    })
  </script>

第4章

一、填空题

transition
name
appear
v-leave、v-leave-active、v-leave-to
自定义过渡

二、判断题

三、选择题

四、简单题

请简述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的检测

请简述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代码如下：

<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代码如下:

<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
<style>
  #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%;
  }
</style>

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>

账号登录
二维码登录
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>

隐藏部分
展示全部
Ω

第5章

一、填空题

npm install vue-router
路由对象
命名路由
编程式导航
hash（#号）

二、判断题

三、选择题

四、简单题

请简述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)
})

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

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

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

路由对象表示当前激活的路由的状态信息，包含了当前URL解析得到的信息，还有URL匹配到的路由记录，this. $r o u t e r 表示全局路由器对象， t h i s .$ 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项目。

第一种方式

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示例代码如下：

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

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章

一、填空题

vm.$store
vm.$store.state
vm.$store.commit()
store.registerModule()
vm.$store.dispatch()

二、判断题

三、选择题

四、简答题

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

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

简述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表示停止使用

简述Vuex中的actions的含义。

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

五、编程题

编写页面结构：

  <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>

编写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章

一、填空题

@vue
npm install –g @vue/cli
vue -version(vue -V)
yarn global add @vue/cli
vue create 项目名

二、判断题

三、选择题

四、简单题

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

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

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

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

简单介绍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？并修复源文件

五、编程题

简单描述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 查看版本号

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

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

第8章

一、填空题

webpack-hot-middleware
#
history
SEO（搜索引擎优化）
vue-server-renderer

二、判断题

三、选择题

四、简单题

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

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

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

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

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

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

五、编程题

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

第9章

一、填空题

mt-
Axios
MUI
Object. defineProperty

二、判断题

三、选择题

四、简单题

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

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

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

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

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

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

第一章

一、 填空题

二、 判断题

三、 选择题

四、 简答题

五、 编程题

第2章

一、 填空题

二、 判断题

三、 选择题

四、 简答题

五、 编程题

第3章

一、 填空题

二、 判断题

三、 选择题

四、 简答题

五、 编程题

第4章

一、 填空题

二、 判断题

三、 选择题

四、 简单题

五、编程题

第5章

一、 填空题

二、 判断题

三、 选择题

四、 简单题

五、编程题

第一种方式

第二种方式

第6章

一、 填空题

二、 判断题

三、 选择题

四、 简答题

五、编程题

第7章

一、 填空题

二、 判断题

三、 选择题

四、 简单题

五、 编程题

第8章

一、 填空题

二、 判断题

三、 选择题

四、 简单题

五、 编程题

第9章

一、 填空题

二、 判断题

三、 选择题

四、 简单题

一、填空题

二、判断题

三、选择题

四、简答题

五、编程题

一、填空题

二、判断题

三、选择题

四、简答题

五、编程题

一、填空题

二、判断题

三、选择题

四、简答题

五、编程题

一、填空题

二、判断题

三、选择题

四、简单题

一、填空题

二、判断题

三、选择题

四、简单题

一、填空题

二、判断题

三、选择题

四、简答题

一、填空题

二、判断题

三、选择题

四、简单题

五、编程题

一、填空题

二、判断题

三、选择题

四、简单题

五、编程题

一、填空题

二、判断题

三、选择题

四、简单题