vue初探编写表格组件

在项目当中，经常会有表格组件，包含2部分，其一为table-header,其二为table-content

然后在这个小demo里面涉及到了vue的个别指令: v-for v-model v-bind等。还有父组件和子组建的数据共享，过滤器等功能。


HTML模板:


首先在模板文件里面：

• #global-table提供了模板容器，同时提供了vue实例化的选择符。容器里面包含2部分，其一为input提供过滤器的入口,其二为demo-grid表格组件。

• 这时HTML5提供的模板标签，可以写在html文件里面，但是不在网页上面出现。可通过选择符获取模板.

• v-for 基于原数据将元素或者模板块重复数次。

• v-bind 数据绑定，简写形式为:prop.在父组件和子组件的通讯中，必须要在子组件里面声明prop。

  • :prop.sync提供双向绑定(只能用于prop绑定)

  • :prop.once提供单向绑定(只能用于prop绑定)

• orderBy name sortKey 按照name来进行排序,sortkey默认是1，为升序，sortKey为-1的时候为降序。

• filterBy filterKey in name在name这个过滤范围内进行过滤


vm实例化:
new Vue({
el: '#example',
data: {
gridContent: [],
gridHeader: ['目标', '日志', '日期', '状态'],
AorB: false
}
}); Vue.component('demo-grid', {
template: '#grid-template',
props: {
tableContent: Array,
tableHeader: Array,
isA: Boolean
},
data: function() {
//对于实例数据的处理
return {

}
},
methods: function() {
changeData: function() {
!this.isA;
if(this.isA) {
return this.tableCOntent= itemsB;
}
return this.tableCOntent= itemsA;
}
}
});

• new Vue({}) 创造一个vue的根实例。这个实例事实上就是vue这个MVVM模式中的ViewModel.在里面传入的对象包含了数据，模板，挂载方法，生命周期钩子等选项。

• #el为实例提供挂载的元素

• data object | Function vue实例的数据对象。如果是编写Component则必须是Function.

• Vue.component({}) 注册组件的语法糖。传入一个可配置的对象

• template实例模板。模板默认替换挂载元素。如果replace选项为false,模块将插入挂载元素内。本demo就在提供的模板文件。

• props Array | Object 使用父组件的数据。如果是Object类型的可以进行类型检查，自定义验证，默认值等。

• methods Object 实例方法。实例可以直接访问这些方法。


//模拟出来的数据
var itemsA = [
{
a: 'asdasdsad',
b: 1,
c: 1,
d: 1
},
{
a: 'sdfsdfdsfewrw',
b: 2,
c: 2,
d: 2
},
{
a: 'sdfsfsdfs',
b: 3,
c: 3,
d: 3
}
];
var itemsB = [
{
a: 'sdfsdfsewrewrc',
b: 11,
c: 11,
d: 11
},
{
a: 'sdfsdfeewb',
b: 22,
c: 22,
d: 22
},
{
a: 'qwewqewwwea',
b: 33,
c: 33,
d: 33
},
];

唉。下次还是上动图吧- &＃8211;

以后基本上碰到这种使用表格呈现数据的组件。直接实例化一个vm，在实例上提供不同的数据和方法。