Vue59 github案例 vue-resource版本

news/2024/9/18 21:53:26/ 标签: github, vue.js, vue

代码

vue_1">List.vue

<template><div class="row"><!-- 展示用户列表 --><div v-show="info.users.length" class="card" v-for="user in info.users" :key="user.login"><a :href="user.html_url" target="_blank"><img :src="user.avatar_url" style='width: 100px'/></a><p class="card-text">{{user.login}}</p></div><!-- 展示欢迎词 --><h1 v-show="info.isFirst">欢迎使用!</h1><!-- 展示加载中 --><h1 v-show="info.isLoading">加载中....</h1><!-- 展示错误信息 --><h1 v-show="info.errMsg">{{info.errMsg}}</h1></div>
</template><script>export default {name:'List',data() {return {info:{isFirst:true,isLoading:false,errMsg:'',users:[]}}},mounted() {this.$bus.$on('updateListData',(dataObj)=>{this.info = {...this.info,...dataObj}})},}
</script><style scoped>.album {min-height: 50rem; /* Can be removed; just added for demo purposes */padding-top: 3rem;padding-bottom: 3rem;background-color: #f7f7f7;}.card {float: left;width: 33.333%;padding: .75rem;margin-bottom: 2rem;border: 1px solid #efefef;text-align: center;}.card > img {margin-bottom: .75rem;border-radius: 100px;}.card-text {font-size: 85%;}
</style>

vue_71">Search.vue

<template><section class="jumbotron"><h3 class="jumbotron-heading">Search Github Users</h3><div><input type="text" placeholder="enter the name you search" v-model="keyWord"/>&nbsp;<button @click="searchUsers">Search</button></div></section>
</template><script>export default {name:'Search',data() {return {keyWord:''}},methods: {searchUsers(){//请求前更新List的数据this.$bus.$emit('updateListData',{isLoading:true,errMsg:'',users:[],isFirst:false})this.$http.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(response => {console.log('请求成功了')//请求成功后更新List的数据this.$bus.$emit('updateListData',{isLoading:false,errMsg:'',users:response.data.items})},error => {//请求后更新List的数据this.$bus.$emit('updateListData',{isLoading:false,errMsg:error.message,users:[]})})}},}
</script>

vue_112">App.vue

<template><div class="container"><Search/><List/></div>
</template><script>import Search from './components/Search'import List from './components/List'export default {name:'App',components:{Search,List}}
</script>

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入插件
import vueResource from 'vue-resource'
//关闭Vue的生产提示
Vue.config.productionTip = false
//使用插件
Vue.use(vueResource)//创建vm
new Vue({el:'#app',render: h => h(App),beforeCreate() {Vue.prototype.$bus = this},
})

运行

在这里插入图片描述


http://www.ppmy.cn/news/1519549.html

相关文章

uniapp 生成H5 返回上一页 事件不执行

uniapp 生成H5 返回上一页事件不执行 背景&#xff1a;想根据返回的页面判断是否再返回一页 解决办法&#xff1a;uniapp&#xff0c;H5是先执行方法再返回&#xff0c;所以给事件增加延迟调用&#xff0c;如下代码 // 监听返回 onBackPress(e) {let pages getCurrentPages(…

数据结构(6.4_3)最短路径问题_Dijkstra算法

BFS的局限性 Dijkstra算法 1、 2、 3、 4、 如何使用数组信息 Dijkstra算法的时间复杂度 对比&#xff1a;Prim算法的实现思想 用于负权值带权图

docker实战基础三(Docker基础命令)

Docker 实战案例:构建镜像、查看容器运行信息、查看镜像构建信息 在这个实战案例中,我们将详细介绍如何构建Docker镜像、查看容器运行信息以及查看镜像构建信息。这些知识点非常实用,可以帮助你在实际工作中更好地利用Docker进行开发和运维。 一、构建Docker镜像 1. 创建…

【C++】C++STL 揭秘:Strng背后的底层逻辑

C语法相关知识点可以通过点击以下链接进行学习一起加油&#xff01;命名空间缺省参数与函数重载C相关特性类和对象-上篇 在上篇介绍string类的使用与理解&#xff0c;本篇将为大家来带关于string的底层实现逻辑&#xff0c;当然这不是一定库里面的实现逻辑。我们设计一个string…

Android13 动态控制状态栏和导航栏

前言 在Android系统中,状态栏(StatusBar)、导航栏(NavigationBar)以及下拉菜单(通常称为Notification Shade或Quick Settings Panel)构成了用户界面不可或缺的三个元素,它们共同为用户提供了丰富的信息显示与便捷的交互体验。具体而言,状态栏实时展示着时间、电池电量…

DMDSC集群安装

1. 环境描述 机器情况&#xff1a; 存储情况&#xff1a; 2. 部署前准备 2.1. 目录规划和创建 创建和规划目录在2个节点都需要执行。 DSC环境搭建的目录&#xff1a;/dmdba/dmdbms DM执行码和工具存放于目录&#xff1a;/dmdba/dmdbms/bin 配置文件存放于目录&#xff1a…

算法基础-区间合并

1、按照区间的左端点排序 2、 左端点小于等于ed&#xff0c;只需要更新ed和右端点的最大值 左端点大于ed&#xff0c;存入res中&#xff0c;并更新st和ed&#xff0c;最后一组数据手动插入res public class Main {public static void main(String[] args) {Scanner in new S…

信息安全--网络安全体系与安全模型(一)

网络安全体系概述 ■ 网络安全体系是网络安全保证系统的最高层概念抽象&#xff0c;是由各种网络安全单元按照一定的规则组成&#xff0c; 共同实现网络安全的目标。网络安全体系包括法律法规政策文件、安全策略、组织管理、技术措施、 标准规范、安全建设与运营、人员队伍、教…

【Zookeeper】Windows下安装Zookeeper(全面)

目录 1.下载 2.安装 3.环境变量配置 4.启动 1.下载 下载链接&#xff1a; Index of /dist/zookeeper (apache.org)https://archive.apache.org/dist/zookeeper/ 选择合适的版本&#xff0c;下载后缀名为tar.gz的文件下载&#xff1a; 2.安装 下载后将文件夹解压两次&am…

全国大学生数据建模比赛——深度学习

全国大学生数学建模比赛中&#xff0c;深度学习可以成为解决复杂问题的有力手段。 一、深度学习的优势在比赛中的体现 强大的模式识别能力&#xff1a;深度学习模型&#xff0c;如卷积神经网络&#xff08;CNN&#xff09;和循环神经网络&#xff08;RNN&#xff09;&#xff0…

MySQL知识点复习 - 事务篇

MySQL知识点复习 - 事务篇 由于在线上真没用过MySQL&#xff0c;一般用的都是PostgreSQL、Oracle和Sql Server&#xff0c;完美对八股文的神MySql没有一丝线上经验&#xff0c;故来小卷一手。 事务的特性是什么&#xff1f; 原子性&#xff1a;执行的任务要么是一次完成要么就…

VSCode手动创建SpringBoot项目的方法,及详细步骤

不废话&#xff0c;直接来吧&#xff01;这里以Windows系统、Maven项目构建和管理工具为例。 VSCode手动创建SpringBoot项目之前&#xff0c;首先需要先下载Maven。 Maven安装及环境变量配置 Maven包下载地址&#xff1a; https://maven.apache.org/download.cgi 可以下载…

Linux创建sysfs属性节点 - DEVICE_ATTR宏、device_create_file()、sysfs_create_group()

目录 简介&#xff1a; 一、DEVICE_ATTR介绍 1、DEVICE_ATTR宏 1.1 参数说明 1.2 调用方法 二、sysfs创建属性文件 1、创建一个sysfs属性文件 1.1 device_create_file()函数 1.2 device_create_file()实例 2、创建多个sysfs属性文件 2.1 sysfs_create_group()函数 2…

轻松享受远程办公:可道云teamOS,让自由与效率同行

职场生活中&#xff0c;我们常常会因为工作需要而面临出差的情况。在这种情况下&#xff0c;如何能与不在身边的公司同事组员&#xff0c;保持高效协作&#xff0c;就显得尤为重要了。 移动办公新体验 记得有一次&#xff0c;我正在外地参加一个重要的商务会议&#xff0c;突…

python学习之路 - python对mysql的数据操作

目录 一、python对mysql的数据操作1、前期准备2、连接mysql3、创建表4、插入表5、修改表6、删除表7、查询表 一、python对mysql的数据操作 1、前期准备 使用python对mysql进行相关操作前&#xff0c;需要安装pymysql。执行pip install pymysql命令即可如果具体不知道如何操作…

【python】Python如何通过FFmpeg处理音视频

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…

如何从 Mac 上清空的垃圾箱中恢复误删除的文件

在 Mac 上删除的文件将被移至垃圾箱并保留 30 天&#xff0c;然后才会被永久删除。但是&#xff0c;许多 Mac 用户可能会意外清空垃圾箱而没有意识到其中包含了重要文件。本指南包含从清空的垃圾箱中恢复 Mac 上已删除文件的所有有效方法。 当您意识到自己意外清空了 Mac 上的…

ThinkPHP之入门讲解

文章目录 1 ThinkPHP1.1 框架1.1.1 目录讲解1.1.1.1 5.x1.1.1.2 6.0以上 1.1.2 配置文件1.1.2.1 5.x1.1.2.2 6.0以上 1.1.3 函数文件1.1.3.1 5.x1.1.3.1 6.0以上 1.2 控制器1.2.1 控制器的后缀1.2.2 框架中的命名空间1.2.3 url访问1.2.4 调试模式1.2.4.1 5.x1.2.4.2 6.0以上 1.…

【C++】list的使用和list的模拟实现和迭代器失效问题

目录 一、list 的简单介绍 二、list 的基本使用 &#x1f389;list的构造 &#x1f389;list iterator 的使用 &#x1f389;list capacity &#x1f389;list element access &#x1f389;list modifiers &#x1f389;list operator 三、list 的模拟实现 &#x…

快速搭建和运行Spring Boot项目的简易指南

对于非Java开发的后端开发人员而言&#xff0c;即便未曾接触过Java&#xff0c;也可能听说过Spring Boot这一框架。若想要快速搭建并运行一个Spring Boot项目&#xff0c;可以遵循以下步骤&#xff1a; 环境准备 **安装Java JDK&#xff1a;**确保您的开发环境中安装了Java J…