位置: IT常识 - 正文

Github 用户查询案例【基于Vue2全局事件总线通信】(github账号在哪里看)

编辑:rootadmin
Github 用户查询案例【基于Vue2全局事件总线通信】

推荐整理分享Github 用户查询案例【基于Vue2全局事件总线通信】(github账号在哪里看),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:github如何搜索用户名,github账号在哪看,github查找用户,github用户数,github如何查找用户,github查找用户,github用户数,github用户数,内容如对您有帮助,希望把文章链接给更多的朋友!

前言:

        本次案例是一个基于 Vue2 的全局事件总线通信的仿 Github 用户搜索模块,使用的接口是 Github 官方提供的搜索接口: https://api.github.com/search/users?q=xxx(发送请求时需要将输入的用户名称绑定替换掉xxx),如果对全局事件总线不太熟练的小伙伴可以看这篇文章:http://t.csdn.cn/oHEOWhttp://t.csdn.cn/oHEOW

文章目录:

一:效果展示 

二:代码分析

2.1 绑定自定义事件 

2.2 触发自定义事件 

三:源码获取

一:效果展示 未搜索用户页面

 查询后加载中页面Github 用户查询案例【基于Vue2全局事件总线通信】(github账号在哪里看)

 查询成功渲染页面

点击头像或下部链接进入用户主页

 查询失败页面报错提示

二:代码分析

代码共分为了两个子组件,一个是搜索组件(Search),另一个是列表组件(List),其次search组件中输入框v-model双向数据绑定,点击搜索后开始查询,其中过程分为了四步:第一是未搜索的欢迎页面背景,第二是请求未加载出来的loading背景,第三是渲染用户列表,第四是请求失败的报错提示页面背景。

2.1 绑定自定义事件 

绑定自定义事件在List组件中,data中的数据是定义了userinfo对象来存放其四个状态的布尔值,后续的数据传递是直接传递userinfo这个对象,使用 $on 绑定自定义事件 getuserinfo,当这个事件触发时执行后面的箭头回调函数,将传递来的对象接收并覆盖掉data中原有的四个状态布尔值。

