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

然后在这个小demo内里触及到了vue的一般指令: v-for v-model v-bind等。另有父组件和子组建的数据同享，过滤器等功能。

    HTML模板:

    <div id="example">
        <form id="search">
            Search <input name="query" v-model="searchQuery"/>
        </form>
        <demo-grid
            :table-content = "gridContent"
            :table-header = "gridHeader"
            :isA = "AorB"
            >
        </demo-grid>
    </div>
    
    <scirpt type="text/x-template" id="grid-template">
        <ul class="table-header" @click="changeData">
            <li class="table-cell" v-for="item in tableHeader">{{item}}</li>
        </ul>
        <div class="table-content">
            <div class="table-row" v-for="item in tableContent  | filterBy filterKey in 'a' | orderBy 'a' soryKey">
                <div class="table-cell">{{item.a}}</div>
                <div class="table-cell">{{item.b}}</div>
                <div class="table-cell">{{item.c}}</div>
                <div class="table-cell">{{item.d}}</div>
            </div>
        </div>
    </script>

首先在模板文件内里：

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

• <script type="text/x-template"></script>这时刻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就在<script type="text/x-template" id="grid-template"></script>供应的模板文件。

• 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
    },
];

唉。下次照样上动图吧- –

今后基本上遇到这类运用表格显现数据的组件。直接实例化一个vm，在实例上供应差别的数据和要领。