Vue組件開(kāi)發(fā)

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

摘要：在學(xué)習(xí)的時(shí)候，發(fā)現(xiàn)有很多使用開(kāi)發(fā)的組件。本著學(xué)習(xí)的目的，自己也仿照寫(xiě)一些組件。使用編寫(xiě)組件文檔。通過(guò)屬性接收父組件傳遞過(guò)來(lái)的值，并對(duì)傳遞過(guò)來(lái)的值進(jìn)行類型驗(yàn)證。完整代碼請(qǐng)?jiān)L問(wèn)組件代碼

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

使用VuePress編寫(xiě)組件文檔。

單元測(cè)試：karma+mocha+chai+sinon。

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

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

完整代碼：組件代碼

接下來(lái)就是編寫(xiě)組件，首先以常用的組件Button為例。

通過(guò)props屬性接收父組件傳遞過(guò)來(lái)的值，并對(duì)傳遞過(guò)來(lái)的值進(jìn)行類型驗(yàn)證。

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
    }
}

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

完整代碼請(qǐng)?jiān)L問(wèn):組件代碼

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/109068.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

sutaking 2019-08-02 15:17 評(píng)論0 收藏0