分析vuejs官网上一个表格组件的实现过程。
原址：https://cn.vuejs.org/v2/examples/grid-component.html

1、新建一个demo和vue实例

<!--html-->
<div id="demo"></div>

//js
var demo=new Vue({
  el:"#demo"
});

2、新建一个Vue实例，并用data声明一个数据对象，定义表格所需的数据

var demo=new Vue({
    el:"#demo",
    data:{
        //表格的头部部分数据
        gridColumns: ['name', 'power'],
        //表格的主体部分数据
        gridData: [
             { name: 'Chuck Norris', power: Infinity },
             { name: 'Bruce Lee', power: 9000 },
             { name: '*', power: 7000 },
             { name: 'Jet Li', power: 8000 }
        ],
        //input组件中v-model双向绑定的数据值
        searchQuery : ''
    }
});

3、注册一个子组件组件demo-grid，并在父实例的模块中以自定义元素<demo-grid></demo-grid>的形式使用
要让子组件使用父组件的数据，我们需要通过props选项。子组件要显式的用props选项声明它期待获得的数据

<!--html-->
<div id="demo">
     <!--搜索框-->
     <form id="search">
          <!--用v-model实现了input输入框数据的双向绑定-->
          Search <input name="query" v-model="searchQuery">
     </form>

     <!--表格-->
     <demo-grid
          <!--这里是绑定了几个自定义属性，属性值为Vue实例data中的数据值-->
          :data="gridData"
          :columns="gridColumns"
          :filter-key="searchQuery"
     ></demo-grid>
</div>

//js 创建一个子组件
Vue.component("demo-grid",{
  template:"#grid-template",   
    props: {     
      //获得父组件的数据并定义了数据类型
      data: Array,
      columns: Array,
      filterKey: String
    },
});

4、X-template
定义模版的方式：在 JavaScript 标签里使用 text/x-template 类型，并且指定一个 id="grid-template"，所定义的就相当于上文子组件中template的内容

<!--html-->
<!--X-template定义的模板放到html标签中-->

<script type="text/x-template" id="grid-template">
  <table>
    <thead>
      <tr>
        <th
          <!--遍历columns数组(即:["name","power"])，取出每一项-->
          v-for="key in columns"
          <!--注册一个click事件，事件函数为sortBy并将点击的相应的键值传参到函数里面去-->
          @click="sortBy(key)"
          <!--如果两者相等，则应用active样式-->
          :class="{ active: sortKey == key }"
        >
         <!--使用capitalize过滤值-->
          {{ key | capitalize }}
         <!--箭头符号样式-->
          <span class="arrow" :class="sortOrders[key] > 0 ? 'asc' : 'dsc'"></span>
        </th>
      </tr>
    </thead>
    <tbody>
      <!--遍历计算属性中filteredData计算后返回的data值-->
      <tr v-for="entry in filteredData">
        <td v-for="key in columns">
          {{entry[key]}}
        </td>
      </tr>
    </tbody
  </table>
</script>

5、为子组件（demo-grid）继续添加选项对象
①data
定义子组件内部的数据对象。
子组件这里的data必须是一个函数。

data: function () {
  //定义一个sortOrders空对象
  var sortOrders = {};
  //遍历columns值(也就是父组件中的数据值['name', 'power']),将每一项的值设为1，即:{name:1,power:1}
  this.columns.forEach(function (key) {
    sortOrders[key] = 1
  });
  //返回一个空字符串值sortKey(下文会讲作用)和sortOrders对象
  return {
    sortKey: '',
    sortOrders: sortOrders
  };
},

②methods方法

methods: {
  //当在父组件tr那里点击了click事件，就会调用这个函数
  sortBy: function (key) {
    this.sortKey = key
    this.sortOrders[key] = this.sortOrders[key] * -1
  }
}

③computed计算属性

  computed: {
    filteredData: function () {
      var sortKey = this.sortKey
      var filterKey = this.filterKey && this.filterKey.toLowerCase()
      var order = this.sortOrders[sortKey] || 1
      var data = this.data
      if (filterKey) {
        /*原本的data数据值
        * data:[
        *   { name: 'Chuck Norris', power: Infinity },
        *   { name: 'Bruce Lee', power: 9000 },
        *   { name: '*', power: 7000 },
        *   { name: 'Jet Li', power: 8000 }
        * ]
        */  
        //filter函数方法会筛选出data数组中为true的项
        data = data.filter(function (row) {
        //然后将里面的每一项（也就是对象）中的键值进行与输入的filterKey值进行匹配搜索，
        //大于-1则将该项返回组成新的data
          return Object.keys(row).some(function (key) {
            return String(row[key]).toLowerCase().indexOf(filterKey) > -1
          })
        })
      }
      if (sortKey) {
        //复制一份data数据，然后进行sort排序，组成新的表格排序
        data = data.slice().sort(function (a, b) {
          a = a[sortKey]
          b = b[sortKey]
          return (a === b ? 0 : a > b ? 1 : -1) * order
        })
      }
      return data
    }
  },

④filters

 filters: {
    capitalize: function (str) {
      return str.charAt(0).toUpperCase() + str.slice(1)
    }
  }

6、最后子组件就是这样：

Vue.component('demo-grid', {
  template: '#grid-template',
  props: {
    data: Array,
    columns: Array,
    filterKey: String
  },
  data: function () {
    var sortOrders = {}
    this.columns.forEach(function (key) {
      sortOrders[key] = 1
    })
    return {
      sortKey: '',
      sortOrders: sortOrders
    }
  },
  computed: {
    filteredData: function () {
      var sortKey = this.sortKey
      var filterKey = this.filterKey && this.filterKey.toLowerCase()
      var order = this.sortOrders[sortKey] || 1
      var data = this.data
      if (filterKey) {
        data = data.filter(function (row) {
          return Object.keys(row).some(function (key) {
            return String(row[key]).toLowerCase().indexOf(filterKey) > -1
          })
        })
      }
      if (sortKey) {
        data = data.slice().sort(function (a, b) {
          a = a[sortKey]
          b = b[sortKey]
          return (a === b ? 0 : a > b ? 1 : -1) * order
        })
      }
      return data
    }
  },
  filters: {
    capitalize: function (str) {
      return str.charAt(0).toUpperCase() + str.slice(1)
    }
  },
  methods: {
    sortBy: function (key) {
      this.sortKey = key
      this.sortOrders[key] = this.sortOrders[key] * -1
    }
  }
})