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> |
<template> |
||||||
<div class="container"> |
<div class="container"> |
||||||
<Search/> |
<Category title="美食"> |
||||||
<List/> |
<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> |
</div> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script> |
<script> |
||||||
import Search from "@/components/Search.vue"; |
import Category from "@/components/Category.vue"; |
||||||
import List from "@/components/List.vue" |
|
||||||
|
|
||||||
export default { |
export default { |
||||||
name: "App", |
name: "App", |
||||||
components: {Search, List} |
components: {Category}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
foods: ['火锅', '烧烤', '小龙虾', '牛排'], |
||||||
|
games: ['红色警戒', '穿越火线', '劲舞团', '超级玛丽'], |
||||||
|
films: ['《教父》', '《拆弹专家》', '《你好李焕英》', '《哈哈》'] |
||||||
|
} |
||||||
|
} |
||||||
} |
} |
||||||
</script> |
</script> |
||||||
|
|
||||||
<style> |
<style> |
||||||
|
.container { |
||||||
|
display: flex; |
||||||
|
justify-content: space-around; |
||||||
|
} |
||||||
</style> |
</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