9.1. 添加实战课程

本教程最新版为 2.6,当前版本已放弃维护,请阅读最新版本!

简介

本小节中,我们将模拟一些实战课程,并新建一个轮播组件来循环展示它们,我们将它们添加到社区侧栏。『社区侧栏』主要用来显示一些推荐内容列表,其完成后的部分页面效果如下:

file

新建轮播组件

src/components 下新建 Slider.vue 文件,复制贴入以下代码:

src/components/Slider.vue

<template>
  <div v-if="slides.length" class="carousel slide" @mouseover="stop" @mouseout="play">
    <div class="carousel-inner">
      <transition
        enter-active-class="animated slideInRight"
        leave-active-class="animated slideOutLeft"
      >
        <div v-if="show" key="current">
          <slot :currentSlide="currentSlide"></slot>
        </div>
        <div v-else key="next" class="item next">
          <slot :currentSli...

本文章首发在 LearnKu.com 网站上。

为了保证课程的高品质,我们需要对课程进行收费。付费后 才能观看剩余内容。 购买

上一篇 下一篇
讨论数量: 0

暂无话题~