parent
e111a8db4c
commit
440b5fd465
9 changed files with 148 additions and 119 deletions
@ -0,0 +1,38 @@ |
||||
<template> |
||||
<div class="container"> |
||||
<Category title="美食"> |
||||
<img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt=""> |
||||
</Category> |
||||
<Category title="游戏"> |
||||
<ul> |
||||
<li v-for="(value, index) in games" :key="index">{{ value }}</li> |
||||
</ul> |
||||
</Category> |
||||
<Category title="电影"> |
||||
<video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video> |
||||
</Category> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import Category from "@/components/Category.vue"; |
||||
|
||||
export default { |
||||
name: "App", |
||||
components: {Category}, |
||||
data() { |
||||
return { |
||||
foods: ['火锅', '烧烤', '小龙虾', '牛排'], |
||||
games: ['红色警戒', '穿越火线', '劲舞团', '超级玛丽'], |
||||
films: ['《教父》', '《拆弹专家》', '《你好李焕英》', '《哈哈》'] |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
.container { |
||||
display: flex; |
||||
justify-content: space-around; |
||||
} |
||||
</style> |
||||
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,31 @@ |
||||
<template> |
||||
<div class="category"> |
||||
<h3>{{ title }}分类</h3> |
||||
<slot>slot默认值</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') |
||||
@ -1,20 +1,38 @@ |
||||
<template> |
||||
<div class="container"> |
||||
<Search/> |
||||
<List/> |
||||
<Category title="美食"> |
||||
<img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt=""> |
||||
</Category> |
||||
<Category title="游戏"> |
||||
<ul> |
||||
<li v-for="(value, index) in games" :key="index">{{ value }}</li> |
||||
</ul> |
||||
</Category> |
||||
<Category title="电影"> |
||||
<video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video> |
||||
</Category> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import Search from "@/components/Search.vue"; |
||||
import List from "@/components/List.vue" |
||||
import Category from "@/components/Category.vue"; |
||||
|
||||
export default { |
||||
name: "App", |
||||
components: {Search, List} |
||||
components: {Category}, |
||||
data() { |
||||
return { |
||||
foods: ['火锅', '烧烤', '小龙虾', '牛排'], |
||||
games: ['红色警戒', '穿越火线', '劲舞团', '超级玛丽'], |
||||
films: ['《教父》', '《拆弹专家》', '《你好李焕英》', '《哈哈》'] |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
|
||||
.container { |
||||
display: flex; |
||||
justify-content: space-around; |
||||
} |
||||
</style> |
||||
|
||||
@ -0,0 +1,31 @@ |
||||
<template> |
||||
<div class="category"> |
||||
<h3>{{ title }}分类</h3> |
||||
<slot>slot默认值</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> |
||||
@ -1,70 +0,0 @@ |
||||
<template> |
||||
<div class="row"> |
||||
<!-- 展示列表 --> |
||||
<div v-show="info.user.length" class="card" v-for="u in info.user"> |
||||
<a :href="u.html_url" target="_blank"> |
||||
<img :src="u.avatar_url" style="width: 100px" alt=""/> |
||||
</a> |
||||
<p class="card-text">{{ u.login }}</p> |
||||
</div> |
||||
<!-- 展示欢迎 --> |
||||
<h1 v-show="info.isFirst">欢迎</h1> |
||||
<!-- 展示加载中 --> |
||||
<h1 v-show="info.isLoading">数据加载中...</h1> |
||||
<!-- 展示错误信息 --> |
||||
<h1 v-show="info.errorMsg">{{ info.errorMsg }}</h1> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: "List", |
||||
data() { |
||||
return { |
||||
info: { |
||||
user: [], |
||||
isFirst: true, |
||||
isLoading: false, |
||||
errorMsg: '' |
||||
} |
||||
} |
||||
}, |
||||
methods: { |
||||
getUserList(data) { |
||||
this.info = {...this.info, ...data} |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.$bus.$on('getUserList', this.getUserList) |
||||
} |
||||
} |
||||
|
||||
</script> |
||||
|
||||
<style scoped> |
||||
.album { |
||||
min-height: 50rem; /* Can be removed; just added for demo purposes */ |
||||
padding-top: 3rem; |
||||
padding-bottom: 3rem; |
||||
background-color: #f7f7f7; |
||||
} |
||||
|
||||
.card { |
||||
float: left; |
||||
width: 33.333%; |
||||
padding: .75rem; |
||||
margin-bottom: 2rem; |
||||
border: 1px solid #efefef; |
||||
text-align: center; |
||||
border-radius: 10px; |
||||
} |
||||
|
||||
.card > img { |
||||
margin-bottom: .75rem; |
||||
border-radius: 100px; |
||||
} |
||||
|
||||
.card-text { |
||||
font-size: 85%; |
||||
} |
||||
</style> |
||||
@ -1,42 +0,0 @@ |
||||
<template> |
||||
<div> |
||||
<section class="jumbotron"> |
||||
<h3 class="jumbotron-heading">Search Github Users</h3> |
||||
<div> |
||||
<input type="text" placeholder="enter the name you search" v-model="input"> <button @click="getUser()"> |
||||
Search |
||||
</button> |
||||
</div> |
||||
</section> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
// import axios from "axios"; |
||||
|
||||
export default { |
||||
name: "Search", |
||||
data() { |
||||
return { |
||||
input: "" |
||||
} |
||||
}, |
||||
methods: { |
||||
getUser() { |
||||
this.$bus.$emit('getUserList', {'isFirst':false, 'isLoading': true}) |
||||
this.$http.get('https://api.github.com/search/users?', {params: {"q": this.input}}).then( |
||||
response => { |
||||
this.$bus.$emit('getUserList', {'isLoading': false, 'user': response.data.items}) |
||||
}, |
||||
error => { |
||||
this.$bus.$emit('getUserList', {'errorMsg': error.message, 'user': []}) |
||||
} |
||||
) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
</style> |
||||
Loading…
Reference in new issue