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" /> <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>
为人:谦逊、激情、博学、审问、慎思、明辨、 笃行
学问:纸上得来终觉浅,绝知此事要躬行
为事:工欲善其事,必先利其器。
态度:道阻且长,行则将至;行而不辍,未来可期
.....................................................................
------- 桃之夭夭,灼灼其华。之子于归,宜其室家。 ---------------
------- 桃之夭夭,有蕡其实。之子于归,宜其家室。 ---------------
------- 桃之夭夭,其叶蓁蓁。之子于归,宜其家人。 ---------------
=====================================================================
* 博客文章部分截图及内容来自于学习的书本及相应培训课程以及网络其他博客,仅做学习讨论之用,不做商业用途。
* 如有侵权,马上联系我,我立马删除对应链接。 * @author Alan -liu * @Email no008@foxmail.com
转载请标注出处! ✧*꧁一品堂.技术学习笔记꧂*✧. ---> https://www.cnblogs.com/ios9/
学问:纸上得来终觉浅,绝知此事要躬行
为事:工欲善其事,必先利其器。
态度:道阻且长,行则将至;行而不辍,未来可期
.....................................................................
------- 桃之夭夭,灼灼其华。之子于归,宜其室家。 ---------------
------- 桃之夭夭,有蕡其实。之子于归,宜其家室。 ---------------
------- 桃之夭夭,其叶蓁蓁。之子于归,宜其家人。 ---------------
=====================================================================
* 博客文章部分截图及内容来自于学习的书本及相应培训课程以及网络其他博客,仅做学习讨论之用,不做商业用途。
* 如有侵权,马上联系我,我立马删除对应链接。 * @author Alan -liu * @Email no008@foxmail.com
转载请标注出处! ✧*꧁一品堂.技术学习笔记꧂*✧. ---> https://www.cnblogs.com/ios9/