位置: 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个定位)

  • 微博怎么只看博主的评论(微博怎么只看好友圈)

    微博怎么只看博主的评论(微博怎么只看好友圈)

  • 360浏览器怎么打不开网页(360浏览器怎么打开摄像头)

    360浏览器怎么打不开网页(360浏览器怎么打开摄像头)

  • iphone11的运行内存(iphone11的运行内存怎么看)

    iphone11的运行内存(iphone11的运行内存怎么看)

  • 拼多多看不到发货地吗(拼多多看不到发票怎么办)

    拼多多看不到发货地吗(拼多多看不到发票怎么办)

  • 斗鱼办一次卡能用多久(斗鱼一张办卡)

    斗鱼办一次卡能用多久(斗鱼一张办卡)

  • 苹果11微信视频黑屏怎么回事(苹果11微信视频悬浮窗怎么设置)

    苹果11微信视频黑屏怎么回事(苹果11微信视频悬浮窗怎么设置)

  • xr副卡没信号(苹果xr副卡无信号)

    xr副卡没信号(苹果xr副卡无信号)

  • 苹果6p怎样截屏快捷(苹果6p怎样截屏操作方法)

    苹果6p怎样截屏快捷(苹果6p怎样截屏操作方法)

  • oppoa11截屏怎么截屏(oppo a11截图)

    oppoa11截屏怎么截屏(oppo a11截图)

  • 怎么打平方的那个小2(怎样打平方)

    怎么打平方的那个小2(怎样打平方)

  • 什么成功实现并网发电(实现成功的标志是什么)

    什么成功实现并网发电(实现成功的标志是什么)

  • iphone7p一边充电一边掉电(苹果7一边充电一边玩电池往下掉)

    iphone7p一边充电一边掉电(苹果7一边充电一边玩电池往下掉)

  • 钢化膜有气泡对手机屏幕有影响吗(钢化膜有气泡对眼睛有影响吗)

    钢化膜有气泡对手机屏幕有影响吗(钢化膜有气泡对眼睛有影响吗)

  • 华为荣耀4手环充电时间(华为荣耀4手环怎么更换表盘)

    华为荣耀4手环充电时间(华为荣耀4手环怎么更换表盘)

  • pbbmoo是什么手机型号(pbem00是什么手机)

    pbbmoo是什么手机型号(pbem00是什么手机)

  • ipad怎么连接电视(IPAD怎么连接电脑充电)

    ipad怎么连接电视(IPAD怎么连接电脑充电)

  • 华为怎么安装未知来源(华为怎么安装未来之役)

    华为怎么安装未知来源(华为怎么安装未来之役)

  • 苹果手机微信语音通话怎么录音(苹果手机微信语音听筒怎么切换)

    苹果手机微信语音通话怎么录音(苹果手机微信语音听筒怎么切换)

  • 华为荣耀20i怎么清除后台(华为荣耀20i怎么刷机)

    华为荣耀20i怎么清除后台(华为荣耀20i怎么刷机)

  • vivox21录屏怎么没声音(vivox21录屏怎么录内部声音)

    vivox21录屏怎么没声音(vivox21录屏怎么录内部声音)

  • 对讲机ptt是什么意思(对讲机ptt键在哪个位置)

    对讲机ptt是什么意思(对讲机ptt键在哪个位置)

  • 荣耀v20nfc支持门禁吗(荣耀v20的nfc怎么用钥匙开门)

    荣耀v20nfc支持门禁吗(荣耀v20的nfc怎么用钥匙开门)

  • 瀑布屏和曲面屏有什么区别(瀑布屏和曲面屏买哪个)

    瀑布屏和曲面屏有什么区别(瀑布屏和曲面屏买哪个)

  • 数据湖和数据仓库的差别(数据湖和数据仓库hudi)

    数据湖和数据仓库的差别(数据湖和数据仓库hudi)

  • 苹果录像功能在哪里(iphone录像设置在哪里)

    苹果录像功能在哪里(iphone录像设置在哪里)

  • Win10 20H2 LSASS.exe自动重启故障已得到修复

    Win10 20H2 LSASS.exe自动重启故障已得到修复

  • from origin ‘null‘ has been blocked by CORS policy: Cross origin requests are only supported for ...

    from origin ‘null‘ has been blocked by CORS policy: Cross origin requests are only supported for ...

  • 收取违约金是否交税
  • 公司股东向公司借款
  • 减免税流程
  • 财务软件属于哪种软件
  • 全年一次性奖金个税计算
  • 一次性发放年终奖怎么税务筹划
  • 季度所得税申报表怎么申报
  • 转让不动产增值税纳税义务发生时间
  • 结转损益类收入科目的余额其中主营业务收入
  • 保险没有合同能退保吗
  • 出售股份的印花税怎么做分录?
  • 工厂报废的产品价格有规定吗
  • 企业用于在建工程购入的材料
  • 科技公司出售市场价格
  • 补记以前年度折旧
  • 汽车融资租赁行业发展趋势
  • 武汉房产税多少
  • 纳税人税号后面的数字
  • 风险纳税人如何解除
  • 非同一控制企业合并商誉
  • 预转固的好处
  • 技术服务费属于什么大类
  • 固定资产清查盘亏账务处理
  • 航天金穗怎么开票
  • 个人补缴公积金需要什么手续
  • Win11任务栏不显示
  • win10无法登录微信
  • 苹果mac dns设置
  • linux文本编辑器命令
  • 什么货物出口最多
  • 在win7中怎么安转只兼容win10的软件
  • centos停止发布
  • win7为什么现在不能用了
  • 怎么用onekey重装系统
  • 个税扣除项怎么扣除
  • php数组转js数组
  • 期末结转之前有哪些注意事项
  • php fopen()
  • springboot整合websocket怎么接受图片消息
  • php强制下载文件在哪
  • 个税返还的会计处理
  • 工资的会计账务处理
  • 外地工程预缴税款怎么入账啊
  • 财务管理中的折现率是指什么
  • 出租改自用房产税
  • 开专票明细太多怎么开
  • 企业所得税计算器在线计算
  • 在SQL Server中使用存储过程的优点包括
  • 商贸公司成本大吗
  • 暂估的原材料用不用记原材料明细账
  • 金税盘发票二维码怎么生成
  • 取得虚开增值税专用发票罪量刑标准
  • 用现金购买股票分录
  • 视同销售的账务处理如何做?
  • 现金流量表补充资料的作用
  • 新政府会计固定资产的核算与计量
  • 金税盘年服务费账务处理
  • 企业相关成本费用有哪些
  • 质量问题举例
  • 视同销售要以什么顺序确定销售额?
  • 代销货物收取手续费计入
  • 取消windows开机登录密码
  • windows阻止
  • win8.1怎么退出安全模式
  • win10系统如何创建家庭组
  • windows e
  • nodejs基础知识
  • jquery.min.js源代码
  • 安卓摄像头设置在哪里
  • python求解析解
  • jquery异常捕获
  • javascript中字符串
  • android canvas rotate
  • python如何入门
  • 如何查询以前月份发票超限量的申请
  • 电梯维修费的税率
  • 国家税务局39号公告退税
  • 个人医保缴费证明怎么打印
  • 深圳税务局完税证明
  • 委托人委托代理人的区别
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设