如何写一个Vue组件

我下面写的是以.vue结尾的单文件组件的写法，是基于webpack构建的项目。

一个完整的vue组件会包括一下三个部分：

1. template：模板
2. js：逻辑
3. css ：样式

每个组件都有属于自己的模板，js和样式。如果将一个页面比喻成一间房子的话，组件就是房子里的客厅、卧室、厨房、厕所。如果把厨房单独拿出来的话，组件又可以是刀、油烟机...等等。就是说页面是由组件构成的，而组件也可以是组件构成的。这样就可以非常的灵活，耦合性也非常的低。

 首先来看看一个组件在不是在.vue文件内的写法：

Vue.component('simple-counter', {
  template: '<div id="inputBox"><input type="text"></div>',
  data () {         // 数据
    return {
      counter: 0
    }
  },
  methods: {
    // 写点方法
  },
  created () {
    // 生命钩子
  },
  computed: {
    // 计算属性
  }
})

那么template是用来干嘛的呢？

<template>
  <div id="inputBox">
    <input type="text">
  </div>
</template>
<!--
template就是这个组件的html，