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，在實例上提供不一樣的數據和方法。