Vue2.x 项目实战（二）

文章目录

Vue2.x 项目实战（二）
- Vue2.x 实现 github 搜索案例
- - 1、前言
  - 2、项目演示（一睹为快）
  - 3、涉及知识点
  - 4、项目详情（附源码及解析）
  - 5、写在最后的话

Vue2.x 实现 github 搜索案例

1、前言

如果你对 vue 的基础知识还很陌生，推荐先去学习一下 vue 基础

内容	参考链接
Vue2.x全家桶	Vue2.x全家桶参考链接
Vue2.x项目（todoList）	Vue2.x项目——实现一个任务清单

本篇文章依旧是使用的 Vue 基础知识，同时新增了 axios 请求数据 的需求，及 兄弟组件间 如何 使用自定义事件 实现组件间通信

如果你 刚学完 vue 基础知识，想检查一下自己的学习成果
如果你 已学完 vue 基础知识，想快速回顾复习
如果你 已精通 vue 基础知识，想做个小案例
那不妨 再看完这篇文章，我保证你一定会更有收获的！

2、项目演示（一睹为快）

github 搜索案例

3、涉及知识点

Vue基础：插值语法，常用指令，列表渲染，生命周期
Vue进阶：自定义事件（兄弟组件间通信），自定义事件的解绑
第三方库：axios（发送 axios 请求，请求数据），vue-lazyload 插件，实现 图片懒加载

备注：

任意组件间的通信方式有很多种（全局事件总线，消息订阅预发布…），熟练掌握一种即可
本文是 vue 基础的练习项目，不涉及 vue 周边（Vuex，Vue-router）

4、项目详情（附源码及解析）

该项目包含三个 vue 组件

（1）App.vue 父组件：整合子组件

（2）Search.vue 子组件：用户查询，发送请求，获取数据

（3）List.vue 子组件：展示用户图片和信息的列表

备注：

github 提供的请求 API：https://api.github.com/search/users?q=xxx
请求的数据（用到的红框起来了）

App.vue 父组件

<template><div class="container"><Search /><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 子组件

终端键入 npm i axios 安装 axios
给按钮添加点击事件，axios 请求数据并进行页面的渲染更新
兄弟组件间通过自定义事件通信，要引入一个 event.js 文件，暴露一个 vue 实例

