Vue轮播图的实现以及其与jQuery轮播图的简单对比

2017-05-05 本文已影响7752人大春春

最近在学习Vue，然后做了一个轮播图，然后想起之前用jQuery做的轮播图，就打算进行一个对比。

jQuery轮播图的实现代码和效果

代码和效果

Vue轮播图的代码实现步骤和效果

Vue轮播图效果

主要用到的技术
1.v-bind：属性绑定
2.v-for：列表渲染
3.v-show：条件渲染
4.class的绑定切换
5.created钩子
6.Vue过渡效果
步骤和对比
1.写好html和css
PS:这里和jQuery轮播图有所不同，因为Vue使用了列表渲染，所以只需要一个简单的结构的可以了

Vue轮播图html结构
jQuery轮播图html结构
2.初始化一个Vue实例，然后挂在父元素上去，并且设定数据为图片的数组，以及后面计数用的mark，mark的初始值为0（第一张图片）
初始化Vue实例
3.分别在放置图片的li元素和放置选择标识的span元素中，使用v-for遍历数据中的img属性和它的长度，
PS：在这里要注意的是，使用v-for循环的时候最好加上:key=标识，用以对后续对轮播图进行选择的标识
v-for列表渲染
bullet渲染
4.使用v-bind的对img标签的src属性进行绑定，可以使用所写:属性
使用v-bind绑定属性
这时候轮播的效果和html结构是这样的，他还不会动以及切换图片，并且最后一张图片在最上面（因为对li使用了position:absolute）

5.现在来编写一下运行的逻辑
首先，①当图片显示第几张的时候，下面的bullet的第几个就要标红，②并且点击相应的bullet可以切换到对应的图片;
①这个可以使用Vue的class绑定进行条件渲染，当标识index和图片的标识mark相等时就标红，②的话可以用Vue的事件绑定v-on（我这里采用的是缩写@事件='执行的函数'）对标识进行时间绑定

③在Vue实例中的methods中添加change方法，change的实现很简单，直接将实例中data属性中的mark变为index的数字即可
change的实现
④使用v-show对li元素中显示的图片进行条件渲染，方法是当图片标识的index与Vue实例中的mark相等时就显示该li元素

这时候的Vue轮播图就已经实现了点击下面的bullet标识切换图片的效果了，并且bullet标识也会有相应的标红

6.但是，这时候的图片切换还没有平滑过渡的效果，我们可以使用Vue类名过渡方式对图片的切换添加过渡效果
vue的类名过渡
先要在需要过度的元素的父元素，也就是ul元素中添加一个name属性，作为过渡效果类名的标记

然后在css中添加过渡效果的变化

最后将使用Vue中的过渡组件，将ul元素改为transition-group，然后添加tag属性，并且tag=ul（不添加的话ul元素名称显示为span元素）

这时候的Vue轮播图已经有平滑过渡的效果了

7.最后，我们在methods中添加一个自动切换的函数，然后在created钩子函数中执行即可