分析vuejs官網(wǎng)上一個(gè)表格組件的實(shí)現(xiàn)過(guò)程。
原址：https://cn.vuejs.org/v2/examples/grid-component.html

1、新建一個(gè)demo和vue實(shí)例

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

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

2、新建一個(gè)Vue實(shí)例，并用data聲明一個(gè)數(shù)據(jù)對(duì)象，定義表格所需的數(shù)據(jù)

var demo=new Vue({
    el:"#demo",
    data:{
        //表格的頭部部分?jǐn)?shù)據(jù)
        gridColumns: ['name', 'power'],
        //表格的主體部分?jǐn)?shù)據(jù)
        gridData: [
             { name: 'Chuck Norris', power: Infinity },
             { name: 'Bruce Lee', power: 9000 },
             { name: 'Jackie Chan', power: 7000 },
             { name: 'Jet Li', power: 8000 }
        ],
        //input組件中v-model雙向綁定的數(shù)據(jù)值
        searchQuery : ''
    }
});

3、注冊(cè)一個(gè)子組件組件demo-grid，并在父實(shí)例的模塊中以自定義元素<demo-grid></demo-grid>的形式使用
要讓子組件使用父組件的數(shù)據(jù)，我們需要通過(guò)props選項(xiàng)。子組件要顯式的用props選項(xiàng)聲明它期待獲得的數(shù)據(jù)

<!--html-->
<div id="demo">
     <!--搜索框-->
     <form id="search">
          <!--用v-model實(shí)現(xiàn)了input輸入框數(shù)據(jù)的雙向綁定-->
          Search <input name="query" v-model="searchQuery">
     </form>

     <!--表格-->
     <demo-grid
          <!--這里是綁定了幾個(gè)自定義屬性，屬性值為Vue實(shí)例data中的數(shù)據(jù)值-->
          :data="gridData"
          :columns="gridColumns"
          :filter-key="searchQuery"
     ></demo-grid>
</div>

//js 創(chuàng)建一個(gè)子組件
Vue.component("demo-grid",{
  template:"#grid-template",   
    props: {     
      //獲得父組件的數(shù)據(jù)并定義了數(shù)據(jù)類型
      data: Array,
      columns: Array,
      filterKey: String
    },
});

4、X-template
定義模版的方式：在 JavaScript 標(biāo)簽里使用 text/x-template 類型，并且指定一個(gè) id="grid-template"，所定義的就相當(dāng)于上文子組件中template的內(nèi)容

<!--html-->
<!--X-template定義的模板放到html標(biāo)簽中-->

<script type="text/x-template" id="grid-template">
  <table>
    <thead>
      <tr>
        <th
          <!--遍歷columns數(shù)組(即:["name","power"])，取出每一項(xiàng)-->
          v-for="key in columns"
          <!--注冊(cè)一個(gè)click事件，事件函數(shù)為sortBy并將點(diǎn)擊的相應(yīng)的鍵值傳參到函數(shù)里面去-->
          @click="sortBy(key)"
          <!--如果兩者相等，則應(yīng)用active樣式-->
          :class="{ active: sortKey == key }"
        >
         <!--使用capitalize過(guò)濾值-->
          {{ key | capitalize }}
         <!--箭頭符號(hào)樣式-->
          <span class="arrow" :class="sortOrders[key] > 0 ? 'asc' : 'dsc'"></span>
        </th>
      </tr>
    </thead>
    <tbody>
      <!--遍歷計(jì)算屬性中filteredData計(jì)算后返回的data值-->
      <tr v-for="entry in filteredData">
        <td v-for="key in columns">
          {{entry[key]}}
        </td>
      </tr>
    </tbody
  </table>
</script>

5、為子組件（demo-grid）繼續(xù)添加選項(xiàng)對(duì)象
①data
定義子組件內(nèi)部的數(shù)據(jù)對(duì)象。
子組件這里的data必須是一個(gè)函數(shù)。

data: function () {
  //定義一個(gè)sortOrders空對(duì)象
  var sortOrders = {};
  //遍歷columns值(也就是父組件中的數(shù)據(jù)值['name', 'power']),將每一項(xiàng)的值設(shè)為1，即:{name:1,power:1}
  this.columns.forEach(function (key) {
    sortOrders[key] = 1
  });
  //返回一個(gè)空字符串值sortKey(下文會(huì)講作用)和sortOrders對(duì)象
  return {
    sortKey: '',
    sortOrders: sortOrders
  };
},

②methods方法

methods: {
  //當(dāng)在父組件tr那里點(diǎn)擊了click事件，就會(huì)調(diào)用這個(gè)函數(shù)
  sortBy: function (key) {
    this.sortKey = key
    this.sortOrders[key] = this.sortOrders[key] * -1
  }
}

③computed計(jì)算屬性

  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數(shù)據(jù)值
        * data:[
        *   { name: 'Chuck Norris', power: Infinity },
        *   { name: 'Bruce Lee', power: 9000 },
        *   { name: 'Jackie Chan', power: 7000 },
        *   { name: 'Jet Li', power: 8000 }
        * ]
        */  
        //filter函數(shù)方法會(huì)篩選出data數(shù)組中為true的項(xiàng)
        data = data.filter(function (row) {
        //然后將里面的每一項(xiàng)（也就是對(duì)象）中的鍵值進(jìn)行與輸入的filterKey值進(jìn)行匹配搜索，
        //大于-1則將該項(xiàng)返回組成新的data
          return Object.keys(row).some(function (key) {
            return String(row[key]).toLowerCase().indexOf(filterKey) > -1
          })
        })
      }
      if (sortKey) {
        //復(fù)制一份data數(shù)據(jù)，然后進(jìn)行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
    }
  }
})