github用户搜索案例

提示：本文做一个github用户搜索案例

---

前言

提示：这里可以添加本文要记录的大概内容：

本文做一个github用户搜索案例

---

提示：以下是本篇文章正文内容

一、实现效果

二、拆分静态组件

2.1 准备

准备：

注意：
引入外部框架css样式的两种方式
1、在src下建一个assests，在app.vue里引入（不推荐）
2、在public里建一个css文件夹，在index.html里引入

• 方式一
  
  

• 方式二：

2.2 具体拆分

app.vue

三、列表展示

3.1 请求后台

Search.vue

修改Search.vue

3.2 组件间通信

现在数据在search里面，但是list想用，组件间通信！！

List.vue

Search.vue

3.3 数据的使用

List.vue

3.4 数据展示

List.vue

四、完善案例

1、一上来，应该展示欢迎词
2、点击搜索，数据还没回来时，呈现一个加载中

List.vue:

分析：

4.1 方式一：

List.vue:

但是这样存在问题，一是代码冗余，二是不好维护

4.2 方式二：

List.vue

this表示什么？

Search.vue

效果：

但是这样存在问题:
	丢了个属性
1、一进来，info有四个属性
2、一点击搜索，isFirst丢了

两种解决办法:
1、不要省略isFirst，但是太麻烦
2、使用ES6写法

方式一：


方式二：


最后验证一下eror

五、vue-resource

5.1 注册并引入

5.2 使用

5.3 缺陷

vue1.0的时候使用的比较多
年久失修，维护不太频繁了，而且axios比较成熟