vue初探--编写表格组件

在项目当中，经常会有表格组件，包含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，在实例上提供不同的数据和方法。