VUE学习(十九)、Github用户搜索案例

VUE学习(十九)、Github用户搜索案例

演示

项目文件

1、main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	beforeCreate() {
		// 挂载全局事件总线
		Vue.prototype.$bus = this
	},
})

2、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>

3、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">欢迎使用！</h1>
        <!-- 展示加载中 -->
        <h1 v-show="info.isLoading">加载中....</h1>
        <!-- 展示错误信息 -->
        <h1 v-show="info.errMsg">{{ info.errMsg }}</h1>
    </div>
</template>

<script>
export default {
    name: "List",
    data() {
        return {
            info: {
                isFirst: true,
                isLoading: false,
                errMsg: "",
                users: []
            }
        };
    },
    mounted() {
        this.$bus.$on("updateListData", (dataObj) => {
            // this.info = dataObj
            // 合并对象
            this.info = { ...this.info, ...dataObj };
            console.log(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>

4、Search.vue

<template>
    <section class="jumbotron">
        <h3 class="jumbotron-heading">搜索 Github 用户</h3>
        <div>
            <input type="text" placeholder="enter the name you search" v-model="keyWord" />
            &nbsp;
            <button @click="searchUsers">搜索</button>
        </div>
    </section>
</template>

<script>
import axios from "axios";
export default {
    name: "Search",
    data() {
        return {
            keyWord: ""
        };
    },
    methods: {
        searchUsers() {
            //请求前更新List的数据
            this.$bus.$emit("updateListData", { isLoading: true, errMsg: "", users: [], isFirst: false });
            // 请求数据
            axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
                (response) => {
                    console.log("请求成功了");
                    //请求成功后更新List的数据
                    this.$bus.$emit("updateListData", { isLoading: false, errMsg: "", users: response.data.items });
                },
                (error) => {
                    //请求后更新List的数据
                    this.$bus.$emit("updateListData", { isLoading: false, errMsg: error.message, users: [] });
                }
            );
        }
    }
};
</script>

推荐阅读

VUE笔记文章列表

1、VUE学习(一）、基于简单js引入的Vue快速入门——简单实例使用_醉瑾_的博客-CSDN博客

2、VUE学习(二)、计算属性vs侦听属性——基于案例的对比_醉瑾_的博客-CSDN博客

3、VUE学习(三)、绑定样式——class和style_醉瑾_的博客-CSDN博客

4、VUE学习(四)、条件渲染——v-if与v-show_醉瑾_的博客-CSDN博客

5、VUE学习(五)、列表渲染之：key原理、列表过滤、列表排序_醉瑾_的博客-CSDN博客

6、VUE学习(六)、vue 监测数据改变原理_醉瑾_的博客-CSDN博客

7、VUE学习(七)、收集表单数据_醉瑾_的博客-CSDN博客

8、VUE学习(八)、过滤器_醉瑾_的博客-CSDN博客

9、VUE学习(九)、内置指令、自定义指令_醉瑾_的博客-CSDN博客

10、VUE学习(十)、生命周期_醉瑾_的博客-CSDN博客

11、VUE学习(十一)、组件——非单文件组件、单文件组件_醉瑾_的博客-CSDN博客

12、VUE学习(十二)、vue脚手架的使用_醉瑾_的博客-CSDN博客

13、VUE学习(十三)、ref属性、props配置项、minix混入、自定义插件、scoped样式_醉瑾_的博客-CSDN博客

14、VUE学习(十四)、TodoList案例（基于props实现组件间通信通）_醉瑾_的博客-CSDN博客

15、VUE学习(十五)、组件自定义事件及todoList案例自定义事件完成_醉瑾_的博客-CSDN博客

16、VUE学习(十六)、全局事件总线及TodoList案例事件总线实现_醉瑾_的博客-CSDN博客

17、VUE学习(十七)、Vue封装的过度与动画_醉瑾_的博客-CSDN博客

18、VUE学习(十八)、VUE脚手架配置代理_醉瑾_的博客-CSDN博客

17、VUE学习(十七)、Vue封装的过度与动画_醉瑾_的博客-CSDN博客

18、VUE学习(十八)、VUE脚手架配置代理_醉瑾_的博客-CSDN博客