使用Vue单文件组件添加删除列表

单文件组件

单文件组件（.vue）包含三个部分：
1、template：放HTML
2、script：放JS
3、style：放CSS

创建一个Vue项目

前提：安装nodejs&git

1、安装vue和vue-cli

// 最新稳定版
npm install -g vue
// 安装vue-cli脚手架构建工具
npm install -g vue-cli

2、安装webpack和weback-cli

npm install -g webpack
npm install -g webpack-cli

3、新建项目

方式一：npm终端新建项目

// 创建一个基于 webpack 模板的新项目
vue init webpack my-project
// 这里需要进行一些配置，默认回车即可

方式二：用webstorm创建一个新的Vue项目
a、点击菜单File–>New–>project，打开新建项目窗口，进行项目配置

b、选择vue.js，对项目进行命名，点击next，过程中会有其他信息的配置，并询问你是否需要安装vue-router，根据自身情况选择

4、运行项目

方式一：转到项目名称路径下，在终端输入

npm run dev
/或
npm run build

方式二：webstorm打开终端，在webstorm中输入上述指令
打开webstorm的终端方式：菜单栏点击Vew —> Tool Windows -->Terminal

在终端中输入npm run dev，项目可在http://localhost:8080下打开运行

Vue的项目结构

项目结构如下：

├── build/ # Webpack 配置目录
├── dist/ # build 生成的生产环境下的项目
├── config/ # Vue基本配置文件，可以设置监听端口，打包输出等
├── node_modules/ # 依赖包，通常执行npm i会生成
├── src/ # 源码目录（开发的项目文件都在此文件中写）
│ ├── assets/ # 放置需要经由 Webpack 处理的静态文件，通常为样式类文件，如css，sass以及一些外部的js
│ ├── components/ # 公共组件
│ ├── routes/ # 路由，此处配置项目路由
│ ├── App.vue # 根组件
│ ├── main.js # 入口文件
├── index.html # 主页，打开网页后最先访问的页面
├── static/ # 放置无需经由 Webpack 处理的静态文件，通常放置图片类资源
├── .babelrc # Babel 转码配置
├── .editorconfig # 代码格式
├── .eslintignore # （配置）ESLint 检查中需忽略的文件（夹）
├── .eslintrc # ESLint 配置
├── .gitignore # （配置）在上传中需被 Git 忽略的文件（夹）
├── package.json # 本项目的配置信息，启动方式
├── package-lock.json # 记录当前状态下实际安装的各个npm package的具体来源和版本号
├── README.md # 项目说明（很重要，便于其他人看懂）

我们需要在src文件下进行文件的操作
默认情况下，构建的项目含有一个HelloWorld.vue的单文件组件，为了实现下图对列表进行添加、删除操作

实现思路

总体思路需要list数组存储数据信息，并且加入删除（delete）、添加（add）方法，并表单输入框数据输入进行双向绑定。
主要是将页面分成了三个组件：
1、TopContent.vue负责顶部的输入框监听和添加按钮的操作
2、TableRow.vue负责对表格每行数据的展示和对应行的删除
3、MainContent.vue负责整合TopContent和整体表格展示
4、MainContent.中定义的list和add delete方法需要向下传递给子组件，子组件通过$emit触发方法

1、TopContent.vue

模板渲染部分：

<template>
  <div class="panel-body form-inline">
    <label>
      ID:
      <input
        type= 'text'
        class= 'form-control'
        v-model= 'newID'
      />
    </label>
    <label>
      Name:
      <input
        type= 'text'
        class=