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

先来一段自白:

  • 还是在学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

总结一下疫情期间在家学习的笔记_第1张图片
总结一下疫情期间在家学习的笔记_第2张图片
总结一下疫情期间在家学习的笔记_第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]

总结一下疫情期间在家学习的笔记_第4张图片

3.留空,未完待续

4. Vue相关

  • 事件总线
    • 设两个vue组件A和B无直接关系(非父子组件关系),但需要B组件监听A组件中的图片加载完成事件,可使用“事件总线”解决。如下图:
      总结一下疫情期间在家学习的笔记_第5张图片

你可能感兴趣的:(开源项目)