属性，多乎哉不多也。
原生HTML5提供了一些属性，然后UI库又在此基础上扩展了好多属性，所以与其说学习UI库，倒不如说是学习这些属性都是啥意思。
当然平时在使用的时候还是挺轻松的，设置需要的属性就好，其他的用到的时候再去看就好。
于是我们一般会按照官网的例子写属性值，比如这样：
<el-switch
v-model="value"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
但是感觉哪里不对的样子。
v-bind="{}" 要怎么用？
既然Vue提供了这么方便的绑定方式，我们弃之不用是不是有点可惜了呢？
于是我这么绑定属性
<el-input v-model="model.text" v-bind="metaText">
const metaText = reactive({
controlId: 101,
colName: 'name',
controlType: 101,
defaultValue: '1',
readonly: false,
disabled: false,
placeholder: '请输入姓名',
title: '姓名',
maxlength: 6,
minlength: 2,
autofocus: true,
'suffix-icon': 'el-icon-date'
})
这样是不是更优雅了一些呢？这些属性当然不用全写，而是需要哪个就写哪个，不需要的划掉就好。
这样集中管理属性，一次性统一绑定，以后增减属性的话，不用改模板了，只需要改这个对象就好。
而且，这个可以转换成 json 的格式，也就是说可以方便的用 require 加载，或者用 axios 加载。
require 方便好用，但是打包的时候会把 json 文件也加进来。
而用axios加载的话，意味着可以热更新，同时打包的体积也可以小很多。
看着挺好，但是实际上却……
如果你觉得上面的方法确实挺好的话，说明你没有实践过，如果真的勇敢就会觉得，完全不是这么回事，还不如直接写属性来的方便。
那么差在哪里呢？—— 差在了缺少一个辅助工具。
写个小工具生成属性
这几天都在做这个小工具，弄的有点头大，因为属性实在太多了。
表单子控件属性.png
后来发现自己的方向搞错了，这么弄会s人的。
于是换了一下思路，把属性分成两大类：
- 一个是基础属性，基于HTML5原生属性；
- 一个是扩展属性，就是UI库提供的属性。
这样可以先把基础属性搞起来，然后在慢慢弄扩展属性。
于是做成了这个样子：
020基础属性多行文本.png
或者这样：
021基础属性select.png
（看着是不是有点眼熟）
左面设置属性，右面立即渲染dom，下面是生成的属性对象，有js版和json版。
这样是不是很方便了呢？
这还只是第一步，因为这只是一个控件，一个表单里面有多少个这样的控件呢？
如果能够集中设置成一个大的json的话，是不是更方便了呢？
还有UI库的扩展属性，数据验证功能等。
大概还要好几天才能弄好。
