Vue轮播图的实现及其与jQuery轮播图的简单对比|饥人谷前端教程

Posted 2021-04-08 饥人谷前端

作者介绍

http://www.jianshu.com/u/38278ed3f4e1

由于订阅号无法添加文章内链接，文末点击阅读原文，获得更佳阅读体验哦~

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

8. 与jQuery轮播图对比

• 代码量：明显Vue代码量更少

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

饥人谷——有爱的前端互助学习社区

饥人谷官网：www.jirengu.com

学习论坛：jscode.me

点击下方 “阅读原文” 查看更多精彩内容~