button组件
1.需求分析
2.API设计
3. vue做了自动处理事件， 默认传到组件的根元素上
这里的onclick时间会被执行， 但是在button组件中没有进行任何处理
会默认传到button组件的根元素上
改变这种情况需要加个属性
继承属性改为false， 这样写在button上的事件等都不会生效
添加$attrs后， 所有的属性/方法 会在button上生效
如果想让div 和button都可以获取到外面传来的属性或方法 可以用下面的方法
4.剩余操作符
...rest
意思是：在context.attrs 中取出size, 剩下的变量放在rest中。然后在button中绑定rest，这样就可以在button中绑定除了size的其他属性或方法
5.小结
6.扩展运算符
{...xxx}
这个意思是把props这个对象展开再打印出来
7.props和attrs的区别
props必须先声明才能取值，才能打印出来， 如果不写红框里的内容就打印不粗来，是空的
props支持string以外的类型，而attrs只有string类型
比如在父组件写了disabled（=== disabled=true）
然后打印$attrs 发现disabled:' ' 是空字符串
在props中声明一下
打印props发现，是布尔类型
小结
8.动态绑定class
这个意思是 如果theme没传， 那么就不会有任何类，如果传了有值， 就会成 theme-xxx
9.flex&inline-flex
flex： 将对象作为弹性伸缩盒显示
inline-flex：将对象作为内联块级弹性伸缩盒显示
flex：父元素的尺寸不由子元素尺寸动态调整，不设置时默认是100%
inline-flex ：则会使父元素尺寸跟随子元素们的尺寸动态调整
10. 库css的注意事项
为了防止更改全局样式， 所以需要限定一下， 匹配所有gulu-开头的， 或类名中含有空格+gulu- 的元素
这样写的话就可以匹配到 类似 <div class="xxx gulu-button">的元素了
11.使用计算属性设置class
12.如果在props中声明了，就不会继承了，需要手动写
总结
手绘风格的UI库
wired elements : https://wiredjs.com/showcase.html
