Vue github用户搜索案例分享

目录

• 完成样式
• 1、public 下新建 css 文件夹
• 2、新建 Search.vue
• 3、新建 List.vue
• 4、App.vue 中引入并注册组件
• 请求数据
• 1、Search 中请求数据
• 2、传递数据
• 完善
• 使用 vue-resource

完成样式

1、public 下新建 css 文件夹

public 下新建 css 文件夹，放入下载好的 bootstrap.css，并在 index.html 中引入

2、新建 Search.vue

3、新建 List.vue

4、App.vue 中引入并注册组件

请求数据

1、Search 中请求数据

我们使用接口：https://api.github.com/search/users?q=xxx

请求上边的接口，传入关键字，用 axios 请求，返回数据如下：

我们关注以下数据即可

2、传递数据

我们在子组件 Search.vue 中写网络请求得到数据，需要在子组件 List 中展示，组件之间传递数据，这就用到了我们之前学的全局事件总线，确保 main.js 中安装了全局事件总线

List 中需要数据，我们就需要绑定事件，当 Search 得到数据触发事件后，List 回调就拿到了数据，然后循环遍历即可，

Search.vue 中网络请求数据后，触发事件

运行程序，搜索 test ，结果如下：

完善

• 1、当一进页面需要展示欢迎语
• 2、搜索过程中展示loading
• 3、搜索结束展示用户列表
• 4、搜索返回错误展示错误信息

在 List 中增加变量表示这些状态

Search.vue 中改变这些状态

运行程序：

使用 vue-resource

• 1、执行npm i vue-resource安装
• 2、main.js 引入并使用

......
//引入vue-resource
import vueResource from 'vue-resource'

......
//使用vue-resource插件
Vue.use(vueResource)

......

我们可以不引入 axios，axios.get 改为 this.$http.get 即可

这里只是了解使用 vue-resource，还是推荐使用 axios

到此这篇关于Vue github用户搜索案例分享的文章就介绍到这了,更多相关Vue github用户搜索内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！