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

  • 微信营销怎样才能更好的推广自己的产品?(微信营销怎样才能赚钱)

    微信营销怎样才能更好的推广自己的产品?(微信营销怎样才能赚钱)

  • 真我gtneo2t有红外吗(真我gtneo2颜色)

    真我gtneo2t有红外吗(真我gtneo2颜色)

  • vivo手机怎么调出下面的三个按键(vivo手机怎么调时间和日期)

    vivo手机怎么调出下面的三个按键(vivo手机怎么调时间和日期)

  • 计算机用来表示存储空间大小的基本单位(计算机用来表示内存储器容量的基本单位是)

    计算机用来表示存储空间大小的基本单位(计算机用来表示内存储器容量的基本单位是)

  • 苹果手机能装两个卡吗(苹果手机怎么装卡)

    苹果手机能装两个卡吗(苹果手机怎么装卡)

  • 新手机玩一会儿就发热正常吗(新手机玩一会儿就很烫是什么原因)

    新手机玩一会儿就发热正常吗(新手机玩一会儿就很烫是什么原因)

  • 小米8快充图标不出现(小米8快充图标不见了)

    小米8快充图标不出现(小米8快充图标不见了)

  • 钉钉的视频会议最多容纳多少人(钉钉的视频会议爆满怎么办)

    钉钉的视频会议最多容纳多少人(钉钉的视频会议爆满怎么办)

  • iPhone微信视频手机发热严重(iphone微信视频手机发烫怎么解决)

    iPhone微信视频手机发热严重(iphone微信视频手机发烫怎么解决)

  • 荣耀play4t怎么设置返回键(荣耀play4t怎么设置热点连接人数)

    荣耀play4t怎么设置返回键(荣耀play4t怎么设置热点连接人数)

  • 淘宝取消的订单能恢复吗(淘宝取消的订单能加购物车)

    淘宝取消的订单能恢复吗(淘宝取消的订单能加购物车)

  • 360路由器用户名是什么(360路由器用户名密码错误)

    360路由器用户名是什么(360路由器用户名密码错误)

  • 苹果xs max是什么屏幕(苹果xs max是什么档次)

    苹果xs max是什么屏幕(苹果xs max是什么档次)

  • 天猫精灵一代和二代的区别(天猫精灵一代和二代有啥区别)

    天猫精灵一代和二代的区别(天猫精灵一代和二代有啥区别)

  • 苹果手机画图功能在哪(苹果手机画图在哪里画)

    苹果手机画图功能在哪(苹果手机画图在哪里画)

  • 电脑qq音乐怎么退出(电脑qq音乐怎么一起听歌)

    电脑qq音乐怎么退出(电脑qq音乐怎么一起听歌)

  • vivox27的ai键有什么用(vivox27旁边的ai键怎么给打开)

    vivox27的ai键有什么用(vivox27旁边的ai键怎么给打开)

  • 百度浏览器如何全屏显示(百度浏览器如何设置无痕浏览)

    百度浏览器如何全屏显示(百度浏览器如何设置无痕浏览)

  • 云集微店如何开店(云集微店app)

    云集微店如何开店(云集微店app)

  • 空格键是哪个(电脑空格键是哪个)

    空格键是哪个(电脑空格键是哪个)

  • Windows7纯净版系统打开DMP文件的方法(win7纯净版系统之家)

    Windows7纯净版系统打开DMP文件的方法(win7纯净版系统之家)

  • Linn of Quoich瀑布旁的碗状岩石洞,苏格兰阿伯丁郡 (© AWL Images/Danita Delimont)(fall 瀑布)

    Linn of Quoich瀑布旁的碗状岩石洞,苏格兰阿伯丁郡 (© AWL Images/Danita Delimont)(fall 瀑布)

  • 新办企业购置设备怎么抵税
  • 变更税务流程登记流程和资料
  • 滞留票有什么影响
  • 购买办公用品为什么不能用现金
  • 预包装食品是否备案怎么查询
  • 发票金额多开了有事吗
  • 安装设备领用自产产品按成本还是计税价格
  • 将资产货物用于业务宣传增值税
  • 企业无法收回的账款
  • 增值税专用发票的税率是多少啊
  • 出口退税的企业范围
  • 拿票报销的交通费要交个人所得税吗
  • 企业税收扣除标准
  • 关联交易类型有哪些
  • 费用无发票财务怎么做账
  • 待处理财产损益科目编码
  • 社保已申报未缴费可以减员吗
  • 工伤医疗费会计分录
  • 高新技术企业研发人员学历要求
  • 成本费用包括什么项目
  • 外贸企业代理出口销售的出口退税手续
  • vue批量上传图片至oss
  • php使用memcache
  • yolov8目标检测测试输出类别个数
  • vue怎么让按键启用和禁用
  • 日本的萤火虫
  • php批量上传
  • 债务重组收益会计处理
  • 独立核算统负盈亏和独立核算自负盈亏的区别
  • esp8266 dht22
  • 高新技术企业取消资格怎么处罚
  • css经典面试题
  • 详解Yii2 定制表单输入字段的标签和样式
  • 简单解决微信文案的方法
  • 使用什么指令可以清空memcached数据库中的所有数据
  • 生产企业支付的车间劳务外包费入账科目
  • 外购应税消费品的纳税人是谁
  • 出口运费怎么入账
  • 个人所得税退税退多少钱怎么算
  • 小微小型微利企业表述正确的有
  • 房产税土地税会减免吗
  • 工商年报资产状况公示还是不公示
  • 并购 投资
  • 原材料跌价分录
  • 红字更正法和红字冲销
  • 油卡办理需要多久?
  • 客户退货,但不退货
  • 航天金税服务费不交会怎样
  • 利润率多少算好
  • 现销方式
  • 工程款结清确认书模板
  • 毛利和净利的区别大白话
  • 原始凭证的会计分录
  • sqlserver恢复模式简单和完整
  • mysql在本地主机创建用户账号
  • .exe是什么软件
  • 系统问题怎么处理
  • zhudongfangyu.exe是什么进程,可以删除吗
  • aliwssv.exe是什么进程
  • window8更新10
  • winxp的控制面板在哪里
  • ssh直接输入密码 linux
  • 2021年win10累积更新
  • 消除类策略游戏
  • (1)cocos2d-x-2.2.4搭建windows开发环境
  • cocos2dx3.4 Label
  • cocos creator 资源加密
  • xtemplate node.js 的使用方法实例解析
  • opengl es4
  • unity smooth
  • js插件大全
  • unity中assets文件夹的作用
  • javascript的介绍
  • 怎么利用python处理批量表格
  • python怎么处理json数据
  • android 获取手机屏幕截图
  • 担保费属于什么服务
  • 税务登录 河北省地方税务局
  • 土地增值税逾期罚款
  • 烟叶税是谁交
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设