单文件组件

单文件组件（.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= 'form-control'
        v-model= 'newName'
      />
    </label>
    <button @click="addItem" class="btn">添加</button>
  </div>
</template>

组件配置

<script>
export default {
  name: 'TopContent',
  data () {
    return {
      newID: '',
      newName: ''
    }
  },
  props: {
    list: {
      type: Array,
      required: true
    }
  },
  methods: {
    addItem () {
      this.$emit('add', this.newID, this.newName, this.list)
      this.newID = this.newName = ''
    }
  }
}
</script>

2、TableRow.vue

模板渲染部分：

<template>
  <tr>
    <td>{{ item.id }}</td>
    <td v-text="item.name"></td>
    <td>{{ item.ctime }}</td>
    <td>
      <a href="" @click.prevent="$emit('delete', item.id)">删除</a>
    </td>
  </tr>
</template>

组件：

<script>
export default {
  name: 'TableRow',
  props: {
    item: {
      type: Object,
      required: true
    }
  }
}
</script>

3、MainContent.vue

模板渲染

<template>
  <div>
    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">添加信息</h3>
      </div>
      <TopContent
        v-bind:list = 'list'
        v-on:add = 'add'
      />
    </div>
    <table class="table table-bordered table-hover table-striped">
      <thead>
      <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Ctime</th>
        <th>Operation</th>
      </tr>
      </thead>
      <tbody>
        <TableRow
          v-for='item in list'
          v-bind:key= 'item.id'
          v-bind:item='item'
          v-on:delete='deleteItem'
        >
      </TableRow>
      </tbody>
    </table>
  </div>
</template>

组件和数据属性声明，方法声明

<script>
import TableRow from './TableRow'
import TopContent from './TopContent'
export default {
  name: 'MainContent',
  components: {TableRow, TopContent},
  data () {
    return {
      list: [
        { id: 1, name: 'name1', ctime: new Date() },
        { id: 2, name: 'name2', ctime: new Date() }
      ]
    }
  },
  methods: {
    deleteItem (id) {
      var index = this.list.findIndex(item => {
        if (item.id === id) {
          return true
        }
      })
      this.list.splice(index, 1)
    },
    add (id, name, list) {
      var temp = { id: id, name: name, ctime: new Date() }
      list.push(temp)
      id = name = ''
    }
  }
}
</script>

4、将MainContent组件引入到App.vue中

5、保存运行npm run dev即可

完整源码：Vue单文件组件添加删除列表行