Vue组件的API来自三部分

props参数--传递数据给组件

slot定制模板--外部模板混合子组件模板

event自定义事件--监控子组件交互状态

先把DOM和样式写好 --> 考虑哪些是可以被定制的 --> 写模板 --> 自定义事件

摆上html

<div id="app">

<div class="modal-header">

<h4>这是标题</h4>

</div>

<div class="modal-content">

<div>在这里添加内容&......

web中的组件是一个具有独立的逻辑和功能的界面，同时又能根据规定的接口规则进行相互融合，变成一个完整的应用。

组件化开发的好处是，组件自由组合形成功能完善的界面，当不需要某个组件，或者想要替某个组件时，可以随时进行替换和删除，不影响整个应用的运行。

Vue中的组件

自定义HTML标签

组件注册全局注册

可以在任何模板中使用，使用之前要先注册

语法

使用Vue.component(组件名,选项对象)，组件名命名约定camelCase和kebab-case。在html中使用组件：使用kebab-case命名法

局部注册

在组件实例中通过选项对象注册，只在所注册的......

自己写了一个自动滚动的Slider插件，可以运用于网站的首页，自动轮播地展示图片。

下面的小圆点对应上面的图片，点击小圆点显示对应的图片，鼠标移到Slider区域显示前后翻页的箭头，点击可以翻到上一页或者下一页，同时下方的小圆点也随之滚动。

效果图如下

代码开源在我的github上，戳这里