vue初探--編寫表格組件

dabai 發布于2019-08-19 17:12 / 2805人閱讀

摘要：容器里面包含部分，其一為提供過濾器的入口其二為表格組件。數據綁定，簡寫形式為在父組件和子組件的通訊中，必須要在子組件里面聲明。如果是編寫則必須是注冊組件的語法糖。下次還是上動圖吧以后基本上碰到這種使用表格呈現數據的組件。

在項目當中，經常會有表格組件，包含2部分，其一為table-header,其二為table-content

然后在這個小demo里面涉及到了vue的個別指令: v-for v-model v-bind等。還有父組件和子組建的數據共享，過濾器等功能。

    HTML模板:

    
        
            Search 
        
        
        
    
    
    
        
            {{item}}
        
        
            
                {{item.a}}
                {{item.b}}
                {{item.c}}
                {{item.d}}

首先在模板文件里面：

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

唉。下次還是上動圖吧- -

以后基本上碰到這種使用表格呈現數據的組件。直接實例化一個vm，在實例上提供不同的數據和方法。

GPU云服務器云服務器 vue組件 vue組件開發 vue父子組件通訊 vue輪播組件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/78291.html

Vue.js 官方示例初探（ES6 改寫）

摘要：雙嘆號強制類型轉換為布爾值。官方示例代碼用注冊了全局組件，會把自動注冊為屬性，所以沒有手動寫屬性。如果對象是響應的，將觸發視圖更新。這是用來布爾值，又學了一招和分別代表單擊和雙擊事件綁定。如果覺得有幫助，歡迎 star哈~ https://github.com/jiangjiu/blog-md/issues/11 感謝作者 @尤小右大大邊寫的超級帶感的 Vue.js 前端框架，贈送...

Jason 2019-08-19 18:40 評論0 收藏0
初探vue-cli 3.0

摘要：當你將一系列的特性選擇完畢后最后回提示你是否將已選項保存成一個快速將來可復用的當你選擇保存時，被保存的將會存在用戶的目錄下一個名為的文件里。準備工作 npm install -g @vue/cli or yarn global add @vue/cli 安裝需要Node.js8.9以上版本，安裝完成后可以通過vue --version來驗證是否安裝成功項目創建 vue create...

superPershing 2019-08-23 12:23 評論0 收藏0
從源碼看Element UI Table組件實現思路

摘要：接下來來看一下是如何編寫一個組件的，在看源碼之前，首先還是要對他的組件的大致功能有一個了解，這樣我們在看源碼的時候才會知道這一段大概實現了什么功能。最后我實現的功能文檔以及最終的一個樣例在你實現一個組件過程中，一定要注意一下幾點將代碼模塊化并且分離。如果你將大量的邏輯或者是代碼都放在鉤子函數中（比如mounted），那么寫出來的組件代碼將非常丑陋，這樣子寫出的代碼也往往難以維護。...

moven_j 2019-08-20 16:32 評論0 收藏0
FE.TEST-前端測試初探

摘要：使用可以快速生成一個項目，其中包含了和以及覆蓋率統計的配置參考一個創建測試腳本的快速方法其他參考資料前端自動化測試概覽測試之使用對項目進行單元測試 showImg(https://segmentfault.com/img/bVbjfXr?w=600&h=317); 前言測試可以提供快速反饋，根據測試用例覆蓋代碼，從而提升代碼開發效率和質量。根據投入產出價值，通常迭代較快的業務邏輯不做...

Travis 2019-08-23 12:55 評論0 收藏0