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

 

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>

---