Category.vue

<template>
  <div class="category">
    <h3>{{ title }}分类</h3>
    <slot name="header"></slot>
    <slot name="footer"></slot>
    <!-- slot插槽将app里的图片指定到这个位置,挖个坑等图片来跳 -->
  </div>
</template>

<script>
export default {
  name: "TheCategory",
  props: ["listData", "title"],
};
</script>

<style>
.category {
  background-color: skyblue;
  width: 200px;
  height: 300px;
  display: flex;
  flex-direction: column;
}
h3 {
  text-align: center;
  background-color: orange;
}
li {
  text-align: left;
}
</style>

App.vue

<template>
  <div id="app" class="align">
    <category title="美食">
      <img slot="header" src="./assets/logo.png" alt="" />
      <a slot="footer" href="https://www.baidu.com">更多美食</a>
    </category>
    <category title="游戏">
      <ul slot="header">
        <li v-for="g in games" :key="g">{{ g }}</li>
      </ul>
      <div slot="footer" class="align">
        <a href="https://www.baidu.com">单击游戏</a>
        <a href="https://www.baidu.com">网络游戏</a>
      </div>
    </category>
    <category title="电影">
      <video
        slot="header"
        src="./assets/big_buck_bunny.mp4"
        controls
        autoplay
      ></video>
      <a slot="footer" href="https://www.baidu.com">更多电影</a>
    </category>
  </div>
</template>

<script>
import Category from "./components/Category.vue";
export default {
  name: "App",
  components: { Category },
  data() {
    return {
      foods: ["火锅", "烧烤", "小龙虾", "牛排"],
      games: ["英雄联盟", "QQ飞车", "穿越火线", "地下城与勇士"],
      films: [
        "《反贪风暴5》",
        "《唐人街探案》",
        "《西虹市首富》",
        "《大人物》",
      ],
    };
  },
};
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  margin-top: 60px;
}
.align {
  display: flex;
  justify-content: space-around;
}
video {
  width: 100%;
  height: 120px;
}
img{
  width: auto;
  height: 100px;
}
</style>

main.js

import Vue from 'vue'
import App from './App.vue'
// npm i vue-resource引入插件
import vueResource from 'vue-resource';
//使用插件
Vue.use(vueResource);
new Vue({
  render: h => h(App),
}).$mount('#app');