_data 属性
我们在为组件做数据绑定的时候使用 _data，如 el-table 组件绑定数据的属性就是默认为这个字段，因此我们的一些自定义组件或者其他的数据绑定都统一定为 _data。
一般类似于列表或者是通过 v-for 这种形式渲染的组件，都可以为其指定一个数组，然后循环遍历进行渲染
我们通过几个常用组件的示例，来介绍一下关于 _data 属性，也就是数据属性的使用方法
在页面设计器中，只要具有 data 属性的组件，都有两种方式进行数据的指定，一种是通过绑定接口的返回值来填充数据，另一种是手动指定数据
1. 表格组件 lc-table
假设现在要做一个歌单的列表
先拖入一个表格组件，然后给它设置几个列
有歌曲名称、歌手、时长、热度这四列，目前还是一个空列表，没有歌单的数据，这四列的值分别绑定到 title、singer、time、hot 字段上面，关于如何绑定可详见 动态绑定
新建一个请求链接，并在当前页面中添加这个请求链接，该请求链接返回的数据被绑定在 songList 字段上面
点击表格属性面板的填充数据选项，列出了当前可以绑定的数据字段
请求链接返回的数据格式如下：
{
data: [{
title: '研文真习性',
singer: '宋伟',
time: '05:32',
hot: 190
}, {
title: '非是象',
singer: '蔡军',
time: '04:26',
hot: 844
}, {
title: '近铁民家装还',
singer: '易洋',
time: '04:36',
hot: 783
}, {
title: '界常',
singer: '范秀兰',
time: '03:04',
hot: 704
}, {
title: '更白火',
singer: '董桂英',
time: '03:59',
hot: 911
}, {
title: '具成',
singer: '冯敏',
time: '02:32',
hot: 428
}, {
title: '存道根效长接',
singer: '余伟',
time: '03:29',
hot: 934
}, {
title: '会据一光住',
singer: '贺秀英',
time: '02:12',
hot: 668
}, {
title: '解保少情打强群',
singer: '陈敏',
time: '03:42',
hot: 549
}, {
title: '际口名线所志论',
singer: '谭娜',
time: '03:50',
hot: 635
}]
}
其中 data 字段的值就会绑定到 songList 上面，我们选中这个数据字段，列表就会自动渲染出来
2. 虚拟列表组件 lc-list
在页面设计器中拖入一个列表组件，然后在列表组件中再放入一个卡片组件
这次我们通过手动指定数据的方式来对列表进行数据绑定，数据格式如下：
[{
name: "苹果",
description: "苹果，学名Malus pumila Mill.，别称西洋苹果、柰，属于蔷薇科苹果属的植物 [1-2]。苹果是全球最广泛种植和销售的水果之一，具有悠久的栽培历史和广泛的分布范围。苹果的原始种群主要起源于中亚的天山山脉附近，尤其是现代哈萨克斯坦的阿拉木图地区，提供了所有现代苹果品种的基因库。苹果通过早期的贸易路线，如丝绸之路，从中亚向外扩散到全球各地。"
},{
name: "香蕉",
description: "香蕉（Musa acuminata '(AAA)'），英文名(banana)芭蕉科芭蕉属多年生草本植物，植株丛生，有匐匍茎；假茎浓绿有黑色斑点；叶片长圆形，上面为深绿色，无白粉，下面浅绿色；花朵为乳白色或淡紫色；果实呈弯曲的弓状，有棱，果皮为青绿色，成熟后变黄；果肉松软，黄白色，味甜香味浓，无种子。"
},{
name: "葡萄",
description: "葡萄（学名：Vitis vinifera L.）是葡萄科葡萄属高大缠绕藤本，幼茎秃净或略被绵毛；叶片为纸质，圆卵形或圆形；花序大而长；萼很小，为黄绿色的杯状；花柱很短，为圆锥形；浆果为卵圆形至卵状长圆形，成熟时为紫黑色或红而带青色。 [7]花期4-5月，果期8-9月。 [1]李时珍在《本草纲目》中说：葡萄，《汉书》作蒲桃，可以造酒，人哺饮之，则陶然而醉，故有是名。"
},{
name: "西瓜",
description: "西瓜（学名：Citrullus lanatus (Thunb.) Matsum. et Nakai），为葫芦科西瓜属 [2]一年生蔓生藤本植物 [3]，又名寒瓜、水瓜、西瓜皮等 [1]。茎、枝粗壮，被白色或淡黄褐色长柔毛。叶片纸质，轮廓三角状卵形，带白绿色。雌雄同株，雌、雄花均单生于叶腋。果实大型，近于球形或椭圆形，果皮光滑，色泽及纹饰各式。种子多数，卵形，黑色、红色，有时为白色、黄色、淡绿色或有斑纹。花果期夏季。 [3]在中国，西瓜因从西域（中国新疆和中亚一带）地区传入，因而得名西瓜，即来自西方的瓜。"
}]
然后我们将卡片的标题绑定到 name 字段，卡片的内容绑定到 description 字段
这时卡片就会通过列表进行渲染
同样，还有很多可以使用列表的组件，比如下拉框选项、单选按钮选项、多选按钮选项、折叠面板等等
通过将父组件中放入一个列表，然后再在列表中放入需要循环渲染的组件，这样就能够组合出各种各样的列表展示
列表组件中也可以放入多个组件进行组合式的循环渲染
3. 树组件 lc-tree
除了列表形式的组件可以绑定 data 属性字段，树组件也可以绑定 _data 字段
拖入一个树组件放入到页面中，然后我们绑定如下的数据：
[{
id: 1,
label: "一级1",
children: [{
id: 2,
label: "二级1-1"
},{
id: 3,
label: "二级1-2"
}]
},{
id: 4,
label: "一级2",
children: [{
id: 5,
label: "二级2-1",
children: [{
id: 6,
label: "三级2-1-1"
}]
},{
id: 7,
label: "二级2-2"
}]
}]
这样就渲染出了树结构
_class 属性
项目中预置了大多数常见的单属性，我们可以通过简写的形式去使用，要想类名生效一定要遵守约定。
举几个例子来说明一下：
- 设置display: none；可以通过d-n。
- 设置color: red；可以通过c-red。
- 设置position: relative；可以通过p-r。
- 设置padding-top: 5px；可以通过pt-5。
- 设置margin-top: -10px；可以通过mt--10；
- 设置cursor: pointer；可以通过c-p；
- 设置width: 50%；可以通过w_50。
类名的设定只要遵循以下几个原则：
- key中没有短横线，则直接取首字母，key中有短横线，则取短横线分割之后的每个首字母。
- value中没有短横线，直接取首字母，value中有短横线，则取短横线分割之后的每个首字母。
- 将上面取到的两部分用短横线拼接起来，这样就构成了简写类名。
- 如果属性是颜色，那么短横线后面就直接拼接去掉#的颜色值，或者完整英文。
- 如果属性是宽高等数值类型，那么默单位为px，短横线后面直接拼接数值即可，如果是负值那么就用两个短横线连接，如果是百分比值那么就用下划线连接。如果是其他单位，那么需要在最后面明确指定。
- 对于有冲突的属性，比如min-width和max-width简写都是mw，那么就需要前缀全拼，即minw-50或maxw-50。
上面这些约定是一个基本约定，但是也有一些特殊的属性具有特定的写法，具体内容可以浏览下面的示例部分
类名格式
与将自定义类名绑定给组件，一个类名绑定多个属性对不同，我们这里是使用的单元类名的方式，也就是说你写的每一个类名都对应了一个单独属性对。
代码会根据类名自动生成相应的样式属性，不是穷举法预置的，也就是页面只会生成需要的样式，不会生成多余的样式，重用的样式只会生成一次，能达到复用的目的，这些对于使用者来说是无感的。
使用者只需要按照格式来命名类名即可。
我们秉持缩写的原则，即属性名的首字母缩写，然后再加上对应的值的首字母缩写，把他们用横线连接起来。
举几个例子：示例是表示它们可能的用法，各种用法之间可以自由组合。
- 宽度width
宽度有几种指定方式：固定值、百分比值、全局值等。
其中w是width的缩写，vw表示用视口宽度。
w-50: 表示宽度为50px，等同于width: 50px;。
w_50: 表示宽度为50%，等同于width: 50%;，百分比的值使用下划线。
vw_50: 表示宽度为视口的50%，等同于width: 50vw;。
minw-50: 表示最小宽度为50px，等同于min-width: 50px;，由于min和max首字母都是m，并且他们都起到形容修饰的作用，因此对这种直接写全，同理最小高度就是minh。
- 外边距margin
外边距也有几种指定方式：固定值、百分比值、全局值等。
其中m是margin的缩写，ml是margin-left的缩写，mx是margin-left和margin-right的缩写，x表示水平方向，同样my表示的是上下外边距。
m-10: 表示外边距10px，等同于margin: 10px;。
ml-10: 表示左外边距为10px，等同于margin-left: 10px;。
mt--10: 表示上外边距为-10px，等同于margin-top: -10px;。
mx-10: 表示左右外边距为10px，等同于margin-left: 10px;margin-right: 10px;。
- 定位position
其中p是positon的缩写，r是属性值relative的缩写。
p-r: 表示相对定位，等同于positon: relative;。
p-a: 表示绝对定位，等同于positon: absolute;。
- 显示类型display
其中d是display的缩写，b是属性值block的缩写。
d-i: 表示行内，等同于display: inline;。
d-ib: 表示行内块，等同于display: inline-block;。
d-n: 表示隐藏，等同于display: none;。
d-f: 表示弹性布局，等同于display: flex;。
- 鼠标形状cursor
其中c是cursor的缩写。
c-p: 表示手形状，等同于cursor: pointer;。
c-na: 表示不允许操作，等同于cursor: not-allowed;。
- 颜色color
其中c是color的缩写，不用担心跟鼠标形状cursor会冲突，因为它们的值格式不同。
c-red: 表示红色，等同于color: red;，可以直接指定颜色单词。
c-ff0000: 表示红色，等同于color: #ff0000;，也可是指定rgb形式的颜色值。
- 背景色background-color
其中bgc是background-color的缩写，这里没用bc的原因是因为我们熟悉背景的英文缩写就是bg，因此这里沿用下来，也让人容易理解，而且也是为了避免与border-color相冲突。
bgc-123456: 表示背景色为#123456，等同于background-color: #123465;。
- 字体大小font-size
其中fs是font-size的缩写。
fs-18: 表示字体大小为18px，等同于font-size: 18px;。
- 边框border
其中b是border的缩写，后面的值分为三个，第一个表示边框宽度，第二个表示线的类型，第三个表示线的颜色，颜色可以是英文单词或者十六进制或者rgb等。
b-n: 表示不显示边框，等同于border: none;。
b-1-solid-red: 表示1px的红色实线边框，等同于border: 1px solid red;。
b-1-solid-ff0000: 表示1px的红色实线边框，等同于border: 1px solid #ff0000;。
- 对齐方式text-align
其中ta是text-align的缩写。
ta-c: 表示居中对齐，等同于text-align: center;。等等等等，其他的类名也都遵守上面的格式。不再一一列举。
【项目体验】
