<g-row class="demoRow" align="center" gutter="20">
<g-col span="8"><div class="demoCol">hi</div></g-col>
<g-col span="8"><div class="demoCol">hi</div></g-col>
</g-row>
<g-row class="demoRow" align="left" gutter="20">
<g-col span="6"><div class="demoCol">hi</div></g-col>
<g-col span="6"><div class="demoCol">hi</div></g-col>
</g-row>
<g-row class="demoRow" align="right" gutter="20">
<g-col span="4"><div class="demoCol">hi</div></g-col>
<g-col span="4"><div class="demoCol">hi</div></g-col>
<g-col span="4"><div class="demoCol">hi</div></g-col>
<g-col span="4"><div class="demoCol">hi</div></g-col>
</g-row>
<g-row class="demoRow" gutter="20">
<g-col span="4"><div class="demoCol">hi</div></g-col>
<g-col span="4"><div class="demoCol">hi</div></g-col>
<g-col span="4"><div class="demoCol">hi</div></g-col>
<g-col span="4"><div class="demoCol">hi</div></g-col>
<g-col span="4"><div class="demoCol">hi</div></g-col>
<g-col span="4"><div class="demoCol">hi</div></g-col>
</g-row>
需求
1.实现 div 分成各等分（默认最多24分）
2.gutter 缝隙
3.响应各媒体分辨率
知识点
- vue组件三板斧：
<template> <script> <style> props-
v-bind，缩写为: -
props中的类型检测器，validator() -
ES6 ，模板字符串插入表达式，
:class="{[`icon-${iconPosition}`]:true}"
computedmounted- ES，array.push
- ES6 ，扩展运算符
- ES6 ，解构赋值
-
css，媒体响应，
@media -
css，
(display: flex;) (flex-wrap: wrap;) (justify-content: flex-start/center/flex-end) -
scss，for语法，
@for $n from 1 through 24 {} -
scss，插值语法，
&.#{$class-prefix}#{$n} {}
关键点
- 使用
v-bind和computed动态绑定 prop 值 - 了解生命周期
- created 是生成一个不加载页面中的对象，mounted 是将对象挂到页面中
- 使用 mounted 和 this 将 props 数据传递给子组件
- 使用 scss 插值语法将各 class 对应各自媒体响应的样式