<script>export default { name:'List', data() { return { UserInfo:{ iswelcome:true, isloading:false, users:'', error:'' } } }, mounted(){ this.$bus.$on('getUserInfo',(datas)=>{ // console.log('list组件收到了传来的用户数据',res); this.UserInfo=datas console.log(datas); }) }}</script>2.2 触发自定义事件 

点击搜索按钮即可使用 $emit 触发自定义事件,在请求成功前会将 isloading 改为true,其余改为false进行数据传递,传递给 list 组件后期就会显示出loading的背景页面,其余同理

<script>export default { name:'Search', data(){ return { ipt_value:'', } }, methods:{ search(){ this.$bus.$emit('getUserInfo',{iswelcome:false,isloading:true,users:'',error:''}) this.$axios.get(`https://api.github.com/search/users?q=${this.ipt_value}`).then( response => { this.$bus.$emit('getUserInfo',{iswelcome:false,isloading:false,users:response.data.items,error:''}) }, error => { console.log(error); this.$bus.$emit('getUserInfo',{iswelcome:false,isloading:false,users:'',error:error}) } ) this.ipt_value='' } }}</script>三:源码获取

私聊我即可,感谢支持

本文链接地址:https://www.jiuchutong.com/zhishi/299076.html 转载请保留说明!

上一篇:程序员看过都说好的资源网站,看看你都用过哪些?(程序员才能看懂的梗)

下一篇:CSS中的四种定位方式(css5个定位)

  • 12306密码格式是什么(12306用户密码格式)

    12306密码格式是什么(12306用户密码格式)

  • 怎么知道朋友圈是不是仅我可见(怎么知道朋友圈是不是被屏蔽了)

    怎么知道朋友圈是不是仅我可见(怎么知道朋友圈是不是被屏蔽了)

  • 查找iphone无网络连接怎么办(苹果查找无网络可不可以用)

    查找iphone无网络连接怎么办(苹果查找无网络可不可以用)

  • 苹果绑定支付宝付款方式被拒(苹果绑定支付宝付款怎么解除)

    苹果绑定支付宝付款方式被拒(苹果绑定支付宝付款怎么解除)

  • 如果咸鱼买家要强行退货怎么办(闲鱼买家一定要退货怎么办)

    如果咸鱼买家要强行退货怎么办(闲鱼买家一定要退货怎么办)

  • 通信设计是做什么(通信设计有没有前景)

    通信设计是做什么(通信设计有没有前景)

  • 一加怎么唤醒小布(一加怎么唤醒小布语音助手)

    一加怎么唤醒小布(一加怎么唤醒小布语音助手)

  • vivo手机怎样把即刻天气添加到桌面(vivo手机怎样把游戏隐藏起来)

    vivo手机怎样把即刻天气添加到桌面(vivo手机怎样把游戏隐藏起来)

  • 占位符和文本框的区别(占位符和文本框的关系)

    占位符和文本框的区别(占位符和文本框的关系)

  • 腾讯怎么更换微信账号(腾讯怎么更换微信)

    腾讯怎么更换微信账号(腾讯怎么更换微信)

  • MagicBook 14有雷电3接口吗(magicbook14有雷电4接口吗)

    MagicBook 14有雷电3接口吗(magicbook14有雷电4接口吗)

  • vivox27有面部解锁吗(vivoX27有面部解锁吗)

    vivox27有面部解锁吗(vivoX27有面部解锁吗)

  • 压缩袋的使用方法(压缩袋的使用方法手抽)

    压缩袋的使用方法(压缩袋的使用方法手抽)

  • 微信公交车乘车码在哪里(微信公交车乘车码怎么用)

    微信公交车乘车码在哪里(微信公交车乘车码怎么用)

  • 怎么查看黑名单的短信(怎么查看黑名单的人是否打过电话?)

    怎么查看黑名单的短信(怎么查看黑名单的人是否打过电话?)

  • 华为优享版啥区别(华为手机优享版和标准版)

    华为优享版啥区别(华为手机优享版和标准版)

  • 华为mate30跟pro区别(华为mate30跟pro有什么区别)

    华为mate30跟pro区别(华为mate30跟pro有什么区别)

  • 数字振动为什么伤眼(数字振动没有)

    数字振动为什么伤眼(数字振动没有)

  • vivox27支持快充吗(vivox27支持快充协议吗)

    vivox27支持快充吗(vivox27支持快充协议吗)

  • 证书验证失败怎么回事(证书验证失败怎么弄)

    证书验证失败怎么回事(证书验证失败怎么弄)

  • 借的充电宝可以在别的地方还吗(借的充电宝可以充两个手机吗)

    借的充电宝可以在别的地方还吗(借的充电宝可以充两个手机吗)

  • 公交卡在哪里充值(市民卡充值公交卡在哪里充)

    公交卡在哪里充值(市民卡充值公交卡在哪里充)

  • 前端开发工程师简历(前端开发工程师是干嘛的)

    前端开发工程师简历(前端开发工程师是干嘛的)

  • mysql中binlog有什么作用(mysql binlog是什么)

    mysql中binlog有什么作用(mysql binlog是什么)

  • mysql事务启动的方式(mysql事务引擎)

    mysql事务启动的方式(mysql事务引擎)

  • 企业季度所得税申报表怎么填写
  • 申报所得税季初资产总额怎么填?
  • 以前年度多缴纳的企业所得税退还
  • 累计折旧影响所得税费用吗
  • 民非企业附加税入什么科目
  • 职工薪酬会计准则
  • 建筑业营改增的主要内容
  • 工程劳务分包合同中的分包范围
  • 购入生产产品用的机器设备一台
  • 出口货物退回需要进口税吗
  • 生产中的原料回收如何做会计帐务处理?
  • 拿票报销的交通费要交个人所得税吗
  • 免税企业减免所得税政策
  • 报税没有印花税怎么处理
  • 可供出售债券投资
  • 申报工会经费怎么做账
  • 年度终了,会计部门都要将旧账编造清册
  • 关联公司代付款
  • 研发支出是否可以抵税
  • 年末利润分录
  • mac鼠标移动到角落立刻显示桌面
  • 私营公司股权转让
  • linux网络接口状态命令
  • mmc.exe是什么
  • 窗函数的作用
  • 职工取得全年一次性奖金如何计算缴纳个人所得税?
  • 报废车怎么走流程
  • 公允价值变动损益借贷方向增减
  • el-table懒加载合并行
  • php实现的常规正态分解
  • 文化事业建设费减免政策
  • 残疾人保障金工资总额包括年终奖吗
  • 企业法人歇业后诉讼主体确认
  • thinkphp extend
  • 区块链教程大全
  • python的series
  • 土地成本会计分录
  • 往来款项的含义
  • 其他资本公积核算科目
  • 营改增后还有企业所得税吗?
  • 每个季度30万免增值税
  • 装修公司开增值税专用发票几个点
  • 帝国cms wordpress
  • 织梦安装完要删除哪个文件
  • 织梦怎么调用当前栏目下的文章
  • 预收账款和预付账款的区别
  • SQL Server 2008 R2 为用户权限分配的操作步骤
  • 职工教育经费是从工资里扣吗
  • 小规模在税务局开专票需要什么材料
  • 销售退回的会计分录 预计负债
  • 一般纳税人只开普票不开专票免税
  • 单位租个人房子租房合同
  • mysql字段超长
  • windows server 2008 r2离线激活
  • xp系统怎么连接电脑
  • mac截图清晰度设置方法
  • 管理需要
  • win7电脑怎么设置
  • gcasSWUpdater.exe是什么进程 有什么作用 gcasSWUpdater进程查询
  • win8系统桌面图标
  • win10更新后电脑黑屏
  • linux内核的作用
  • win7系统打开文件会闪退
  • 一直显示正在安装windows
  • win8的应用商店
  • opengl阴影平移
  • 表示网页行为的是
  • js双击触发
  • 基于javascript的毕业设计
  • js模拟touch
  • jquery 图片插件
  • python 性能
  • js操作对象的方法
  • 总分机构在同一县城企业所得税需要预交吗
  • 商铺 评估价
  • 清税申报表怎么填写
  • 新疆办房产证需要多久能拿证
  • 留抵税额退税政策2023
  • 企业代扣代缴个税
  • 武汉税务地区编号
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设