最近在学习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使用了列表渲染，所以只需要一个简单的结构的可以了

  <div class="carousel">
      <ul>
          <li>
              <a><img></a>
          </li>
      </ul>
      <div class="bullet">
          <span></span>
      </div>
  </div>
  

  Vue轮播图html结构

  <div class="window">
      <ul class="pic">
          <li>
              <a href="javascript:;"><img src=""></a>
          </li>
          <li>
              <a href="javascript:;"><img src=""></a>
          </li>
          <li>
              <a href="javascript:;"><img src=""></a>
          </li>
          <li>
              <a href="javascript:;"><img src=""></a>
          </li>
      </ul>
      <div class="indexCt">
          <ul class="pageIndex clearfix"></ul>
      </div>
  </div>
  

  jQuery轮播图html结构

  2.初始化一个Vue实例，然后挂在父元素上去，并且设定数据为图片的数组，以及后面计数用的mark，mark的初始值为0（第一张图片）

  new Vue({
        el: '.carousel',
        data: {
            mark: 0,
            img: ['http://upload-images.jianshu.io/upload_images/3360875-5625658440cb542d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
                'http://upload-images.jianshu.io/upload_images/3360875-b70e9d81d26e2a27.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
                'http://upload-images.jianshu.io/upload_images/3360875-dc724649454c2ddc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
                'http://upload-images.jianshu.io/upload_images/3360875-d2148a1bb7ea9d21.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240'
            ]
        },
  

  初始化Vue实例

  3.分别在放置图片的li元素和放置选择标识的span元素中，使用v-for遍历数据中的img属性和它的长度，

  PS：在这里要注意的是，使用v-for循环的时候最好加上:key=标识，用以对后续对轮播图进行选择的标识

  <li v-for='(image,index) in img' :key='index'>
      <a><img :src="image"></a>
  </li>
  

  v-for列表渲染

  <div class="bullet">
       <span v-for='(item,index) in img.length' :class="{'active':index===mark}" @click='change(index)' :key='index'></span>
  </div>
  

  bullet渲染

  4.使用v-bind的对img标签的src属性进行绑定，可以使用所写:属性

  <a><img :src="image"></a>
  

  使用v-bind绑定属性

  这时候轮播的效果和html结构是这样的，他还不会动以及切换图片，并且最后一张图片在最上面（因为对li使用了position:absolute）

  5.现在来编写一下运行的逻辑
  首先，①当图片显示第几张的时候，下面的bullet的第几个就要标红，②并且点击相应的bullet可以切换到对应的图片;

  ①这个可以使用Vue的class绑定进行条件渲染，当标识index和图片的标识mark相等时就标红，②的话可以用Vue的事件绑定v-on（我这里采用的是缩写@事件=’执行的函数’）对标识进行时间绑定

  <div class="bullet">
           <span v-for='(item,index) in img.length' :class="{'active':index===mark}" @click='change(index)' :key='index'></span>
  </div>
  

  ③在Vue实例中的methods中添加change方法，change的实现很简单，直接将实例中data属性中的mark变为index的数字即可

  methods:{
      change(i){
          this.mark=i
      }
  }
  

  change的实现

  ④使用v-show对li元素中显示的图片进行条件渲染，方法是当图片标识的index与Vue实例中的mark相等时就显示该li元素

  <li v-for='(image,index) in img' :key='index' v-show='index===mark'>
      <a><img :src="image"></a>
  </li>
  

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

  6.但是，这时候的图片切换还没有平滑过渡的效果，我们可以使用Vue类名过渡方式对图片的切换添加过渡效果

  vue的类名过渡

  先要在需要过度的元素的父元素，也就是ul元素中添加一个name属性，作为过渡效果类名的标记

  <ul class="clearfix slide" name='image'>
      <li v-for='(image,index) in img' :key='index' v-show='index===mark'>
          <a><img :src="image"></a>
      </li>
  </ul>
  

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

  .image-enter-active {
      transform: translateX(0);
      transition: all 1s ease;
  }
  
  .image-leave-active {
      transform: translateX(-100%);
      transition: all 1s ease;
  }
  
  .image-enter {
      transform: translateX(100%)
  }
  
  .image-leave {
      transform: translateX(0)
  }
  

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

  <transition-group tag='ul' class="clearfix slide" name='image'>
      <li v-for='(image,index) in img' :key='index' v-show='index===mark'>
          <a><img :src="image"></a>
       </li>
  </transition-group>
  

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

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

  autoPlay() {
     this.mark++
         if (this.mark === 4) {
             this.mark = 0
             return
         }
  },
  play() {
      setInterval(this.autoPlay, 3000)
  }
  

  定时切换

  created(){
    this.play()
  },
  

  created钩子函数

  与jQuery轮播图对比

  1.代码量：明显Vue代码量更少

  2.直观性：Vue更直观且实现更为简单