[Vue]github案例
2024-05-12 15:09:06
前言
系列文章目录：
[Vue]目录
老师的课件笔记，不含视频 https://www.aliyundrive.com/s/B8sDe5u56BU笔记在线版： https://note.youdao.com/s/5vP46EPC
视频：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通
文章目录
- 前言
- 1. 案例效果
- 2. 静态页面
- 3. 组件的拆分
- 3.1 目录结构
- 3.2 引入第三方css样式
- 3.3 拆分组件
- 4. 列表展示实现
- 4.1 查询请求数据
- 4.2 数据传递
- 4.2.1 安装全局事件总线
- 4.2.2 全局事件总线绑定自定义事件
- 4.2.3 触发全局事件总线事件
- 4.3 列表数据展示
- 4.3.1 需要使用的数据
- 4.3.2 数据展示
- 5. 完善案例
1. 案例效果
2. 静态页面
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="./bootstrap.css"><link rel="stylesheet" href="./index.css">
</head>
<body>
<div id="app"><div class="container"><section class="jumbotron"><h3 class="jumbotron-heading">Search Github Users</h3><div><input type="text" placeholder="enter the name you search"/> <button>Search</button></div></section><div class="row"><div class="card"><a href="https://github.com/xxxxxx" target="_blank"><img src="https://cn.vuejs.org/images/logo.svg" style='width: 100px'/></a><p class="card-text">xxxxxx</p></div><div class="card"><a href="https://github.com/xxxxxx" target="_blank"><img src="https://cn.vuejs.org/images/logo.svg" style='width: 100px'/></a><p class="card-text">xxxxxx</p></div><div class="card"><a href="https://github.com/xxxxxx" target="_blank"><img src="https://cn.vuejs.org/images/logo.svg" style='width: 100px'/></a><p class="card-text">xxxxxx</p></div><div class="card"><a href="https://github.com/xxxxxx" target="_blank"><img src="https://cn.vuejs.org/images/logo.svg" style='width: 100px'/></a><p class="card-text">xxxxxx</p></div><div class="card"><a href="https://github.com/xxxxxx" target="_blank"><img src="https://cn.vuejs.org/images/logo.svg" style='width: 100px'/></a><p class="card-text">xxxxxx</p></div></div></div>
</div>
</body>
</html>
.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%;
}3. 组件的拆分
3.1 目录结构
3.2 引入第三方css样式
在index.html中使用link标签引入第三方css样式
由于import导入第三方样式，会对引入的样式进行代码检查，而在代码中使用了本地没有的字体样式，会报错；使用link标签引入第三方样式不会进行严格的代码检查，不会报错。
index.html
<!DOCTYPE html>
<html lang=""><head><meta charset="utf-8"><!-- 针对ie浏览器的一个特殊配置，让ie浏览器以最高的渲染级别渲染页面 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 开启移动端的理想视口 --><meta name="viewport" content="width=device-width,initial-scale=1.0"><!-- 配置页签图标 <%= BASE_URL %> 表示public文件夹所在的路径，防止项目部署后出现路径的错误--><!-- 所以在该html文件中路径不使用 ./ ../ --><link rel="icon" href="<%= BASE_URL %>favicon.ico"><!-- 引入第三方css样式 bootstrap --><link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css"><!-- 网页的标题 --><title><%= htmlWebpackPlugin.options.title %></title></head><body><!-- 浏览器不支持js，页面会显示noscript标签中的内容；支持js则不渲染noscript标签中的内容 --><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><!-- 提供的容器 --><div id="app"></div><!-- built files will be auto injected --></body>
</html>
3.3 拆分组件
App.vue
<template><div class="container"><!-- 使用子组件 --><Search></Search><List></List></div>
</template><script>
// 导入子组件
import Search from './components/Search.vue'
import List from './components/List.vue'export default {name: 'App',// 注册子组件components: {Search,List}
}
</script>
Search.vue
<template><section class="jumbotron"><h3 class="jumbotron-heading">Search Github Users</h3><div><input type="text" placeholder="enter the name you search" /> <button>Search</button></div></section>
</template><script>
export default {name: 'Search'
}
</script>
List.vue
<template><div class="row"><div class="card"><a href="https://github.com/xxxxxx" target="_blank"><img src="https://v2.cn.vuejs.org/images/logo.svg" style='width: 100px' /></a><p class="card-text">xxxxxx</p></div><div class="card"><a href="https://github.com/xxxxxx" target="_blank"><img src="https://v2.cn.vuejs.org/images/logo.svg" style='width: 100px' /></a><p class="card-text">xxxxxx</p></div><div class="card"><a href="https://github.com/xxxxxx" target="_blank"><img src="https://v2.cn.vuejs.org/images/logo.svg" style='width: 100px' /></a><p class="card-text">xxxxxx</p></div><div class="card"><a href="https://github.com/xxxxxx" target="_blank"><img src="https://v2.cn.vuejs.org/images/logo.svg" style='width: 100px' /></a><p class="card-text">xxxxxx</p></div><div class="card"><a href="https://github.com/xxxxxx" target="_blank"><img src="https://v2.cn.vuejs.org/images/logo.svg" style='width: 100px' /></a><p class="card-text">xxxxxx</p></div></div>
</template><script>
export default {name: 'List'
}
</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: 0.75rem;margin-bottom: 2rem;border: 1px solid #efefef;text-align: center;
}.card > img {margin-bottom: 0.75rem;border-radius: 100px;
}.card-text {font-size: 85%;
}
</style>
4. 列表展示实现
4.1 查询请求数据
请求接口地址：
https://api.github.com/search/users?q=xxx
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>
// 导入axios
import axios from 'axios'export default {name: 'Search',data() {return {keyWord: ''}},methods: {searchUsers() {axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(response=>{console.log('请求成功', response.data)},error=>{console.log('请求失败', error)})}},
}
</script>
4.2 数据传递
子组件Search与List为兄弟组件，这里使用全局事件总线进行数据的传递。
4.2.1 安装全局事件总线
main.js
import Vue from 'vue'
import App from './App.vue'//关闭vue的生产提示
Vue.config.productionTip = falsenew Vue({render: h => h(App),beforeCreate() {// 让vue的实例对象作为全局事件总线Vue.prototype.$bus = this}
}).$mount('#app')
4.2.2 全局事件总线绑定自定义事件
List.vue
<script>
export default {name: 'List',data() {return {users: []}},mounted() {this.$bus.$on('getUsers', (users)=>{console.log('List组件收到了数据')this.users = users})}
}
</script>
4.2.3 触发全局事件总线事件
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>
// 导入axios
import axios from 'axios'export default {name: 'Search',data() {return {keyWord: ''}},methods: {searchUsers() {// 发起请求获取用户数据axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(response=>{console.log('请求成功')// 触发全局事件总线事件 传递数据this.$bus.$emit('getUsers', response.data.items)},error=>{console.log('请求失败', error)})}},
}
</script>
4.3 列表数据展示
4.3.1 需要使用的数据
4.3.2 数据展示
List.vue
<template><div class="row"><div class="card" v-for="user in users" :key="user.id"><a :href="user.html_url" target="_blank"><img :src="user.avatar_url" style='width: 100px' /></a><p class="card-text">{{user.login}}</p></div></div>
</template><script>
export default {name: 'List',data() {return {users: []}},mounted() {// 全局事件总线绑定事件this.$bus.$on('getUsers', (users)=>{console.log('List组件收到了数据')this.users = users})}
}
</script>
5. 完善案例
实现初始页面的欢迎词展示、数据请求过程中的加载提示、请求失败的错误信息显示。
List.vue
<template><div class="row"><!-- 用户列表 --><div class="card"v-show="info.users" v-for="user in info.users" :key="user.id"><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">welcome to use</h1><!-- 加载中 --><h1 v-show="info.isLoading">loading...</h1><!-- 错误信息 --><h1 v-show="info.errorMsg">{{info.errorMsg}}</h1></div>
</template><script>
export default {name: 'List',data() {return {info: {// 是否第一次加载页面isFirst: true,// 是否加载数据isLoading: false,// 错误信息errorMsg: '',// 用户信息users: []}}},mounted() {// 全局事件总线绑定事件// this.$bus.$on('getUsers', (dataObj)=>{this.$bus.$on('updateUsers', (dataObj)=>{console.log('List组件收到了数据')// this.users = users// dataObj中有的属性会覆盖this.info中相同的属性// 没有则this.info保持原值this.info = {...this.info, ...dataObj}})}
}
</script>
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>
// 导入axios
import axios from 'axios'export default {name: 'Search',data() {return {keyWord: ''}},methods: {searchUsers() {// 请求开始前初始化数据this.$bus.$emit('updateUsers', {// 进行请求了，取消欢迎词isFirst: false,// 请求开始，进入加载状态isLoading: true,// 无报错信息errorMsg: '',// 请求开始前，用户数据为空users: []})// 发起请求获取用户数据axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(response => {console.log('请求成功')// 触发全局事件总线事件 传递数据// this.$bus.$emit('updateUsers', response.data.items)// 请求成功传递数据this.$bus.$emit('updateUsers', {// 原先是否第一次加载页面状态已经修改不用再次传递修改// 请求结束isLoading: false,// 无报错信息errorMsg: '',// 用户数据users: response.data.items})},error => {console.log('请求失败', error)// 请求失败传递数据this.$bus.$emit('updateUsers', {// 原先是否第一次加载页面状态已经修改不用再次传递修改// 请求结束isLoading: false,// 报错信息errorMsg: error,// 请求失败用户数据为空users: []})})}}
}
</script>
[Vue]github案例相关推荐
- Vue2（十一）：脚手架配置代理、github案例、插槽
Vue2学习笔记:第十一章 一.脚手架配置代理 1.引出问题 2.方式一 3.方式二 二.github案例 1.App.vue 2.搜索部分Search.vue 3.显示数据部分List.vue 4. ...
- Vue一个案例引发「内容分发slot」的最全总结
今天我们继续来说说 Vue,目前一直在自学 Vue 然后也开始做一个项目实战,我一直认为在实战中去发现问题然后解决问题的学习方式是最好的,所以我在学习一些 Vue 的理论之后,就开始自己利用业余时间做 ...
- 树莓派Android Things物联网开发：GitHub案例程序汇总
[转载请注明出处:http://blog.csdn.net/leytton/article/details/78275085] <树莓派Android Things物联网开发>系列文章专栏 ...
- vue小案例（小黑记事本和购物车）
vue小案例 小黑记事本小案例 <footer class="footer" ><span class="todo-count" v-if=& ...
- Vue小案例1：计数器
Vue小案例1:计数器 html页面: 准备两个按钮分别绑定两个事件对应加减add,sub:还有一个span容器放置数据,样式自己写没有太大要求 <div id="app"& ...
- 分析初识vue小案例
前言 我们已经写好了一个案例:初识vue小案例 接下来我们就分析初识vue小案例 容器和vue实例是一一对应的! 容器和vue实例应该是一一对应的,不允许出现一对一或者一对多 下面是一个一个容器对多个 ...
- Vue基础案例（水果搜索，购物车，todolist,留言板，跑马灯)
Vue基础案例(水果搜索,购物车,todolist,留言板,跑马灯) 01.水果搜索案例 思路以及运用知识点 通过computed计算 keyword与list ,算出findlist 如果list中 ...
- 前端vue入手案例--记事本
分享一个用vue做的一个案例,这个案例结合了大多的vue的入门知识,包括有点击事件,数据双向绑定,v-for获取数据列表,v-if 页面元素显示方法等等. 学习这个案例也是能很好的帮助vue的学习者掌 ...
- Vue学习笔记（三）Vue2三种slot插槽的概念与运用 | ES6 对象的解构赋值 | 基于Vue2使用axios发送请求实现GitHub案例 | 浏览器跨域问题与解决
文章目录 一.参考资料 二.运行环境 三.Vue2插槽 3.1 默认插槽 3.2 具名插槽 3.3 作用域插槽 ES6解构赋值概念 & 作用域插槽的解构赋值 3.4 动态插槽名 四.GitHu ...
最新文章
- 运维开发笔记整理-前后端分离
- android自动化优化工具,一键自动优化系统大师下载
- 高性能队列——Disruptor
- linux用户组登录,linux用户和用户组
- MybatisPlus 的 MetaObjectHandler 与 @TableLogic
- 单片机片外程序存储器数据存储器操作命令
- “阿里云核心竞争力”峰会首日中奖小伙伴名单公布！机械键盘等豪礼下午继续放出！...
- 简支梁挠度计算公式推导_挠度公式推导与计算
- 疫情后，超七成居民理财偏好趋于保守
- hadoop面试题 5 ---有用
- CMU 15-445/645 数据库系统Lab 1 现代C++练习项目
- ssh: Bad configuration option: usedns
- 市面上常见模拟器比对
- 【2020年天梯赛—校内选拔赛】7-4手机话费
- 常用插接件2（DC 电源插头）
- 王教授是哪里人（离散数学P25 2.6）
- BAT高级架构师合力熬夜15天，肝出了这份PDF版《Android百大框架源码解析》，还不快快码住。。。
- 最小表示串 学习【最小表示串 学习(粗)】
- 支持向量机及核函数对比
- 可视化数据下的全国人口出生率
热门文章
- linux 串口发送 内核,使用串口线真机调试Linux内核
- php7安装（多个php版本共存）
- 物联网流量卡怎么查流量_物联网卡流量查询（QueryCardFlowInfo）---JAVA
- 50岁程序员还奋战在一线，软件测试能干到多少岁？有年龄限制吗？
- 停邀请返佣成交量骤减，创业板上线即崩，FCoin的神话还能延续吗？
- 简报 | QuarkChain北京站见面会即将召开；HiCTO创始人/前百姓网CTO潘晓良加入CarBlock；LinkEye上线FCoin受关注；Coinbase推出托管服务
- 我不需要保险，全家都不需要
- 二叉排序树实现英文文章单词统计
- 我为什么加入 TDengine
- 关于“硬件工程师工资不高”的几个真相！