<div id="example"> 
 <my-component></my-component>
</div>edx

<div id="example"> 
<div>A custom component!</div>
</div>

// 定义
var MyComponent = Vue.extend({
 template: '<div>A custom component!</div>'
})

// 注册
 Vue.component('my-component', MyComponent)
// 创建根实例
new Vue({
 el: '#example'
})

var Child = Vue.extend({ /* ... */ })
var Parent = Vue.extend({
 template: '...',
 components: {
 // <my-component> 只能用在父组件模板内
 'my-component': Child
 }
})

<div id="demo">
 <form id="search">
 Search <input name="query">
 </form>
<table>
 <thead>
 <tr>
 <th>name</th>
 <th>power</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>Jack Chan</td>
 <td>7000</td>
 </tr>
 </tbody>
</table>
</div>

body {
 font-family: Helvetica Neue, Arial, sans-serif;
 font-size: 14px;
 color: #444;
}

table {
 border: 2px solid #42b983;
 border-radius: 3px;
 background-color: #fff;
}

th {
 background-color: #42b983;
 color: rgba(255,255,255,0.66);
 cursor: pointer;
 -webkit-user-select: none;
 -moz-user-select: none;
 -user-select: none;
}

td {
 background-color: #f9f9f9;
}

th, td {
 min-width: 120px;
 padding: 10px 20px;
}

#search {
 margin-bottom: 10px;
}

<div id="demo">
 <form id="search">
 Search <input name="query" >
 </form>
 <demo-grid>
 </demo-grid>
</div>

<script type="text/x-template" id="grid-template">
 <table>
 <thead>
 <tr>
  <th>name</th>
  <th>power</th>
 </tr>
 </thead>
 <tbody>
 <tr>
  <td>Jack Chan</td>
  <td>7000</td>
 </tr>
 </tbody>
 </table>
</script>

 Vue.component('demo-grid',{
 template:"#grid-template",
 });

 var demo = new Vue({
 el:'#demo'
 })

 // bootstrap the demo
 var demo = new Vue({
 el: '#demo',
 data: {
  gridColumns: ['name', 'power'],
  gridData: [
  { name: 'Chuck Norris', power: Infinity },
  { name: 'Bruce Lee', power: 9000 },
  { name: 'Jackie Chan', power: 7000 },
  { name: 'Jet Li', power: 8000 }
  ]
 }
 })

<demo-grid
  :data="gridData"
  :columns="gridColumns">
 </demo-grid>

 Vue.component('demo-grid',{
 template:"#grid-template",
 props: {
  data: Array,
  columns: Array
 }
 });

<script type="text/x-template" id="grid-template">
 <table>
 <thead>
 <tr>
  <th v-for="key in columns">{{key}}</th>
 </tr>
 </thead>
 <tbody>
 <tr v-for="entry in data">
  <td v-for="key in columns">{{entry[key]}}</td>
 </tr>
 </tbody>
 </table>
</script>

 <form id="search">
 Search <input name="query" v-model="searchQuery">
 </form>

 var demo = new Vue({
 el: '#demo',
 data: {
  searchQuery: '',
  ...
 })

 <demo-grid
  :data="gridData"
  :columns="gridColumns"
  :filter-key="searchQuery">
 </demo-grid>

 Vue.component('demo-grid', {
 template: '#grid-template',
 props: {
  data: Array,
  columns: Array,
  filterKey: String
 }
})

<tr v-for="
 entry in data
 | filterBy filterKey>
  <td v-for="key in columns">
  {{entry[key]}}
  </td>
 </tr>

  <th v-for="key in columns"
  @click="sortBy(key)"
  :class="{active: sortKey == key}">
  {{key | capitalize}}
  <span class="arrow">
  </span>
  </th>

.arrow {
 display: inline-block;
 vertical-align: middle;
 width: 0;
 height: 0;
 margin-left: 5px;
 opacity: 0.66;
}

.arrow.asc {
 border-left: 4px solid transparent;
 border-right: 4px solid transparent;
 border-bottom: 4px solid #fff;
}

.arrow.dsc {
 border-left: 4px solid transparent;
 border-right: 4px solid transparent;
 border-top: 4px solid #fff;
}

 // register the grid component
 Vue.component('demo-grid', {
 template: '#grid-template',
 ...
 data: function () {
  var sortOrders = {}
  this.columns.forEach(function (key) {
  sortOrders[key] = 1
  })
  return {
  sortKey: 'name',
  sortOrders: sortOrders
  }
 }

 <tbody>
 <tr v-for="
 entry in data
 | filterBy filterKey
 | orderBy sortKey sortOrders[sortKey]">
  <td v-for="key in columns">
  {{entry[key]}}
  </td>
 </tr>
 </tbody>

<th v-for="key in columns"
  @click="sortBy(key)"
  :class="{active: sortKey == key}">
  {{key | capitalize}}
 <span class="arrow"
  :class="sortOrders[key] > 0 ? 'asc' : 'dsc'">
 </span>
 </th>

th.active .arrow {
 opacity: 1;
}

 // register the grid component
 Vue.component('demo-grid', {
 template: '#grid-template',
 props: {
  ...
 },
 data: function () {
 ...
 },
 methods: {
  sortBy: function (key) {
  this.sortKey = key
  this.sortOrders[key] = this.sortOrders[key] * -1
  }
 }
 });