Vue实现轮播图

需要的相关知识

列表渲染
数据绑定
事件处理

---

代码

代码 Html部分：

<div id="app">
					<ol>
						<li v-for="(slide,index) in slides" @mouseover="goto(index)">
							<a :href="slide.go" target="_blank" > {{slides[index].categoryName}} </a>
							// 通过v-for 将data里的数据渲染的页面上，通过v-bind:href 获取链接，点击链接跳转页面
						</li>
					</ol>
					<img :src="slides[index].imagePath" @mouseenter="pause" @mouseleave="play" />
						<a class="caption" :href="slides[index].go">{{slides[index].caption}} </a>
						// 通过v-bind:src绑定图像 通过数组index定位每一个图像及链接
			</div>

通过v-for 将data里的数据渲染的页面上，通过v-bind:href 获取链接，点击链接跳转页面
通过v-bind:src绑定图像 通过数组index定位每一个图像及链接
@mouseenter和@mouseleave 两个事件函数 分别使鼠标进入图像和离开图像执行pause（）函数和play（）函数，实现鼠标进入暂停播放和离开开启轮播效果

Vue部分

var vm = new Vue({
				el: '#app',
				data: {
					slides: [{
							categoryName: '热点',
							imagePath: 'images-新浪微博/1.jpg',
							caption: '航拍南京五一出城车辆：“小铁盒”缓慢前行',
							go: '1.html'
						},
						{
							categoryName: '聚焦',
							imagePath: 'images-新浪微博/2.jpg',
							caption: '西湖断桥客流爆满 美女城管巡逻队帅气吸睛',
							go: '2.html'
						},
						{
							categoryName: '天下',
							imagePath: 'images-新浪微博/3.jpg',
							caption: '载45人客车爆燃 瞬间被烧成空架',
							go: '3.html'
						},
						{
							categoryName: '百态',
							imagePath: 'images-新浪微博/4.jpg',
							caption: '寒流袭英法 酿酒商点蜡烛为葡萄取暖',
							go: '4.html'
						},
						{
							categoryName: '军事',
							imagePath: 'images-新浪微博/5.jpg',
							caption: '即将首飞！中国AG600两栖飞机完成首次滑行',
							go: '5.html'
						}
					],
					index: 0,
				},
				methods: {
					pause: function() {
						clearInterval(this.timer);
						//鼠标进入后消除定时器，实现暂停轮播
					},
					play: function() {
						this.timer = setInterval(this.goto, 3000)
					},
					goto: function() {						
						if (this.index === this.slides.length-1) {
							this.index = 0;
						} else {
							this.index++;
						}	
					}
				},

				mounted: function() {
					this.play() 
				}
			});

通过生命钩子函数，使一进入页面就开始执行play()函数，开启定时器setInterval（）（定义一个变量this.timer，方便后面消除定时器）执行goto（）函数，通过控制index来使src中的index变化，实现轮播

---

总结

利用v-bind 绑定数据（容易理解的说为了获取vue中的数据），利用v-for渲染数据，利用生命钩子函数mounted启动定时器和消除定时器来实现一些功能。
不明白的小伙伴可以多看几遍或者留言问我哦