马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 不二如是 于 2018-9-23 11:24 编辑
上一讲我们搞定了动态数据绑定，本次来学习组件。
组件（Component）是Vue最核心的功能，是一个超级亮点。
我们先来看一个场景：
这是一个常见的聊天界面，我们用Vue来实现一下。
还有一些标准的控件，比如右上角的关闭按钮、输入框、发送按钮等等。
最直接的想法：
没错，可以，但是别的地方也需要呢？
那么直接复制好了。
如果需要更多的文字验证呢？
用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）
答案：
如果有收获，别忘了评分 ：
这位鱼油，如果喜欢Vue，请订阅 专辑（ 传送门）（ 不喜欢更要订阅 ）
| 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2018-9-23 10:05:43
置顶卡
千斤顶
显身卡
发表于 2020-4-9 17:34:43