parent
440b5fd465
commit
1bb4f6035c
6 changed files with 133 additions and 5 deletions
@ -0,0 +1,55 @@ |
||||
<template> |
||||
<div class="container"> |
||||
<Category title="美食"> |
||||
<img slot="slot1" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt=""> |
||||
<a slot="slot2" href="https://www.baidu.com">获取更多信息</a> |
||||
</Category> |
||||
<Category title="游戏"> |
||||
<ul slot="slot1"> |
||||
<li v-for="(value, index) in games" :key="index">{{ value }}</li> |
||||
</ul> |
||||
<div slot="slot2" class="more"> |
||||
<a href="https://www.baidu.com">单机游戏</a> |
||||
<a href="https://www.baidu.com">网络游戏</a> |
||||
</div> |
||||
</Category> |
||||
<Category title="电影"> |
||||
<video slot="slot1" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video> |
||||
<template v-slot:slot2> |
||||
<div class="more"> |
||||
<a href="https://www.baidu.com">经典</a> |
||||
<a href="https://www.baidu.com">热门</a> |
||||
<a href="https://www.baidu.com">推荐</a> |
||||
</div> |
||||
<h4>欢迎观看</h4> |
||||
</template> |
||||
|
||||
</Category> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import Category from "@/components/Category.vue"; |
||||
|
||||
export default { |
||||
name: "App", |
||||
components: {Category}, |
||||
data() { |
||||
return { |
||||
foods: ['火锅', '烧烤', '小龙虾', '牛排'], |
||||
games: ['红色警戒', '穿越火线', '劲舞团', '超级玛丽'], |
||||
films: ['《教父》', '《拆弹专家》', '《你好李焕英》', '《哈哈》'] |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
.container, .more { |
||||
display: flex; |
||||
justify-content: space-around; |
||||
} |
||||
h4 { |
||||
text-align: center; |
||||
} |
||||
</style> |
||||
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,32 @@ |
||||
<template> |
||||
<div class="category"> |
||||
<h3>{{ title }}分类</h3> |
||||
<slot name="slot1">slot默认值1</slot> |
||||
<slot name="slot2">slot默认值2</slot> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: "Category", |
||||
// props: ['title', 'listData'] |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.category { |
||||
background-color: skyblue; |
||||
width: 200px; |
||||
height: 300px; |
||||
} |
||||
h3 { |
||||
text-align: center; |
||||
background-color: orange; |
||||
} |
||||
img { |
||||
width: 100% |
||||
} |
||||
video { |
||||
width: 100%; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,23 @@ |
||||
// 引入Vue
|
||||
import Vue from "vue"; |
||||
// 引入App
|
||||
import App from "./App"; |
||||
// 引入插件
|
||||
import vueResource from "vue-resource"; |
||||
|
||||
// 设置Vue
|
||||
Vue.config.productionTip = false |
||||
|
||||
// 使用插件
|
||||
Vue.use(vueResource) |
||||
|
||||
// 实例化Vue
|
||||
new Vue({ |
||||
components: { |
||||
App |
||||
}, |
||||
render: h => h(App), |
||||
beforeCreate() { |
||||
Vue.prototype.$bus = this // 安装全局事件总线
|
||||
} |
||||
}).$mount('#app') |
||||
Loading…
Reference in new issue