黑马模板网专注企业网站模板制作，包括企业pbootcms网站模板，静态网页模板，网站源码下载，HTML网站模板等等。
免责声明：本站所有资源(模板、图片)搜集整理于互联网或者网友提供，仅供学习与交流使用，如果不小心侵犯到你的权益，请及时联系我们删除该资源。
main.js
//引入Vue
import Vue from "vue";
//引入vue-resource
import vueResource from 'vue-resource';
//引入App
import App from './App';
//关闭Vue的生产提示
Vue.config.productionTip = false;
Vue.use(vueResource); //使用vueResource插件来发送请求
new Vue({
el: '#app',
render: h => h(App),
beforeCreate() {
Vue.prototype.$bus = this;
}
});
App.vue
<template>
<div class="container">
<Search/>
<List/>
</div>
</template>
<script>
import Search from "@/components/Search";
import List from "@/components/List";
export default {
name: "App",
components:{
Search,
List
}
}
</script>
<style lang="css">
</style>
Search.vue
<template>
<section class="jumbotron">
<h3 class="jumbotron-heading">Search Github Users</h3>
<div>
<input type="text" placeholder="enter the name you search" v-model="keyword"/>
<button @click="searchUsers">Search</button>
</div>
</section>
</template>
<script>
export default {
name: "Search",
data() {
return {
keyword: '',
}
},
methods:{
//使用全局事件总线在组件间传递数据
searchUsers(){
this.$bus.$emit('updateListData', {
isFirst: false,
isLoading: true,
errMsg: '',
users: []
})
this.$http.get(`https://api.github.com/search/users?q=${this.keyword}`)
.then(res => {
console.log(res.data.items);
this.$bus.$emit("updateListData", {
isLoading: false,
errMsg: '',
users: res.data.items
});
})
.catch(e => {
console.log(`请求失败:${e.message}`)
this.$bus.$emit("updateListData", {
isLoading: false,
errMsg: e.message,
users: []
});
});
}
}
}
</script>
<style scoped>
</style>
List.vue
<template>
<div class="row">
<!--展示用户列表-->
<div v-show="info.users.length" class="card" v-for="user in info.users" :key="user.login">
<a :href="user.html_url" target="_blank">
<img :src="user.avatar_url" style='width: 100px'/>
</a>
<p class="card-text">{{ user.login }}</p>
</div>
<!---欢迎词-->
<h1 v-show="info.isFirst">Welcome!</h1>
<!--加载中--->
<h1 v-show="info.isLoading">Loading...</h1>
<!---错误信息-->
<h1 v-show="info.errMsg">Something has been wrong, errorMessage: {{ info.errMsg }}</h1>
</div>
</template>
<script>
export default {
name: "List",
data(){
return {
info : {
isFirst: true, //是否为第一次使用
users:[],
isLoading: false, //是否在加载中
errMsg: '',
}
}
},
mounted() {
this.$bus.$on('updateListData', (dataObj) => {
// console.log(`我是list，接到了数据data:`, users);
// this.isFirst = isFirst;
// this.isLoading = isLoading;
// this.errMsg = errMsg;
// this.users = users;
this.info = { ...this.info, ...dataObj };
});
}
}
</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;
}
.card > img {
margin-bottom: .75rem;
border-radius: 100px;
}
.card-text {
font-size: 85%;
}
</style>
