vue造轮子-网格系统

1.什么是网格/栅格系统？

就是把一个div分成N个部分（n=12,16,24...）,每个部分无空隙或者有空隙，css所有布局都可以分为 横向布局和纵向布局

image.png

2.git branch xxx 新建xxx分支

git checkout xxx 切换到xxx分支上

3.需要注意一点

image.png

在上图中，第一个span传的2是number类型的2 因为span前有冒号：， 而下面的传的22是字符串

4. 如何子元素是slot 怎么传值

image.png

注意子元素接受的时候不要用props vue会报提示，应该放在data中

image.png

5.computed

image.png

在vue中只会在最开始的时候读取一下colStyle,如果后面gutter变了，colStyle对象不会发生变化，解决这种情况要用到computed。总结：如果一个属性会根据另一个属性变的情况下用computed

要写成这个样子

image.png

6.在测试用例中加延时操作

要加done才可以正常进行延时操作，因为它默认为同步代码，不执行异步代码， 加了done就可以正常运行了

image.png