Vue 2.0学习笔记:创建Button组件-阿里云开发者社区

开发者社区> 恍惚的二狗> 正文

Vue 2.0学习笔记:创建Button组件

简介: 在上一节中,咱们学习了Vue中怎么创建组件。在这篇文章中我们以按钮组件为例,了解了怎么注册全局组件和局部组件。并且通过这些基础知识,可以轻易的创建类似于HTML中button元素效果的按钮组件。但这个组件非常的简陋,和我们想像的组件相差甚远。
+关注继续查看

在上一节中,咱们学习了Vue中怎么创建组件。在这篇文章中我们以按钮组件为例,了解了怎么注册全局组件和局部组件。并且通过这些基础知识,可以轻易的创建类似于HTML中button元素效果的按钮组件。但这个组件非常的简陋,和我们想像的组件相差甚远。那么今天我们来看看,怎么在Vue中创建一个按钮组件。

以Bootstrap的按钮为例

很多人说Bootstrap很拙逼,灵活性不够。但我不这么认为,我是Bootstrap的粉丝,我一直很推崇Bootstrap。并不是因为其效果有多牛逼,我膜拜的是他的设计思想。别的不多说了,今天我们的目的是使用Vue来创建一个按钮组件。那么我们就用Bootstrap的按钮来举例。在Bootstrap中的按钮分为Buttons和Button组两个组件,今天先来看Buttons组件。

先来简单的回忆Bootstrap的Buttons组件,其效果和使用方式如下:

640?wx_fmt=png&wxfrom=5&wx_lazy=1

简单分析

该组件是从Bootstrap4中获取的。正如上图所示,按钮中有很多不同的类和参数,所以我们将创建一个组件来完成。该组件是可以双向绑定的,也可以用于不同的地方。

根据Bootstrap的按钮风格,我们将处理各种属性,比如:

  • btnText:按钮的文本

  • btnSize:按钮的大小,在Bootstrap中是通过btn-lgbtn-sm来控制

  • btnType:按钮的类型,在Bootstrap中是通过btn-primarybtn-secondarybtn-successbtn-dangerbtn-warningbtn-infobtn-lightbtn-dark等类名来控制

  • btnOutline:边框按钮,在Bootstrap中是通过btn-outline-primarybtn-outline-secondarybtn-outline-successbtn-outline-danger等类名来控制

  • btnActive:按钮的状态,它是一个布尔值,用来控制按钮是否是当前状态,在Bootstrap中,如果有active类名,表示按钮是当前状态(激活状态)

  • btnBlock:按钮是不是块级元素,它也是一个布尔值,在Bootstrap中通过btn-block类名来控制,如果有这个类名,按钮是一个块级元素

这是对于Bootstrap中单个按钮会碰到的各种样式风格。在BootStrap中,还有一个按钮组的概念:

640?wx_fmt=png

咱们先看看Vue怎么来写button组件。

创建按钮组件

通过前面的对Bootstrap组件的分析,可以得知,创建button组件时,其对应的props属性将会有btnTextbtnSizebtnTypebtnOutlinebtnActivebtnBlock。而在上一节中,我们知道怎么注册组件。那么接下来,直接使用注册组件的语法糖来创建。

