app.vue

<template>
  <div>
    <!-- 组件传参：数组类型 -->
    <!-- <my-list items="skills" /> -->
    <my-list :items="skills" />
    <!-- 组件的最大用途: 复用性 - 界面相同但是数据不同 -->
    <my-list :items="['亮亮', '亚楠', '小新', '铭铭', '思远']" />
    <!-- 结合for循环使用 -->
    <!-- item是data中的元素, 数组类型 -->
    <my-list v-for="item in data" :items="item" />
  </div>
</template>

<script>
import MyList from './components/MyList.vue'
export default {
  components: { MyList },
  data() {
    return {
      skills: ['html', 'css', 'js', 'express', 'vue'],
      data: [
        ['SQL', 'MySQL', 'Express', 'Node.js'],
        ['CSS', 'SASS', 'boot', 'ajax', 'html'],
        ['js高级', 'dom', 'jQuery', 'vue'],
        ['elementUI', 'vantUI', '微信小程序', 'HTML5高级'],
      ],
    }
  },
}
</script>

<style lang="scss" scoped></style>

组件my-list

<template>
  <div class="list">
    <div>排行榜:</div>
    <!-- <div>{{ items }}</div> -->
    <div v-for="(item, index) in items" class="cell">
      <!-- 动态样式 :class="{类名: true/false}" -->
      <!-- hl样式类, 在 index序号 <= 2 时生效 -->
      <span :class="{ hl: index <= 2 }">{{ index + 1 }}</span>
      <span>{{ item }}</span>
    </div>
  </div>
</template>

<script>
export default {
  // 自定义属性
  props: ['items'],
}
</script>

<style lang="scss" scoped>
.list {
  display: inline-block;
  margin: 0 10px 10px 0;
  width: 200px;
  vertical-align: top;
}

.cell {
  background-color: lightblue;
  margin: 4px;
  padding: 5px;
  border-radius: 3px;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
  transition: 0.2s;
  &:hover {
    padding-left: 20px;
  }
  > span:first-child {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: white;
    text-align: center;
    margin-right: 4px;
    border-radius: 2px;
    // 同时带有 class='hl' 的
    &.hl {
      background-color: orange;
    }
  }
}
</style>