023 V 初识组件
本帖最后由 不二如是 于 2018-9-23 11:24 编辑https://xxx.ilovefishc.com/forum/201808/24/170823gj1tj61c4apj6o1e.jpg
上一讲我们搞定了动态数据绑定，本次来学习组件。
组件（Component）是Vue最核心的功能，是一个超级亮点。
我们先来看一个场景：
这是一个常见的聊天界面，我们用Vue来实现一下。
还有一些标准的控件，比如右上角的关闭按钮、输入框、发送按钮等等。
最直接的想法：
创建几个div，button
没错，可以，但是别的地方也需要呢？
那么直接复制好了。
如果需要更多的文字验证呢？
用JS和正则表达式呗。
像这种为了解决问题而解决问题的直接操作，很初级。
万一哪天项目变动，就会出现一大堆没用的代码。
没错，我们需要一个“重用性”很高的组件，用在哪里都很方便。
Vue组件应运而生。
举个例子，来一段很语义话的代码：
<Card style="width: 333px">
<p slot="title">与XXX聊天中</p>
<a slot="extra">
<Icon type="ios-close" size="18"></Icon>
</a>
<div style="height: 100px">
</div>
<div>
<Row :gutter="16">
<i-col span="16">
<i-input v-model="value" placeholder="请输入..."></i-input>
</i-col>
<i-col span="3">
<i-button type="primary" icon="paper-good">发送</i-button>
</i-col>
</Row>
</div>
</Card>
很奇怪的代码，Card、Row i-col这些元素我们都没见过。
这些没见过的自定义标签就是组件，每个陌生的标签就是一个组件。
一旦创建完成，在任何使用Vue的地方都可以直接使用。
具体如何创建，请看下回分解。
课后作业
1、组件是Vue最新的功能？（T/F）
2、自定义的标签可以是组件吗？（T/F）
答案：
**** Hidden Message *****
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢Vue，请订阅 专辑（传送门）（不喜欢更要订阅{:10_297:} ）
http://xxx.fishc.com/forum/201803/21/151715umqz1qoywp11wjbq.gif F
T 0 学习 1
页:
[1]