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

  • 北京通怎么查看电子居住证(北京通怎么查看居住证)

    北京通怎么查看电子居住证(北京通怎么查看居住证)

  • 华为p50pro无线充电怎么开启(华为p50pro无线充电协议)

    华为p50pro无线充电怎么开启(华为p50pro无线充电协议)

  • word表格斜线怎么弄(word表格斜线怎么删掉)

    word表格斜线怎么弄(word表格斜线怎么删掉)

  • 小米4c充电口用快充一直掉电(小米4c充电头是多少w)

    小米4c充电口用快充一直掉电(小米4c充电头是多少w)

  • 滴滴文字评价没有了(滴滴文字评价没了怎么办)

    滴滴文字评价没有了(滴滴文字评价没了怎么办)

  • 2g网络什么时候出来的(2g网络什么时候停运)

    2g网络什么时候出来的(2g网络什么时候停运)

  • id错误次数多要多久才能下载(苹果id多次错误)

    id错误次数多要多久才能下载(苹果id多次错误)

  • qq录音怎么发到微信上(qq里面录音怎么转发)

    qq录音怎么发到微信上(qq里面录音怎么转发)

  • 聊天记录迁移能看到删掉的信息吗(聊天记录迁移能看到对方的聊天记录吗)

    聊天记录迁移能看到删掉的信息吗(聊天记录迁移能看到对方的聊天记录吗)

  • 微信群转账功能在哪(微信群转账功能怎么打开)

    微信群转账功能在哪(微信群转账功能怎么打开)

  • 手机充电突然变很慢是什么问题(手机充电突然变慢是什么原因导致的)

    手机充电突然变很慢是什么问题(手机充电突然变慢是什么原因导致的)

  • 快手打卡是什么意思(快手打卡是什么意思,要钱不)

    快手打卡是什么意思(快手打卡是什么意思,要钱不)

  • qq静止多久显示4g(qq隐身多久会变离线)

    qq静止多久显示4g(qq隐身多久会变离线)

  • 抖音里拉黑对方,对方会收到信息提示吗(怎么在抖音里拉黑对方)

    抖音里拉黑对方,对方会收到信息提示吗(怎么在抖音里拉黑对方)

  • 定位与导航的区别(定位与导航的概念)

    定位与导航的区别(定位与导航的概念)

  • 原彩没有了有什么影响(原彩没有就一定不是原装屏么)

    原彩没有了有什么影响(原彩没有就一定不是原装屏么)

  • 荣耀9x有人脸识别功能吗(荣耀9x手机人脸识别)

    荣耀9x有人脸识别功能吗(荣耀9x手机人脸识别)

  • 腾讯怎么面对面传视频(腾讯怎么面对面共享)

    腾讯怎么面对面传视频(腾讯怎么面对面共享)

  • ps储存盘满了怎么办(ps存盘满怎么办)

    ps储存盘满了怎么办(ps存盘满怎么办)

  • 苹果6信号接收器在哪(苹果6信号接收器)

    苹果6信号接收器在哪(苹果6信号接收器)

  • 应用磁贴是什么意思(什么是电脑应用磁贴)

    应用磁贴是什么意思(什么是电脑应用磁贴)

  • 如何修改自己电脑的名称(如何修改自己电脑物理地址)

    如何修改自己电脑的名称(如何修改自己电脑物理地址)

  • 看这篇就够了——opencv与libopencv与cv_bridge的安装与使用(看了这篇文章感触很深的说说)

    看这篇就够了——opencv与libopencv与cv_bridge的安装与使用(看了这篇文章感触很深的说说)

  • 小规模纳税人可以开9%专票吗
  • 什么是纳税义务人,在理解这一观念时应注意哪些问题
  • 用友软件80端口被占用解决方法
  • 取得社会团体会费专用票据可以税前扣除吗
  • 发票第一联需要盖章嘛
  • 企业筹建期间利息支出税前扣除怎么算
  • 发票领回来了怎么读入发票
  • 股东个人为公司付的钱
  • 非居民企业适用的企业所得税税率
  • 装修预付款怎么做分录
  • 购进货品未取得发票如何处理
  • 出口抵减内销产品
  • 采购合同可以包含安装吗
  • 一般纳税人如何零申报
  • 红冲增值税专用发票需要收回原发票吗
  • 增值税扣税项目范围
  • 个税生产经营所得B表在哪里
  • 4s店付款
  • 企业银行保证金账户怎么查询
  • 饮料厂税率
  • 跨年度的收入如何做分录
  • 运费从货款中扣除后付款分录怎么做
  • 电脑系统还原步骤
  • 电脑开机无启动
  • 广告公司文化事业费怎么交
  • win10专业版怎样连接wifi
  • amr文件什么意思
  • 高新企业研发费用比例
  • 房产税和土地使用税征税对象
  • php copy函数
  • 工业企业应付会计工作内容
  • 好奇地看着我
  • 公司有收入可不交社保吗
  • 单位之间的争议由谁处理
  • 收到现金股利或债券利息时会计分录怎么做
  • 商品流通企业购入的商品采用售价金额法核算的
  • 费用多报销了,但已经给了,怎么办
  • 企业年度所得税怎么算
  • ce认证所需的模块有哪些
  • 购入车辆发生的费用
  • 什么是年化收益和绝对利率
  • 过渡期补贴是什么意思
  • 固定资产原价和账面价值的区别
  • 费用报销单一张写不完怎样转下一张?
  • 坏账收回来了怎么处理
  • 公司注销资本公积
  • 金融存款利率
  • 接受捐赠可以确认为收入吗
  • 个人购买股权和公司购买股权比较
  • 离职员工未休完的年假如何支付
  • 电子承兑汇票如何入账
  • 资产状况信息公示还是不公示
  • 进口关税怎么算增值税
  • 红字发票怎样记账
  • 零售货品
  • 教你怎么制作麻雀胶
  • 检测你的vps是不是真的
  • wdsvc.exe - wdsvc 是什么进程
  • win10更新后自动锁定
  • 彻底删除ubuntu系统
  • nmeo.exe是什么
  • macbookpro鼠标触控板
  • linux防火墙设置firewalld
  • win7系统无法共享win10系统打印机
  • 工商网银安装
  • win7怎么修改开机启动
  • win8.1技巧
  • nodejss
  • supervisor producer
  • shell自定义函数以及使用
  • python处理文本文件代码优化
  • JavaScript入门教程
  • JavaScript中的事件处理
  • jquery过滤选择器按照过滤规则分类包括?
  • Python中使用装饰器来优化尾递归的示例
  • 医保银行代扣是什么意思
  • 江西省联考成绩查询系统入口官网
  • 国家税务总局河北地税局
  • 2016年小微企业所得税优惠政策文号
  • 单位首次交社保医疗要多久才能享受
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设