Vue.js github案例(p98~p100)
时间:2023-03-21
本文章向大家介绍Vue.js github案例(p98~p100),主要内容包括components、List.vue、Search.vue、App.vue、main.js、使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
components
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>
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"/>
<button @click="searchUsers">Search</button>
</div>
</section>
</template>
<script>
import axios from 'axios'
export default {
name:'Search',
data() {
return {
keyWord:''
}
},
methods: {
searchUsers(){
//请求前更新List的数据
this.$bus.$emit('updateListData',{isLoading:true,errMsg:'',users:[],isFirst:false})
axios.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>
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'
//关闭Vue的生产提示
Vue.config.productionTip = false
//创建vm
new Vue({
el:'#app',
render: h => h(App),
beforeCreate() {
Vue.prototype.$bus = this
},
})
原文地址:https://www.cnblogs.com/chuixulvcao/p/17238577.html
- 一个非常好用的文字滚动的案例,鼠标悬浮可暂停
- localstorage和sessionstorage上手使用记录
- jquery升级到新版本报错[jQuery] Cannot read property ‘msie’ of undefined错误的解决方法(转)
- thinphp框架的项目svn重新检出后的必备配置
- 对事件委托绑定click的事件的解绑
- 免杀后门之MSF&Veil-Evasion的完美结合
- 【52ABP实战教程】0.3-- 从GitHub推送代码回VSTS实现双向同步
- css绝对定位如何在不同分辨率下的电脑正常显示定位位置?
- nvm安装node和npm,个人踩坑记录
- clang_intprt_t类型探究
- 学习zepto.js(Hello World)
- JS中函数声明与函数表达式的异同
- [技巧]看我如何通过Weeman+Ettercap拿下路由器管理权限
- 一分钟理清Vue-cli 代码构建步骤。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 剑指Offer题解
- nginx 常见问题记录
- ReturnSingleDatabase为True报错的解决办法
- 【Vim】vim配置的选择
- 关于HashMap的一些理解
- SpringBoot2.x系列教程(六十一)Spring Boot集成FastDFS实现文件上传
- 解决对接华为kafka 进行Kerberos认证时的sun.security.krb5.KrbException
- Newbe.Claptrap 框架如何实现多级生命周期控制?
- Kafka linux(centos7)安装配置kerberos并在另一台机器上使用Java服务接收消息
- SpringCloud bus 手动post可用 使用webhooks自动更新配置失效的解决小记
- 处理Storm1.2.2 日志报错 与spring boot冲突
- Java 中的 ==, equals 与 hashCode 的区别与联系
- 专家精品|密码朋克的社会实验(三):比特币发明了什么
- 面试题答案
- Vue3 为何使用 Proxy 实现数据监听