vue github案例（发送get请求获取数据）

最新推荐文章于 2024-08-31 21:24:45 发布
最新推荐文章于 2024-08-31 21:24:45 发布
阅读量533 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/MCCLS/article/details/119088601
本文介绍如何通过对象方式传递参数来优化代码结构，提高代码可读性和维护性，并讨论了在Vue项目中正确引入第三方库的方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

要点：

以对象的方式进行传参可以让代码可读性提升,并且可以精简代码量

 

 

实现一个小案例,当serch时会返回一个对应输入内容的页面 

 这边我们使用到了第三方库bootstrap.css

但如果在src中建立assets文件放入bootstrap.css然后在要用到的组件中添加上引入,

这样引入就会报错因为可能这边有vue无法识别的东西,不推荐这么引入

 推荐方法在public中创建css文件夹把css的第三方库m放入,然后在html中写入引入注意这边的./形式不一样

 

 

 

 完善一下,list会有着四种情况

然后

 这样写的话代码冗余太多不好而且不够语义化,让人看不懂代码

要写成对象的形式

不会写出这样的东西,因为这样写相当于把_data里面的getset都弄没了

 

 这样写就行

前面也得改

 

但如果这边这样写会把isfirst搞丢了

 

 

 解决方法1：

加上isFirst

解决方法2

进行对info对象里数据的替换

 使用es6的写法,红色框和绿色框进行合并重复的则替换成绿色框的

 而且这么写还有个好处函数传参乱了也没事

