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

最近在学习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钩子函数中执行即可
  
  

与jQuery轮播图对比

1.代码量：明显Vue代码量更少
2.直观性：Vue更直观且实现更为简单