总结
=============================================================
从转行到现在,差不多两年的时间,虽不能和大佬相比,但也是学了很多东西。我个人在学习的过程中,习惯简单做做笔记,方便自己复习的时候能够快速理解,现在将自己的笔记分享出来,和大家共同学习。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
个人将这段时间所学的知识,分为三个阶段:
第一阶段:HTML&CSS&JavaScript基础
第二阶段:移动端开发技术
第三阶段:前端常用框架
-
推荐学习方式:针对某个知识点,可以先简单过一下我的笔记,如果理解,那是最好,可以帮助快速解决问题;如果因为我的笔记太过简陋不理解,可以关注我以后我还会继续分享。
-
大厂的面试难在,针对一个基础知识点,比如JS的事件循环机制,不会上来就问概念,而是换个角度,从题目入手,看你是否真正掌握。所以对于概念的理解真的很重要。
-
在上图中,我们头部header需要向后台发送关键字,后台根据得到的关键字进行相应的操作,返回项目需要的数据,main组件就是需要利用返回后台的数据据,进行页面的渲染(这要明白,发送ajax请求必然是在main组件中,header组件的作用是将关键字传给main组件,卖弄组件向后台发送ajax请求,返回数据,再进一步渲染)
-
因此,这便涉及到组件之间的通信,pubsub-JS就是用来实现组件之间的通信的
-
由于header与mian的关系是兄弟关系,若使用props属性,需要借助父组件来实现,pubsub(也是我们所说的订阅消息与发布消息)跨越组件之间的关系进行通信。
-
因此我们在header中点击搜索时会通知main组件向后台发送ajax请求,因此在header中发布消息(触发),在main中订阅消息(监听)
2.1具体代码如下:
- 其中,search点击时,按钮的点击回调函数中去发布消息
发布消息的方法是PubSub.publish(),需要通过提供两个参数,参数一为”发布的消息名“,第二个参数是搜索框中输入的关键字”searchName“参数,在main组件中订阅消息是便可以接收到该参数,进而向后台发送ajax请求;
- 在main组件的生命周期函数mounted(页面加载完成时)订阅消息,订阅消息时PubSub.subscribe()方法,这里接收两个参数,”发布消息名“,”事件监听函数“,这里的事件监听函数需要两个参数:一个时msg(发布的消息名,无用),一个时searchName(发布者传来的参数),我们在事件监听里面发送ajax请求,更新页面
在main组件的代码如下
全部实现代码如下:
- header.vue组件的相关代码
Search GitHub Users
<input type=“button” value=“Search” class=“btn btn-primary” placeholder=“请输入 github 用户名” @click=“search”>
- main组件的相关代码
请输入搜索用户的名称
loading
{{errormsg}}
{{user.name}}