Vue組件開發(fā)

kamushin233 發(fā)布于2019-08-26 13:34 / 1641人閱讀

摘要：在學(xué)習(xí)的時候，發(fā)現(xiàn)有很多使用開發(fā)的組件。本著學(xué)習(xí)的目的，自己也仿照寫一些組件。使用編寫組件文檔。通過屬性接收父組件傳遞過來的值，并對傳遞過來的值進行類型驗證。完整代碼請訪問組件代碼

在學(xué)習(xí)vue的時候，發(fā)現(xiàn)有很多使用vue開發(fā)的ui組件。本著學(xué)習(xí)的目的，自己也仿照Element寫一些組件。

使用VuePress編寫組件文檔。

單元測試：karma+mocha+chai+sinon。

文檔預(yù)覽地址：預(yù)覽鏈接

使用VuePress編輯文檔的代碼訪問：組件文檔
關(guān)于VuePress使用方法：博客園、掘金

完整代碼：組件代碼

接下來就是編寫組件，首先以常用的組件Button為例。

通過props屬性接收父組件傳遞過來的值，并對傳遞過來的值進行類型驗證。

props:{
    type:{
        type: String,
        validator (value) {
            return [
                "primary",
                "success",
                "info",
                "warning",
                "danger"
            ].indexOf(value)>-1;
        }
    },
    iconName:{
        type:String
    },
    iconSize:{
        type:String,
        default:"small"
    },
    iconPosition:{
        type: String,
        default: "left",
        validator(value){
            return[
                "left",
                "right"
            ].indexOf(value)>-1
        }
    },
    circle:{
        type: Boolean
    },
    disabled:{
        type: Boolean
    }
}

通過 props接收父組件傳遞的值，可以實現(xiàn)各種功能不一樣的button組件。

完整代碼請訪問:組件代碼

GPU云服務(wù)器云服務(wù)器 vue組件開發(fā) vue組件 vue父子組件通訊 vue輪播組件

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/109068.html

相關(guān)文章

Vue UI框架庫開發(fā)介紹

摘要：本文大家了解如何開發(fā)一個框架。偽組件化我們知道，組件化開發(fā)的目的是解耦功能，提高代碼復(fù)用率和開發(fā)效率，進而加快項目開發(fā)周期與產(chǎn)品發(fā)布速度。公司自有的庫一般不可能發(fā)布到倉庫。這樣我們就實現(xiàn)了插件的開發(fā)。主要就是利用這個特性開發(fā)的。本文大家了解如何開發(fā)一個Vue UI框架。Vue UI框架demo 源碼地址： https://github.com/xubaodian/... 。平時在項...

liangdas 2019-08-23 14:30 評論0 收藏0
使用Vue快速開發(fā)單頁應(yīng)用－主體結(jié)構(gòu)

摘要：本文以及后面相應(yīng)文章，主要是相關(guān)技術(shù)棧來快速的實現(xiàn)單頁應(yīng)用開發(fā)。原文出處其他使用快速開發(fā)單頁應(yīng)用主體結(jié)構(gòu)使用快速開發(fā)單頁應(yīng)用使用快速開發(fā)單頁應(yīng)用登錄頁面使用快速開發(fā)單頁應(yīng)用功能組件與路由組件通信本文所涉及代碼全在vue-cnode 單頁應(yīng)用，即在一個頁面集成系統(tǒng)中所有功能，整個應(yīng)用只有一個頁面。因為路由的控制在前端，單頁面應(yīng)用在頁面切換時比傳統(tǒng)頁面更快，從而在前端體驗更好。將邏輯從...

dcr309duan 2019-08-20 10:29 評論0 收藏0
vue 前端項目技術(shù)選型、開發(fā)工具、周邊生態(tài)

摘要：有目錄結(jié)構(gòu)書寫方式組件集成項目構(gòu)建等的約束，整個應(yīng)用中是沒有文件的，所有的響應(yīng)都是動態(tài)渲染的，包括里面的元信息路徑等。更多參考細說后端模板渲染客戶端渲染中間層服務(wù)器端渲染開發(fā)工具開發(fā)時主要會用到的工具。 vue 前端項目技術(shù)選型、開發(fā)工具、周邊生態(tài) 聲明：這不是一篇介紹 Vue 基礎(chǔ)知識的文章，需要熟悉 Vue 相關(guān)知識主架構(gòu)：vue, vue-router, vuex UI 框...

Awbeci 2019-08-30 15:54 評論0 收藏0
vue 前端項目技術(shù)選型、開發(fā)工具、周邊生態(tài)

摘要：有目錄結(jié)構(gòu)書寫方式組件集成項目構(gòu)建等的約束，整個應(yīng)用中是沒有文件的，所有的響應(yīng)都是動態(tài)渲染的，包括里面的元信息路徑等。更多參考細說后端模板渲染客戶端渲染中間層服務(wù)器端渲染開發(fā)工具開發(fā)時主要會用到的工具。 vue 前端項目技術(shù)選型、開發(fā)工具、周邊生態(tài) 聲明：這不是一篇介紹 Vue 基礎(chǔ)知識的文章，需要熟悉 Vue 相關(guān)知識主架構(gòu)：vue, vue-router, vuex UI 框...

enali 2019-08-23 14:14 評論0 收藏0
關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

sutaking 2019-08-02 15:17 評論0 收藏0