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实例,然后挂在父元素上去,并且设定数据为图片的数组,以及后面计数用的markmark的初始值为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更直观且实现更为简单

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 转载 :OpenDiggawesome-github-vue 是由OpenDigg整理并维护的Vue相关开源项目库...
    果汁密码阅读 23,202评论 8 124
  • 绿茵场上 红色的跑道边 映入眼帘的是一顶顶鲜红的小红帽 那是青年志愿者们在维护赛场上的秩序 阳光午后, 赫然支起一...
    方默默阅读 235评论 0 3
  • 杨牧然阅读第四天,寓言故事《狐狸和仙鹤》。
    杨牧然阅读 132评论 2 0