<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.實(shí)現(xiàn) div 分成各等分（默認(rèn)最多24分）
2.gutter 縫隙
3.響應(yīng)各媒體分辨率
知識(shí)點(diǎn)
- vue組件三板斧：
<template> <script> <style> props-
v-bind，縮寫為: -
props中的類型檢測(cè)器绰姻，validator() -
ES6 移袍，模板字符串插入表達(dá)式润绵，
:class="{[`icon-${iconPosition}`]:true}"
computedmounted- ES葫慎，array.push
- ES6 塑径，擴(kuò)展運(yùn)算符
- ES6 女坑，解構(gòu)賦值
-
css，媒體響應(yīng)统舀，
@media -
css匆骗，
(display: flex;) (flex-wrap: wrap;) (justify-content: flex-start/center/flex-end) -
scss，for語(yǔ)法誉简，
@for $n from 1 through 24 {} -
scss碉就，插值語(yǔ)法，
&.#{$class-prefix}#{$n} {}
關(guān)鍵點(diǎn)
- 使用
v-bind和computed動(dòng)態(tài)綁定 prop 值 - 了解生命周期
- created 是生成一個(gè)不加載頁(yè)面中的對(duì)象闷串，mounted 是將對(duì)象掛到頁(yè)面中
- 使用 mounted 和 this 將 props 數(shù)據(jù)傳遞給子組件
- 使用 scss 插值語(yǔ)法將各 class 對(duì)應(yīng)各自媒體響應(yīng)的樣式