<template><section class="jumbotron"><h3 class="jumbotron-heading">Search Github Users</h3><inputtype="text"placeholder="enter the name you search"v-model="keyWords"/>&nbsp;<button @click="searchUsers">Search</button></section>
</template><script>
import axios from "axios";
import event from '../event'
export default {name: "mySearch",data() {return {keyWords: "", // 用户输入的关键字};},methods: {// 查询用户searchUsers() {// 请求前更新 List 的数据event.$emit("updateListData", {isFirst: false, // 隐藏欢迎词isLoading: true, // 展示加载中...errMsg: "", // 错误信息为空users: [], // 数据置为空});axios.get(`https://api.github.com/search/users?q=${this.keyWords}`).then(// 成功的回调，隐藏欢迎和加载中，展示请求出来的数据(reponse) => {console.log("请求成功了", reponse.data.items);// 请求成功后更新 List 数据event.$emit("updateListData", {isLoading: false, // 请求成功，隐藏加载中...errMsg: "",users: reponse.data.items, // users 数组存放请求成功的数据});},// 失败的回调，提示错误信息(error) => {//请求失败后更新List数据console.log("请求失败了", error.message);event.$emit("updateListData", {isLoading: false, // 请求成功，隐藏加载中...errMsg: error.message, // 请求出错，展示错误信息users: [], // users 数组置空});});},},
};
</script><style>
.jumbotron {margin-top: 20px;
}
.jumbotron-heading {color: skyblue;
}
</style>

List.vue 子组件

终端键入 npm i vue-lazyload 安装懒加载插件
在 main.js 中导入并使用它，并设置懒加载时的图片
兄弟组件间通过自定义事件通信，要引入一个 event.js 文件，暴露一个 vue 实例

<template><div class="row"><!-- 展示用户列表，没有内容时隐藏它。user.login，是唯一标识 --><divv-show="info.users.length"class="card"v-for="user in info.users":key="user.login"><!-- 动态绑定用户的主页地址和图片地址 --><a :href="user.html_url" target="_blank"><!-- v-lazy 实现图片的懒加载 --><img v-lazy="user.avatar_url" style="width: 100px; height: 100px" /></a><!-- 呈现用户名 --><p class="card-text">{{ user.login }}</p></div><!-- 初始页面，展示欢迎词 --><h2 class="welcome" v-show="info.isFirst">前端杂货铺，欢迎你的使用！</h2><!-- 点击查询，加载过程中展示加载中 --><h2 class="loading" v-show="info.isLoading">加载中...</h2><!-- 请求出错，展示错误信息 --><h2 class="error" v-show="info.errMsg">{{ info.errMsg }}</h2></div>
</template><script>
import event from "../event";
export default {name: "myList",data() {return {info: {isFirst: true, // 欢迎词isLoading: false, // 加载中...errMsg: "", // 错误信息users: [], // 存放用户的数组},};},// 挂载时绑定自定义事件mounted() {event.$on("updateListData", (dataObj) => {// 合并这两个对象，并且同 key 值的后面的会覆盖前面的，这样 isFirst 就不用重复写了this.info = { ...this.info, ...dataObj };});},// 销毁前解绑自定义事件beforeDestroy() {event.$off("updateListData");},
};
</script><style scoped>
.welcome {color: orange;
}
.loading {color: rgb(0, 162, 255);
}
.error {color: red;
}
.album {min-height: 50rem;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>

main.js 文件

import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'// 使用懒加载，并设置加载时的图片
Vue.use(VueLazyload, {loading: require("./assets/loading3.png")
})new Vue({el:'#app',render: h => h(App),
})

event.js 文件

暴露一个 vue 实例，供自定义事件进行兄弟组件间的通信

import Vue from 'vue'export default new Vue()

5、写在最后的话

如果你是 看完全篇 阅读到了这里，我相信你一定是有收获的！

那么下面不妨打开自己的电脑，启动自己的编译器，来跟着做 / 自己做一遍吧！

Vue项目实战——实现GitHub搜索案例（学以致用，两小时带你巩固和强化Vue知识点）相关推荐

Vue项目实战——实现一个任务清单（学以致用，两小时带你巩固和强化Vue知识点）
Vue2.x 项目实战(一) 内容参考链接 Vue2.x全家桶 Vue2.x 全家桶参考链接 Vue2.x项目(一) Vue2.x 实现一个任务清单 Vue2.x项目(二) Vue2.x 实现Git ...
Vue学习记录8，vue脚手架配置代理的两种方式，Github搜索案例，vue-resource，三种插槽，Vuex及搭建Vuex环境，getter和四个map方法的使用，模块化+命名空间
目录 vue脚手架配置代理方法一方法二 Github搜索案例 UserList.vue UserSearch.vue 效果图 vue-resource 插槽默认插槽具名插槽作用域插槽 Vue ...
Vue项目实战——实现一个任务清单【基于 Vue3.x 全家桶（简易版）】
Vue3.x 项目实战(一) 内容参考链接 Vue2.x全家桶 Vue2.x 全家桶参考链接 Vue2.x项目(一) Vue2.x 实现一个任务清单 Vue2.x项目(二) Vue2.x 实现Git ...
Vue项目实战 —— 后台管理系统( pc端 ) 第一篇
前期回顾我只写注释 -- 让Ai写代码_0.活在风浪里的博客-CSDN博客前期回顾 Vue项目实战 -- 哔哩哔哩移动端开发-- 第二篇_0.活在风浪里的博客-CSDN博客https://b ...
七十一、Vue项目城市选择页搜索逻辑实现，边输入边搜索功能的解决办法：节流函数
2020/10/30. 周五.今天又是奋斗的一天. @Author:Runsen 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的.大四弃算法转前端,需要每天的 ...
Vue项目实战 —— 后台管理系统( pc端 )
前期回顾我只写注释 -- 让Ai写代码_的博客-CSDN博客前期回顾 Vue项目实战 -- 哔哩哔哩移动端开发-- 第二篇_的博客-CSDN博客https://blog.csdn.net/m0_57 ...
Elasticsearch项目实战，商品搜索功能设计与实现！
推荐大家去看原文博主的文章,条理清晰阅读方便,转载是为了方便以后个人查阅 https://juejin.im/post/5e94587f51882573be11cb83?utm_source=gold ...
【VUE项目实战】1、学习目标以及概述
之前我们分别学习了ES6和Vue的基础,下面新开启的系列,是从0开始通过Vue搭建一个电商管理系统,从而学习Vue的具体实战. 以下博文记录,均参考黑马程序员(www.itheima.com)Vue项 ...
1.vue项目实战笔记（已完结）
vue项目实战笔记目标目录 1.项目概述 1.1电商项目基本业务概述 1.2电商后台管理系统的功能 1.3电商后台管理系统的开发模式(前后端分离) 1.4电商后台管理系统的技术选型 1.前端项目技 ...
vue 动态添加class_前端开发：Vue项目实战-Music
大家好,我来了,本期为大家带来的前端开发知识是"前端开发:Vue项目实战-Music",有兴趣做前端的朋友,和我一起来看看吧! 主要内容项目环境搭建路由导航实现 ListVie ...

Vue项目实战——实现GitHub搜索案例（学以致用，两小时带你巩固和强化Vue知识点）