26-vue-users_page项目的自我心得

1.项目展示图片

在这里插入图片描述

2.心得

   2.1通信方式的确定,要搞清楚组件之间的关系–消息的订阅与发布
   分析:搜索区(search组件)和展示区(main组件),属于 兄弟组件,通信方式就使用 消息的订阅与发布,这样可以实直接传输信息。(若使用props方法的话,就需要通过他们的父组件进行逐层传递,麻烦)。

   2.2消息的订阅与发布中,要搞清楚两个问题:谁来进行消息的发布?谁来进行消息的发布?
  分析:search组件要将用户输入信息,点击搜索,再将其输入的信息传给main组件,main组件在进行ajax请求数据,并在展示区(main组件)展示。
   结论:search组件来发布消息(触发事件),main组件来订阅消息(监听事件并执行相应的逻辑)
  search组件点击触发事件 — 发布消息 应该写在点击事件里面,点击事件应该写在methods。
  main组件监听事件 —订阅消息 应该写在mounted 部分。
 
  2.3使用ajax时,要搞清楚两个问题:在那个组件里发送?发送的时机?
  本次项目,应该在mian组件中发送ajax请求,并将返回的数据展示在main组件(展示区); 应该在用户点击搜索按钮之后,(mian组件订订阅消息后) 才进行ajax的请求(相应的代码应该写在mounted勾子中)

3.用到的数组方法

3.1数组中的map方法:

3.1.1理解

  从一个数组中的每个对象元素中抽取个别属性,作为一个对象放在相同的下标位置,要用数组的map方法。(已有数组和要返回的数组 两者的对象元素个数相同,但元素对象里面的属性名不相同)

3.1.2代码示例

// 数组中的map方法:从一个数组中的每个对象元素中抽取个别属性,作为一个对象放在相同的下标位置,要用数组的map方法。(已有数组和要返回的数组  两者的对象元素个数相同,但元素对象里面的属性名不相同)
const users = result.items.map(item => ({  //item是数组中对象元素
	name:item.login,  //将items 数组中每个对象的item.login属性值赋给新数组users中每个对象元素的name属性。(下同)
	url:item.html_url,
	avatar_url:item.avatar_url
})

   常用的数组方法:filter() map() reduce() find() 。前两种方法会返回一个新数组。

猜你喜欢

转载自blog.csdn.net/A_Bow/article/details/113823052
今日推荐