这节课我们运用现在已经学的这些vue知识做一个实践，做一个“超级英雄备案管理系统”，看名字好像很复杂，其实很简单，用现有的知识很少代码就可以搞定了。
首先，我们用vue cli创建一个新项目,叫heroes

vue create heroes

创建完以后，项目里会有vue相关介绍的自带内容，我们把用不着的都删掉，保持项目的整洁，保持一点点洁癖。打开src文件夹，删掉目前不用的文件

打开App.vue文件，把不用的代码删掉

<template>
  <img alt="Vue logo" src="./assets/logo.png">  // 删除
  <HelloWorld msg="Welcome to Your Vue.js App"/>  // 删除
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'  // 删除

export default {
  name: 'App',
  components: {  // 删除
    HelloWorld  // 删除
  }  // 删除
}
</script>

<style>
#app {  // 删除
  font-family: Avenir, Helvetica, Arial, sans-serif;  // 删除
  -webkit-font-smoothing: antialiased;  // 删除
  -moz-osx-font-smoothing: grayscale;  // 删除
  text-align: center;  // 删除
  color: #2c3e50;  // 删除
  margin-top: 60px;  // 删除
}  // 删除
</style>

最后剩下纯净的文件内容

<template>
</template>

<script>

export default {
  name: 'App',
}
</script>

<style>

</style>

0.让项目跑起来，

我们先把之前改动的代码保存好，
打开命令行工具，把命令行工具的目录cd到我们项目的根目录下，然后执行

npm run serve

等待一会以后，命令行里输出

 App running at:
  - Local:   http://localhost:8080/
  - Network: http://127.0.0.1:8080/

说明项目跑起来了，
在浏览器打开http://localhost:8080/，这是页面时空的，因为我们还没有向页面里添加内容
然后就可以开始写我们的代码了

1.超级英雄列表展示

我们的备案系统现在已有两个超级英雄备案完成了，我们要把他们展示出来，
首先我们需要一个数组，存放我们已经备案的超级英雄
在export default导出的对象里面增加data属性，data是一个函数，返回一个对象

data() {
 return {
    list: ['钢铁侠', '蝙蝠侠'],
  }
},

list就是我们存放超级英雄的数组了，
用我们之前学过的循环的知识来把数组里的内容显示到页面上，
在template里增加一个ul，ul里面是li，用来显示英雄的名字

<ul>
  <li v-for="(item, index) in list" :key="index">
        {{ item }}
  </li>
</ul>

这里要注意，在v-for这个元素上多了一个key的属性，可以是在使用v-for时必须要有的一个属性（你不写编辑器也会提醒你）
这里:key的这个冒号表示这个值是动态绑定，完整写法是v-bind:,但是实际开发中肯定是写简写比较方便，所以以后所有的v-bind:都会简写为:
还有一点在v-for循环里的key要求必须唯一，不能重复，在实际开发中最好的写法就是后台返回的数据中基本都会有id这个字段，把这个字段绑定到key上就行了，如果实在没有唯一、不重复的字段，那就用索引index讲究一下了，就像我们现在一样。

2.添加新的超级英雄

我们已经把备案的超级英雄显示出来了，现在又有了新的超级英雄完成了备案，我们要把他们添加进来，就需要一个添加的功能

需求是有一个添加按钮，
点击按钮弹出一个对话框，
在里面的输入框里输入超级英雄的名字，
点击确定后把英雄的名字添加到列表里
1）我们在data里增加两个数据，inputContent用于绑定输入框里的值，showAddDialog用于控制添加英雄的弹窗是否显示，正常状态下这个弹窗应该是隐藏的，所以它的初始值应该是false

data() {
    return {
      list: ['钢铁侠', '蝙蝠侠'],
      inputContent: '', // 新增
      showAddDialog: false,// 新增
    }
  },

2)下面来在template写弹窗的html结构

<div class="dialog-box" v-show="showAddDialog">
  <div class="dialog-content">
    <input type="text" v-model="inputContent" />
    <br />
    <button type="button" @click="onConfirm">确定</button>
  </div>
</div>

用showAddDialog控制整个弹框的显示隐藏，用inputContent绑定了input的输入内容，下面我们来实现点击确定按钮的回调函数onConfirm
3）确定按钮逻辑
我们在export default{}对象里添加methods对象，在这里面添加方法

methods: {
    onConfirm() {
      this.showAddDialog = false
      this.list.push(this.inputContent)
      this.inputContent = ''
    },
},

在点击确定是做了三件事，
①this.showAddDialog = false 隐藏弹窗
②this.list.push(this.inputContent) 把输入框里输入的名字加到我们的超级英雄的数组里
③this.inputContent = '' 把输入框里值重新置空，方便下次点开时候重新输入
4)添加增加的按钮，点击后出现弹框
在template增加html代码

<button type="button" @click="onAdd">增加</button>

在methods里增加onAdd函数

onAdd() {
  this.showAddDialog = true
},

只要把showAddDialog设置为true，弹框就显示出来了
到这里，我们添加超级英雄的功能也实现了

3.删除超级英雄

有了添加也得有删除功能，我们现在就来实现删除
我们在每个超级英雄的名字后面增加一个span标签，作为删除按钮

<ul>
  <li v-for="(item, index) in list" v-bind:key="index">
     {{ item }}<span class="del" @click="onDel(index)">删除</span>
  </li>
</ul>

这个删除按钮有一个click时间的绑定，调用了onDel这个方法，并且传了一个index参数，把当前这一项的索引传了过去
然后在methods添加onDel方法

onDel(index) {
   this.list.splice(index, 1)
},

这里调用的splice方法，删除一个索引为index的元素

现在展示、增加、删除的方法都完成了，下面是完整的代码

<template>
  <div>
    <h1>超级英雄备案管理系统</h1>
    <div>
      <button type="button" @click="onAdd">增加</button>
    </div>
    <ul>
      <li v-for="(item, index) in list" v-bind:key="index">
        {{ item }}<span class="del" @click="onDel(index)">删除</span>
      </li>
    </ul>
    <div class="dialog-box" v-show="showAddDialog">
      <div class="dialog-content">
        <input type="text" v-model="inputContent" />
        <br />
        <button type="button" @click="onConfirm">确定</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      list: ['钢铁侠', '蝙蝠侠'],
      inputContent: '',
      showAddDialog: false,
    }
  },
  methods: {
    onAdd() {
      this.showAddDialog = true
    },
    onConfirm() {
      this.showAddDialog = false
      this.list.push(this.inputContent)
      this.inputContent = ''
    },
    onDel(index) {
      this.list.splice(index, 1)
    },
  },
}
</script>

<style>
.del {
  margin-left: 10px;
  color: red;
  cursor: pointer;
}
.dialog-box {
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
}
.dialog-content {
  width: 500px;
  height: 200px;
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

其实这个小dome还有好多功能可以加，小伙伴可以自己试一试，

编辑超级英雄名称
添加超级英雄是，输入的内容判断，是否为空，是否过长
删除时给用户确认弹框
刷新页面时如何保存数据

这节课就到这里，希望小伙伴们可以自己写写，完成以后肯定有成就感