Vue 2.x – Github小案例
项目结构
├── node_modules
├── public
│ ├── favicon.ico
│ ├── css
│ │ └── bootstrap.css
│ └── index.html
├── src
│ ├── assets
│ │ └── logo.png
│ │── component
│ │ ├── List.vue
│ │ └── Srearch.vue
│ │── App.vue
│ │── main.js
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
├── package-lock.json
main.js
// 引入vue
import Vue from 'vue'
// 引入App
import App from './App.vue'
// 关闭生产提示
Vue.config.productionTip = false
// 创建Vm
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.vue";
import List from "./components/List.vue";
export default {
name: "App",
components: { Search, List },
};
</script>
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="getUsers">Search</button>
</div>
</section>
</template>
<script>
import axios from "axios";
export default {
name: "Search",
data() {
return {
keyWord: "",
};
},
methods: {
getUsers() {
// 请求前更新list的数据
this.$bus.$emit("updataListData", {
isFirst: false,
isLoding: true,
errMsg: "",
users: [],
});
axios
.get("https://api.github.com/search/users?q=" + this.keyWord)
.then((res) => {
// 请求成功
this.$bus.$emit("updataListData", {
isLoding: false,
errMsg: "",
users: res.data.items,
});
})
.catch((err) => {
//请求失败
this.$bus.$emit("updataListData", {
isLoding: false,
errMsg: err.message,
users: [],
});
});
},
},
};
</script>
<style>
</style>
List.vue
<template>
<div class="row">
<!-- 展示用户列表 -->
<div
class="card"
v-show="info.users.length"
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">欢迎使用!</h1>
<!-- 展示加载信息 -->
<h1 v-show="info.isLoding">加载中。。。。</h1>
<!-- 展示错误信息 -->
<h1 v-show="info.errMsg">{{ info.errMsg }}</h1>
</div>
</template>
<script>
export default {
name: "List",
data() {
return {
info: {
users: [],
isFirst: true,
isLoding: false,
errMsg: "",
},
};
},
mounted() {
this.$bus.$on("updataListData", (dataObj) => {
// this.info = dataObj;
// 不丢失isFirst
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: 0.75rem;
margin-bottom: 2rem;
border: 1px solid #efefef;
text-align: center;
}
.card > img {
margin-bottom: 0.75rem;
border-radius: 100px;
}
.card-text {
font-size: 85%;
}
</style>
效果截图
版权声明:
作者:Ne-21
链接:https://blog.gocos.cn/archives/133.html
来源:云淡风轻
文章版权归作者所有,未经允许请勿转载。
THE END
0
二维码
海报
Vue 2.x – Github小案例
项目结构
├── node_modules
├── public
│ ├── favicon.ico
│ ├── css
│ │ └── bootstrap.css
│ └── index.html
├── src
│ ├── assets
│ │ └─……

共有 0 条评论