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>

效果截图