Vue写github搜索案例

1.首先引入bootstrap.css

这里有个需要注意的点，CSS可以通过import在vue中引入，也可以通过Link在public的index.html中引入，但在vue文件中通过import引入会产生问题，因为css中可能会缺少部分字体，路径不对等问题，vue在通过import引入时会进行严格的检查，所以会报错，但通过link在index.html中引入则不会报错。

具体引入代码如下：

<!-- 引入第三方样式 -->
<link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css">
<!-- 配置网页标题 -->

这里顺便写一下在vue文件中引入css文件

import 'element-ui/lib/theme-default/index.css'

2.进行组件拆分并编写功能代码

中间遇到的新知识记录：
1.ES6模板字符串
由于拼接字符串需要用很多加号很麻烦，所以es6中采用了模板字符去代替。
ES6中提供了模版字符串，用`（反引号）标识，用${}将变量括起来。

searchUsers() {
		//这里的链接就是采用了模板字符串，拼接变量名
        axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
            Response => {
              console.log('请求成功了',Response.data)
            },
            Error => {
              console.log('请求失败了',Error.message)
            }
        )
      }

2.用到全局事件总线
在main.js中的new Vue中绑定全局事件总线

//绑定全局事件总线
beforeCreate() {
	Vue.prototype.$bus = this
},

//子组件发送数据
this.bus.$emit(“change”,data)

//子组件接收数据
this.bus.$on(“change”,(data) => {

})

3.es6中通过字面量的形式去合并对象
比较两个对象里面的元素不同处，元素名相同值不同更新值，然后元素之间取并集

this.info = {...this.info,...dataObj}

比如这里this.info里面的数据，dataObj也有就更新，如果dataObj没有，则保留！！！