Vue组件：网格系统，row & col

    <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}"
  
  
• computed
• mounted
• 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 对应各自媒体响应的样式

代码

row.vue
col.vue