vue初探--編寫表格元件

weixin_34127717發表於2015-12-15
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，在例項上提供不同的資料和方法。

相關文章