Vue.component('vue-button', { props: [

'btnText', // 按钮文本内容 'btnType', // 按钮类型 'btnSize', // 按钮尺寸大小 'btnOutline', // 只有边框的按钮样式 'btnActive', // 按钮状态,是一个布尔值,true表示激活(当前状态) 'btnBlock' // 按钮是不是块元素,是一个布遥值,true表示块元素 ], template: ` <button type="button" class="btn" :class='[computedType, computedSize, computedOutline, computedActive, computedBlock]' >{{ btnText }}</button> `, computed: {

// 控制按钮的类型 computedType: function () { return `btn-${this.btnType}` },

// 控制按钮大小尺寸 computedSize: function () { return `btn-${this.btnSize}` },

// 控制按钮边框 computedOutline: function () { return `btn-outline-${this.btnOutline}` },

// 控制按钮是否激活 computedActive: function () { return this.btnActive === 'true' ? 'active' : '' },

// 控制按钮是否是块元素 computedBlock: function () { return this.btnBlock === 'true' ? 'btn-block' : '' } } })

上面的代码其实表示我们已经完成了按钮组件的注册,在继续往下之前,先试着了解已经完成的工作:

  • 使用Vue.component(tagName, options)注册了一个button组件,这个组件的标签为vue-button;并且在这个组件中设置了propscomputed两个选项

  • props属性设置了一个数组,数组中的值为btnTextbtnSizebtnTypebtnOutlinebtnActivebtnBlock,这些都是我们控制按钮想要的属性,而这些属性都是来自Bootstrap的类(熟悉Bootstrap的同学一目了然)

  • computed中对属性值进行计算,以便正确的类可以用到模板中。你也看到了类的实现,使用的是数组的形式。有关于样式怎么绑定到Vue的组件中,可以点击这里进行了解

  • 计算值在将类追回到类数组中起主要作用,并根据对应的类获取所需要的样式,呈现对应的外观

这个例子让我对计算属性(computed)和如何在计算值时考虑到组件的避性以及数据块的属性有了一个更好的理解。在Vue中,除了使用computed之外,还可以使用方法(methods)和观察者(watch)。具本使用哪一种方式,可以根据自己的需求和应用场景来决定。如果你想了解这三者的不同之处,可以点击这里进行了解。

使用按钮组件

组件已经注册OK了,现在可以在Vue的实例中使用该组件。

[xml] view plain copy

<div id="app"> <div class="container"> <div class="block"> <vue-button btn-text="Primary" btn-type="primary"></vue-button> <vue-button btn-text="Secondary" btn-type="secondary"></vue-button> <vue-button btn-text="Success" btn-type="success"></vue-button> <vue-button btn-text="Danger" btn-type="danger"></vue-button> <vue-button btn-text="Warning" btn-type="warning"></vue-button> <vue-button btn-text="Info" btn-type="info"></vue-button> <vue-button btn-text="Light" btn-type="light"></vue-button> <vue-button btn-text="Dark" btn-type="dark"></vue-button> <vue-button btn-text="Link" btn-type="link"></vue-button> </div> <div class="block"> <vue-button btn-text="Primary" btn-outline="primary"></vue-button> <vue-button btn-text="Secondary"btn-outline="secondary"></vue-button> <vue-button btn-text="Success" btn-outline="success"></vue-button> <vue-button btn-text="Danger" btn-outline="danger"></vue-button> <vue-button btn-text="Warning" btn-outline="warning"></vue-button> <vue-button btn-text="Info" btn-outline="info"></vue-button> <vue-button btn-text="Light" btn-outline="light"></vue-button> <vue-button btn-text="Dark" btn-outline="dark"></vue-button> <vue-button btn-text="Link" btn-outline="link"></vue-button> </div> <div class="block"> <vue-button btn-text="Large button" btn-type="primary" btn-size="lg"></vue-button> <vue-button btn-text="Default button" btn-type="primary"></vue-button> <vue-button btn-text="Small button" btn-type="primary" btn-size="sm"></vue-button> </div> <div class="block"> <vue-button btn-text="Large block button" btn-type="primary" btn-size="lg" btn-block=true></vue-button> <vue-button btn-text="Small block button" btn-type="primary" btn-size="sm" btn-block=true></vue-button> </div> <div class="block"> <vue-button btn-text="Primary" btn-type="primary" btn-size="lg" btn-active=true></vue-button> </div> </div>

</div>

没有样式的时候,效果如下:

640?wx_fmt=png

看上去没有任何差别。这个时候把Bootstrap的样式代码添加进来,你可以只引入button部分的样式。这个时候你看到的效果如下:

640?wx_fmt=png

除了上述的方式之外,也可以在使用的时候,通过data来传相应的参数,比如:

data: {

buttonLabel: “Login”, buttonType:“primary”, bigButton:{ label:“Big Button Label”, type:“warning”, size:“lg”, active:“true”, block:“true” }}

app的Vue实例中:

[xml] view plain copy

<vue-button :btn-text=“buttonLabel” :btn-type=“buttonType”></vue-button>

<vue-button :btn-text=“bigButton.label” :btn-type=“bigButton.type” :btn-size=“bigButton.size” :btn-active=“bigButton.active” :btn-block=“bigButton.block”></vue-button>

效果如下:

640?wx_fmt=png

不过上面的按钮并不完美,查看前面的Demo的源码,我们不难发现,有些类名会是这样:

640?wx_fmt=png

有很多的undefined出现在class中。对于追求完美的同学而言,似乎无法接受。接下来尝试一下对其进行修正。

Vue.component('vue-button', { props: [

'btnText', // 按钮文本内容 'btnType', // 按钮类型 'btnSize', // 按钮尺寸大小 'btnOutline', // 只有边框的按钮样式 'btnActive', // 按钮状态,是一个布尔值,true表示激活(当前状态) 'btnBlock' // 按钮是不是块元素,是一个布遥值,true表示块元素 ], template: ` <button type="button" class="btn" :class='[computedType, computedSize, computedOutline, computedActive, computedBlock]' >{{ btnText }}</button> `, computed: {

// 控制按钮的类型 computedType: function () { return this.btnType ? `btn-${this.btnType}` : '' },

// 控制按钮大小尺寸 computedSize: function () { return this.btnSize ? `btn-${this.btnSize}` : '' },

// 控制按钮边框 computedOutline: function () { return this.btnOutline ? `btn-outline-${this.btnOutline}` : '' },

// 控制按钮是否激活 computedActive: function () { return this.btnActive === 'true' ? 'active' : '' },

// 控制按钮是否是块元素 computedBlock: function () { return this.btnBlock === 'true' ? 'btn-block' : '' } } })

btnTypebtnSizebtnOutline加了一个判断,如果没有传值,将会返回''。这样一来就不会在class中出现类似btn-underfinde这样的类名了。

640?wx_fmt=png

最终看到的效果是一致的。

单文件创建按钮组件

除此之外,咱位还可以单文件来创建组件。这里我们使用Vue-cli的方式来创建。有关于Vue-cli的操作,这里不详细阐述了,感兴趣的可以点击这里阅读。

src/components/目录下创建Button.vue文件,其实就是button组件所需要的内容。在单个文件中创建一个组件,主要包括:

[xml] view plain copy

<template></template>


<script></script>


<style></style>

其中<template>对应的是button中所需要的模板内容,<script>是组件中的JavaScript代码,而<style>则是组件需要的样式。比如我们所要的Bootstrap 4的按钮组件,可以这样写:

[xml] view plain copy

<template> <button type="button" class="btn" :class='[computedType, computedSize, computedOutline, computedActive, computedBlock]' >{{ btnText }}</button>

</template>


<script>


export default { name: 'Button', props: { btnText: { type: String,

default: '' }, btnType: { type: String,

default: '' }, btnSize: { type: String,

default: '' }, btnOutline: { type: String,

default: '' }, btnActive: { }, btnBlock: { } }, computed: {

// 控制按钮的类型 computedType: function () { return this.btnType ? `btn-${this.btnType}` : '' },

// 控制按钮大小尺寸 computedSize: function () { return this.btnSize ? `btn-${this.btnSize}` : '' },

// 控制按钮边框 computedOutline: function () { return this.btnOutline ? `btn-outline-${this.btnOutline}` : '' },

// 控制按钮是否激活 computedActive: function () { return this.btnActive === 'true' ? 'active' : '' },

// 控制按钮是否是块元素 computedBlock: function () { return this.btnBlock === 'true' ? 'btn-block' : '' } } }

</script>


<style scoped>

/*引入bootstrap.css中的button.css*/

.btn {

display: inline-block; font-weight: 400; ...

</style>

接下来就可以这样调用Button.vue组件。比如在App.vue中:

[xml] view plain copy

<template> <div id="app"> <div class="container"> <div class="block"> <vue-button btn-text="Primary" btn-type="primary"></vue-button> <vue-button btn-text="Secondary" btn-type="secondary"></vue-button> <vue-button btn-text="Success" btn-type="success"></vue-button> <vue-button btn-text="Danger" btn-type="danger"></vue-button> <vue-button btn-text="Warning" btn-type="warning"></vue-button> <vue-button btn-text="Info" btn-type="info"></vue-button> <vue-button btn-text="Light" btn-type="light"></vue-button> <vue-button btn-text="Dark" btn-type="dark"></vue-button> <vue-button btn-text="Link" btn-type="link"></vue-button> </div> <div class="block"> <vue-button btn-text="Primary" btn-outline="primary"></vue-button> <vue-button btn-text="Secondary" btn-outline="secondary"></vue-button> <vue-button btn-text="Success" btn-outline="success"></vue-button> <vue-button btn-text="Danger" btn-outline="danger"></vue-button> <vue-button btn-text="Warning" btn-outline="warning"></vue-button> <vue-button btn-text="Info" btn-outline="info"></vue-button> <vue-button btn-text="Light" btn-outline="light"></vue-button> <vue-button btn-text="Dark" btn-outline="dark"></vue-button> <vue-button btn-text="Link" btn-outline="link"></vue-button> </div> <div class="block"> <vue-buttonbtn-text="Large button" btn-type="primary" btn-size="lg"></vue-button> <vue-button btn-text="Default button" btn-type="primary"></vue-button> <vue-button btn-text="Small button" btn-type="primary"btn-size="sm"></vue-button> </div> <div class="block"> <vue-button btn-text="Large block button" btn-type="primary" btn-size="lg" btn-block="true"></vue-button> <vue-button btn-text="Small block button" btn-type="primary" btn-size="sm" btn-block="true"></vue-button> </div> <div class="block"> <vue-button btn-text="Primary" btn-type="primary" btn-size="lg" btn-active="true"></vue-button> </div> </div> </div>

</template>


<script>

import vueButton from "./components/Button"; export default { name: "App", components: { vueButton } };

</script>

最终你能看到的效果如下:

640?wx_fmt=png

有关于源码可以点击这里获取。另外有关于Vue学习的示例代码,都将放在Github的VueStudy仓库,感兴趣的可以点击这里获取自己感兴趣的东西。如果你有兴趣,也可以将你的示例代码提交到这个库,与大家一起分享。

总结

在组件使用一文中,我们了解了在Vue中怎么注册全局和局部组件,以及怎么使用注册好的组件。为了巩固前面学习内容,这篇文章我个通过创建Bootstrap4中的button组件为例,看看在Vue中怎么创建组件,以及使用组件。

由于本人是Vue的初学者,如果文中有不对之处,还请各路大神拍正。如果你有更好的建议或经验欢迎在下面的评论中与我们一起分享。


原文发布时间:2018年02月05日

原文作者:W3cplus_

本文来源csdn如需转载请紧急联系作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Android之TextView组件学习
一、基础学习 1.findViewById返回View类,该类是所有View组件的父类。 2.子类比父类拥有更多的属性和方法,不过子类找不到的话去父类找 3.marquee:华盖,跑马灯效果;orientation:方向。
650 0
Android之EditText组件学习
一、基础学习 1.Button是TextView的一个子类,所以按钮本身是一个特殊的文本,属性和TextView相似 2.EditText类似html里的input type="text",是TextView的一个子类 二、实例 1: package org.
611 0
Vue学习-1
为什么选择Vuejs 预读:为了满足当前移动webApp项目的开发需求,MVVM框架诞生,而VUEJS 便是这样一种js框架,其两大核心:数据驱动和组件化 为了解决webApp这些体验和开发上的不足,使用一个MVVM框架VUELS;
1432 0
mpvue项目(组件)迁移指南、示例及资源汇总
首先,为什么要从mpvue转uni-app?因为uni-app对vue语法支持更全面(如支持过滤器)、性能更高、支持平台更多(支持H5和App)。这里有详细的评测https://juejin.im/post/5ca1736af265da30ae314248 然后进入正题。
2218 0
Spark学习之基础相关组件(1)
Spark学习之基础相关组件(1) 1. Spark是一个用来实现快速而通用的集群计算的平台。 2. Spark的一个主要特点是能够在内存中进行计算,因而更快。 3. RDD(resilient distributed dataset弹性分布式数据集)表示分布在多个计算节点上可以并行操作的元素的集合,是Spark的主要编程抽象。 4. Spark是一个大一
1787 0
IntelliJ IDEA 12 创建Web项目 教程 超详细版
原文:IntelliJ IDEA 12 创建Web项目 教程 超详细版 IntelliJ IDEA 12 新版本发布 第一时间去官网看了下  黑色的主题 很给力 大体使用了下  对于一开始就是用eclipse的童鞋们 估计很难从eclipse中走出来 当然 我也很艰难的走在路上 ... 首先要说一点,在IntelliJ IDEA里面“new Project” 就相当于我们eclipse的“workspace”,而“new Module”才是创建一个工程。
1043 0
39
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载