Vue github用户搜索案例
Errol's Blog
04-11 1339
Vue github用户搜索案例
Vue2（十一）：脚手架配置代理、github案例、插槽
Hdhhdhbsjxbdhvyg的博客
03-28 1598
回顾常用的ajax发送方式： （1）xhr 比较麻烦，不常用 （2）jQuery 核心是封装dom操作，所以也不常用 （3）axios 优势：体积小、是promise风格的、支持请求拦截器和响应拦截器 （4）fetch
Vue resource中的GET与POST请求的实例代码
12-09
前言：vue-resource 使用比 jQuery 更加简洁的方式实现了异步请求功能，还提供了比如 interceptors 这样处理请求过程中行为的功能。下面介绍下vue-resource中常用的GET与POST请求使用与封装方法。 访问 Github 获取最新的开发文件与文档 特征： 支持 Promise API 和 URI Templates 支持请求过程中使用拦截器（interceptoers） 支持 Firefox，Chrome，Safari，Opera 和 IE9+ 非常的小（压缩后之后14KB，在启用 gzipped后只有5.3KB） 参数说明： 参数说明很
Ajax请求github接口数据
weixin_39676449的博客
03-08 654
一.实现步骤及原理： 二.示例代码： <button id="btn">请求github接口</button> <br> <h1>调用所有github的用户信息</h1> <div id=&q
github get 请求指定页面的代码
dicha7140的博客
04-23 185
https://raw.githubusercontent.com/dragon8github/wx-h5/master/push.sh 转载于:https://www.cnblogs.com/CyLee/p/8916965.html
vue get请求实例获取笑话
weixin_44180173的博客
02-21 536
写的一个简单的vue get请求 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试get实例(runoob.com)</title> <script src="https://cdn.staticfile.org/vue/2.4.2...
get请求
github_38111380的博客
05-22 538
超链接返会的就是get请求
vue 请求后台数据的实例代码
01-19
安装请参考https://github.com/pagekit/vue-resource官方文档 在入口函数中加入 import VueResource from 'vue-resource' Vue.use(VueResource); 在package.json文件中加入 dependencies: { vue: ^2.2.6, vue-...
Vue58 github案例
Rockandrollman的博客
08-31 1074
/请求成功后更新List的数据。//请求前更新List的数据。//请求后更新List的数据。
Vue2-脚手架配置代理(同源策略及跨域问题)、github获取用户案例、vue-resource、插槽
weixin_56498069的博客
08-20 1156
Vue2-脚手架配置代理(同源策略及跨域问题)、github获取用户案例、vue-resource、插槽
Ajax请求github真实接口数据
qq_45044292的博客
04-19 273
<body> <button>请求所以git信息</button> <h1>用户信息</h1> <div id="DI"> </div> <script> document.getElementsByTagName('button')[0].addEventListe...
github搜索案例（vue版本）之展示数据
richest_qi的博客
05-11 255
文章目录App.vue（App组件）Search.vue（Search组件）List.vue（List组件）相关链接 代码变更涉及的文件有： App.vue，即App组件。 components/Search.vue，即Search组件。 components/List.vue，即List组件。 App.vue（App组件） <template> <div id="app"> <Search :saveUsers="saveUsers"/> &l
get命令
weixin_59196705的博客
06-06 519
1. 创建和删除分支(了解即可) 创建分支命令：git branch 分支名 查看所有分支命令：git branch 切换分支命令：git checkout 分支名 合并分支到master分支上命令： 首先切换到master分支，git checkout master，然后git merge 分支名。即将创建的分支合并到master上。 删除分支命令：git branch -d 分支名2. Git Gui GIT官方网站为了解决部分用户通过命令行对git工具使用时的
24、react 请求 github 用户信息案例
大家好，我是+V
09-20 389
占位，后期补上。
vue知识（五）axios、git命令
weixin_65548623的博客
11-02 670
修改请求url/以后的请求都不用带前缀基地址了----运行时，axios的baseURL会自动拼在前面。axios底层还是原生JS实现，内部通过Promise封装的。3.如何拿到Promise里ajax的成功或失败的结果？2.axios哪个选项，可以把参数自动装入到请求体中？1.post请求方式，一般在哪里传递数据给后台呢？3.axios默认发给后台请求体数据格式是什么？axios是一个专门用于发送ajax请求的库。1.axios如何发起一次get请求。c.在请求体/请求头传参给后台。
记录前端入门第一篇——VUE框架下axios得得get请求
药的专栏
04-03 407
先贴代码： <script> import axios from 'axios' export default { name: 'App', data () { return { show: true } }, mounted () { axios.get(url路径).then(function (reponse) { console.log(reponse) }).catch(function (error) {
用Github实现URL转发
泡泡虾
05-15 1309
参考链接（随便找的）: https://blog.youkuaiyun.com/FlowerDance17/article/details/80685112?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-4.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPa
vue发送GET请求传参的几种方式
热门推荐
zhangzhenyan19930312的博客
04-23 2万+
使用get传参方法： 1、通过url传递 2、通过params对象传递
vue实现github用户搜索案例
最新发布
11-25
Vue.js实现GitHub用户搜索功能的一个简单案例通常会涉及以下几个步骤： 1. **项目结构**：创建一个基本的Vue应用，包含`src`文件夹，其中包含`App.vue`作为入口文件，以及可能的`components`, `data`等其他目录。 2. **HTML模板**：在`App.vue`或一个新的`Search.vue`组件里，添加一个输入框用于用户输入查询关键词，以及一个按钮触发搜索操作。 ```html <template> <div> <input type="text" v-model="searchTerm" placeholder="搜索GitHub用户名..."> <button @click="searchUsers">搜索</button> <ul v-for="(user, index) in users" :key="index"> <li>{{ user.login }}</li> </ul> </div> </template> ``` 3. **数据绑定**：在`data`选项中初始化变量，如搜索词(`searchTerm`)和用户列表(`users`)。 ```js export default { data() { return { searchTerm: '', users: [], }; } }; ``` 4. **方法实现**：在`methods`对象中编写`searchUsers`函数，它会调用GitHub的API接口，传递搜索词，并处理响应结果。 ```js methods: { async searchUsers() { try { const response = await axios.get( `https://api.github.com/search/users?q=${this.searchTerm}` ); this.users = response.data.items; } catch (error) { console.error('Error fetching users:', error); } }, }, ``` 5. **错误处理和加载状态**：记得处理可能出现的网络请求错误，并可以显示一个占位符或加载信息，直到数据获取完成。 6. **Vue CLI 配置**：如果是在Vue CLI项目中，确保已经安装了axios库以便发送HTTP请求。如果没有安装，运行`npm install axios` 或者 `yarn add axios`。 这是一个基础的例子，实际应用可能需要考虑更多因素，比如错误处理、分页、用户认证等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值