显示效果
加上基本的css
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;
}
显示效果如下，
提取组件
我们是想要让表格成为单独的组件，所以我们定义一个叫做 demo-grid的组件，用它来生成表格
<div id="demo">
<form id="search">
Search <input name="query" >
</form>
<demo-grid>
</demo-grid>
</div>代码里面关于表格的那部分给放到组件模板里面，我们定义组件。也就是用script来定义,
<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注册组件模块，然后进行Vue的渲染
Vue.component('demo-grid',{
template:"#grid-template",
}); var demo = new Vue({
el:'#demo'
})
然后最后的效果是一样的，这个时候并没有数据流。
组件数据流
我们要让表格知道表格的头部和表格的内容，也就是有一个gridColumns和gridData，这个数据最开始放在Vue的Data里面
// 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">
