总结一下疫情期间在家学习的笔记

先来一段自白：

• 还是在学vue，这次从头开始学的，学习进度有点慢，喜欢走神扣手机。。。难受!!!
• 年前公司就在做前后端分离（mysql+springboot+springcloud+vue），从数据库到接口再到页面都自己写（缺人的原因），感觉自己已经会vue了，但这次重新学习，发现有很多小知识点都没听说过，所以又发现自己好菜了。。。
• 感觉程序员就是在学会与不会之间来回徘徊，当一个技术你会了用了的时候发现自己好牛x，啥都会了，再用用又发现自己啥都不会

开始总结，东西很多很琐碎，归类也不是很好归

1. css相关

	样式这个东西个人平常写的少，写的时候边调试边改，还是相当磨人的

div水平均分排列相关（div默认浮动是垂直的）：
		display: flex;//div默认是竖向排列，设置后成横向排列
		flex: 1;//均分上面横向排列的div
		flex-wrap: wrap;//均分横向排列后，超过一定大小时换行
		justify-content: space-around;	//均分横向排列后，超过一定大小时换行，并把这行多余的空白部分均分填充，两边也有空白。如下图1-1：
		justify-content: space-between;	//均分横向排列后，超过一定大小时换行，并把这行多余的空白部分均分填充，两边没有空白，空白全在中间。如下图1-2：
		justify-content: space-evenly可以使每个元素之间和元素距离边距的距离都相等，但是兼容性比较差（iphone的SE上不支持，会失效，相当于没有设置），space-evenly将剩余空间平均分割，例如有5个元素，这样就有6个相同宽度的间隔空间，间隔空间的数量等于元素的数量加一。如下图1-3

定位相关，position我之前用的都是absolute和relative比较多，再补充三个（最后一个对浏览器版本有要求好像）：

		Position属性四个值：static、fixed、absolute和relative的区别和用法
		先看下各个属性值的定义：
		1、static（静态定位）：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
		2、relative（相对定位）：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。　　
		3、absolute（绝对定位）：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。
		4、fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级
		5、当超过一定像素后，设置为固定定位fixed。比如，超过44px时设置为固定定位：
		    position: sticky;
		    top: 44px;

2. js相关

• 关于json。这个真的是之前不知道这种用法，之前公司有个需求就是json数据，然后json.变量取值，我还在那遍历变量，存到一个新的数组转来转去
  • 1.json格式的数据，点方法后面跟的必须是一个指定的属性名称（如：data.name），
    而中括号方法里面可以是变量比如字符串。（如:data[“Eric”]）
    eg:
    var haha = “name”;
    console.log(obj.haha); // undefined
    console.log(obj[haha]); // cedric
  • 2.中括号方法里面的属性名可以是数字，而点方法后面的属性名不可以是数字
  • 3.当动态为对象添加属性时，必须使用中括号[]，不可用点方法
• 关于数组(应该是es6的语法，以前也没用过这种)。需求：把数组B的元素放在数组A里面，且数组A之前的元素不被覆盖

  • 1、在vue种响应式的写法
    除遍历后挨个push还有一个语法糖：…数组名如下图2-1

  • 2、非响应式的写法：
    concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本
    var a = [1,2,3];
    document.write(a.concat(4,5));//输出：1,2,3,4,5，数组a还是[1,2,3]

3.留空，未完待续

4. Vue相关

• 事件总线
  • 设两个vue组件A和B无直接关系（非父子组件关系），但需要B组件监听A组件中的图片加载完成事件，可使用“事件总线”解决。如下图：
    
• 。
• 。
• 。
• 。
• 。