Vue插件：Vue-resource github搜索示例

* 博客文章部分截图及内容来自于学习的书本及相应培训课程以及网络其他博客，仅做学习讨论之用，不做商业用途。
* 如有侵权，马上联系我，我立马删除对应链接。
* @author Alan
* @Email no008@foxmail.com

 

1：安装插件   vue-resource

vue的插件库，在vue1.0年代使用几率很高

2：界面效果

3：代码信息

说明：该示例代码基本上是与《“Vue 中通过事件总线方式组件间传递数据及调用 Vue脚手架中的axios数据调用方式获取github提供的用户接口数据信息 ”》一文中的代码相同。

         故：此处只列出修改的内容：

  3.1：main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'

// 引入 vue插件： vue-recource
import vueResource from 'vue-resource'

//关闭Vue生产提示
Vue.config.productionTip=false;

// 使用插件
Vue.use(vueResource);

// 创建Vm
const vm = new Vue(  {
        el:'#app',
        render: (h) => h(App),
        //添加全局事件总线对象
        beforeCreate(){
             Vue.prototype.$bus=this;
        }
   });

3.2：InfoSearch.vue

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

<script>


export default {
    /* 组件名 */
    name: 'InfoSearch',
    /* mixin(混入)  */
    mixins: [],
    /* 配置声明子组件  */
    components: {},
    /* 组件间数据、方法传值接收区  */
    props: [],
    /* 数据对象：数据赋值声明  */
    data() {
        return {
            keyWord:''
        }
    },
    /* 计算属性：计算区  */
    computed: {},
    /* 检测区  */
    watch: {},
    /*   */
    created() { },
    /*  挂载区 */
    mounted() {   },
    /*  方法区 */
    methods: {
        // 查询
        searchUsers(){
            console.log(this);

            // 请求前更新list数据
            this.$bus.$emit('updateListData',{isFirst:false,isLoading:true,errMsg:'',users:[]})  ;
            this.$http.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 =>{
                    console.log('请求成功了',error.message);
                    // 请求失败后更新list的数据
                    this.$bus.$emit('updateListData',{isLoading:false,errMsg:error.message,users:[]})  ;
                }
            );

        }

    }
}
</script>

<style scoped lang="less">

</style>

---