本文已收录至https://github.com/likekk/studyBlog欢迎大家star，共同学习，共同进步。如果文章有错误的地方，欢迎大家指出。后期将在将GitHub上规划前端学习的路线和资源分享。
写在前面每一篇文章都希望您有所收获，每一篇文章都希望您能静下心来浏览、阅读。每一篇文章都是作者精心打磨的作品。
如果您觉得杨戬这个小白还有点东西的话，杨戬希望正在看文章的您可以帮忙点亮那个点赞的按钮(效果更加)，对于杨戬这个暖男来说，真的真的非常重要，这将是我持续写作的动力。
前言写这篇文章的目的主要是将以前所学的知识结合起来，进一步巩固一下自己的记忆，防止遗忘(主要是害怕老年痴呆)，当然更重要的是学以致用，毕竟学过的东西不拿来用的话就会很容易忘记，永远不要太相信自己的记忆，编程这东西，几天不弄，忘的就很快，回过头再看，心里想着：这是我写的代码吗？本篇博客也是秉着这样的初心去写的。
整体分析在我看来，我觉得做每一件事情都必须弄清楚这件事情的前因后果，当然了如果有是实在不太了解的，姑且可以先实现效果。
然后再返回去慢慢理解，不过我一般比较喜欢先分析整体结构，然后一步一步去实现，有些事情不可能做到尽善尽美的，不是吗？先上效果图吧！
这张图打了一波广告，我想你们应该不会介意的吧！不过说实话这里面的老师讲课真的是特别优秀，感兴趣的读者可以去尝试一下，毕竟暖男戬是不会骗人的。
本来想着弄一下轮播图的动态效果的，奈何不会弄，所以放弃了，静态的凑合看吧！
分析第一步布局的话，一个是显示图片，另一个是显示小圆点，图片切换的时候，小圆点也随着切换，当切换到最后一张的时候图片重从第一张开始重新轮播。
我们需要明确哪些数据是需要通过外部传输，哪些数据是我们自己可以控制，从效果图分析主要的话是图片，当然控制小圆点也是可以的，我们知道vue是可以实现组件的复用的，那么对于轮播图而言，也可以实现其复用性。
例如：在其它地方我们也需要用到轮播图，但是轮播的图片不一样，轮播的速度不一样等等。
总结：分析哪些数据是可控的，哪些数据是不可控的。
分析第三步这里主要是轮播整体的实现，鼠标经过，轮播停止，鼠标移出，轮播继续，点击小圆点，实现轮播。
涉及知识点文章中轮播图的实现涉及的知识点我整理了一下，如果有知识点不太清楚的读者可以去了解相关的内容。
vue的父子组件通信
静态资源的导入
v-if和v-for的使用
事件处理
class和sytle绑定
Vue的生命周期
组件的校验
轮播的实现将步骤分析和涉及的知识点整理之后，一切应该都是游刃有余吧！那么我们一步一步实现轮播的效果。
界面布局1、全局css样式引入
全局css样式，我已经会搭建准备好了，一个是reset.css，一个是global.css，静态图片资源放在了github上，大家可以自行下载
reset.css
1/*2 v2.0 | 20110126
3 License: none (public domain)
4*/
5
6html,
7body,
8div,
9span,
10applet,
11object,
12iframe,
13h1,
14h2,
15h3,
16h4,
17h5,
18h6,
19p,
20blockquote,
21pre,
22a,
23abbr,
24acronym,
25address,
26big,
27cite,
28code,
29del,
30dfn,
31em,
32img,
33ins,
34kbd,
35q,
36s,
37samp,
38small,
39strike,
40strong,
41sub,
42sup,
43tt,
44var,
45b,
46u,
47i,
48center,
49dl,
50dt,
51dd,
52ol,
53ul,
54li,
55fieldset,
56form,
57label,
58legend,
59table,
60caption,
61tbody,
62tfoot,
63thead,
64tr,
65th,
66td,
67article,
68aside,
69canvas,
70details,
71embed,
72figure,
73figcaption,
74footer,
75header,
76hgroup,
77menu,
78nav,
79output,
80ruby,
81section,
82summary,
83time,
84mark,
85audio,
86video {
87 margin: 0;
88 padding: 0;
89 border: 0;
90 font-size: 100%;
91 font: inherit;
92 vertical-align: baseline;
93}
94/* HTML5 display-role reset for older browsers */
95article,
96aside,
97details,
98figcaption,
99figure,
100footer,
101header,
102hgroup,
103menu,
104nav,
105section {
106 display: block;
107}
108body {
109 line-height: 1;
110}
111ol,
112ul {
113 list-style: none;
114}
115blockquote,
116q {
117 quotes: none;
118}
119blockquote:before,
120blockquote:after,
121q:before,
122q:after {
123 content: "";
124 content: none;
125}
126table {
127 border-collapse: collapse;
128 border-spacing: 0;
129}