Vue组件开发

kamushin233 发布于2019-08-26 13:34 / 1640人阅读

摘要：在学习的时候，发现有很多使用开发的组件。本着学习的目的，自己也仿照写一些组件。使用编写组件文档。通过属性接收父组件传递过来的值，并对传递过来的值进行类型验证。完整代码请访问组件代码

在学习vue的时候，发现有很多使用vue开发的ui组件。本着学习的目的，自己也仿照Element写一些组件。

使用VuePress编写组件文档。

单元测试：karma+mocha+chai+sinon。

文档预览地址：预览链接

使用VuePress编辑文档的代码访问：组件文档
关于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接收父组件传递的值，可以实现各种功能不一样的button组件。

完整代码请访问:组件代码

GPU云服务器云服务器 vue组件开发 vue组件 vue父子组件通讯 vue轮播组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109068.html

Vue UI框架库开发介绍

摘要：本文大家了解如何开发一个框架。伪组件化我们知道，组件化开发的目的是解耦功能，提高代码复用率和开发效率，进而加快项目开发周期与产品发布速度。公司自有的库一般不可能发布到仓库。这样我们就实现了插件的开发。主要就是利用这个特性开发的。本文大家了解如何开发一个Vue UI框架。Vue UI框架demo 源码地址： https://github.com/xubaodian/... 。平时在项...

liangdas 2019-08-23 14:30 评论0 收藏0
使用Vue快速开发单页应用－主体结构

摘要：本文以及后面相应文章，主要是相关技术栈来快速的实现单页应用开发。原文出处其他使用快速开发单页应用主体结构使用快速开发单页应用使用快速开发单页应用登录页面使用快速开发单页应用功能组件与路由组件通信本文所涉及代码全在vue-cnode 单页应用，即在一个页面集成系统中所有功能，整个应用只有一个页面。因为路由的控制在前端，单页面应用在页面切换时比传统页面更快，从而在前端体验更好。将逻辑从...

dcr309duan 2019-08-20 10:29 评论0 收藏0
vue 前端项目技术选型、开发工具、周边生态

摘要：有目录结构书写方式组件集成项目构建等的约束，整个应用中是没有文件的，所有的响应都是动态渲染的，包括里面的元信息路径等。更多参考细说后端模板渲染客户端渲染中间层服务器端渲染开发工具开发时主要会用到的工具。 vue 前端项目技术选型、开发工具、周边生态声明：这不是一篇介绍 Vue 基础知识的文章，需要熟悉 Vue 相关知识主架构：vue, vue-router, vuex UI 框...

Awbeci 2019-08-30 15:54 评论0 收藏0
vue 前端项目技术选型、开发工具、周边生态

摘要：有目录结构书写方式组件集成项目构建等的约束，整个应用中是没有文件的，所有的响应都是动态渲染的，包括里面的元信息路径等。更多参考细说后端模板渲染客户端渲染中间层服务器端渲染开发工具开发时主要会用到的工具。 vue 前端项目技术选型、开发工具、周边生态声明：这不是一篇介绍 Vue 基础知识的文章，需要熟悉 Vue 相关知识主架构：vue, vue-router, vuex UI 框...

enali 2019-08-23 14:14 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

sutaking 2019-08-02 15:17 评论0 收藏0