组件要求
1 .直接引入就可以使用，新传入的值可以和原来的值复用
2 .默认显示全屏，然后自适应高度
layout
1 .给组件传入静态值，title='hello'
2 .给组件传入动态可变的，基于data，prop改变的值，v-bind来实现
3 .传入数字的时候，静态值也必须用v-bind来表明传入的是一个表达式
写组件的关键是找到数据的开头，数据的结尾，以及在整个过程中数据的各个过程的变化，以及我可以使用这个框架在什么地方可以获得这个状态（比如各种方法-生命周期，computed方法）
4 .怎么才能把子组件牢牢的限制在父组件里面。老是跑出来
5 .左右自适应全屏根本不用管，但是上下全屏自适应浏览器需要加个这样的属性： html,body,#app{
height: 100%;overflow:hidden
}
6 .也就说每一层都要不仅定义自己的flex:1实现全屏，还要使用display:flex;让下面的也有实现这个布局的基础，所以就是不知道这个写起来很麻烦，不知道浏览器的渲染效率怎么说，快不快。
7 .这个一层一层下去会不会忘了。然后在最小的显示屏幕那里overflow:auto即可。
8 .右边的滚动条太丑，怎么改那个东西。
9 .滚动条的所有部分都是可以使用diplay:none隐藏，这样可以使用js实现自己想要的效果，比如锯齿状的下拉菜单。
插槽使用
1 .插槽内可以包含任何的模板代码，包括html代码，更重要的是可以传入组件
2 .在react中，可以直接使用props向子组件传递组件
3 .具名插槽的使用 预留的地方，使用的地方
4 .slot=“name”不仅可以用在组件里面，而且普通元素也可以用，但是普通元素能承载的东西毕竟有限啊
5 .还可以保留一个未命名插槽，他会匹配到所有未匹配到的插槽内容的统一出口。
6 .作用域插槽：父组件可以使用子组件提供的数据来渲染页面。感觉没什么用处。。还的看后来的用处。
滚动条样式
1 .::-webkit-scrollbar {
width: 5px;background-color:red;为什么显示的是槽的背景颜色
}滚动条整体部分，可以设置图片
2 .::-webkit-scrollbar-thumb {
background-color:#000;
border-radius: 3px;
}滚动条里面可以拖动的地方
3 .::-webkit-scrollbar-button 滚动条两端的按钮
4 .::-webkit-scrollbar-track 滚动条外层轨道
5 .::-webkit-scrollbar-track-piece //内层轨道，滚动条中间部分
6 .::-webkit-scrollbar-corner:边角
7 .::-webkit-resizer : 右下角拖动块的位置
::-webkit-scrollbar-thumb:hover {
background-color: #000;
}
滚动条鼠标触摸
::-webkit-scrollbar-thumb:active {
background-color: #666;
}
滚动条滚动的时候
实现思路
1 .要想实现所有的flex层层递进，那就需要每一层都需要有这两个属性 display:flex.flex:1 然后在最小的地方来用overflow:scroll 来扩展矿口
2 .网页全屏实现的思路。
最基础的样式--类似样式重置
html,body{
margin: 0;
padding: 0;
height: 100%;
}
app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: @textColor;
height:100%;
min-width: 980px;
display: flex;
flex-direction: column;
flex:1;
}
1 .接下来的时候都直接写就可以了。
2 .关键是height:100%
通过组件传递来决定的css样式全部使用:style来绑定
传入的值
1 .hObject:header的css样式
2 .content:这个不用传，默认的是flex:1
3 .fObject:footer的css样式
问题
1 .props如果style传入的时候，页面上显示的时候很不美观
2 .还有就是如何绑定一些属性是不能通过传入改变，比如一些css值。
3 .还有就是默认可以传入一些值，然后新传入的值和默认的值合并显示，这个props好像不能实现，这个是新加入的props会默认替换掉原来的props。
解决方法
1 .换成class绑定
2 .不在props里面进行默认值的绑定，但是这个功能框架可以做个改进。具体实现是单独设置一个data，然后mounted拿到数据后合并数据。
3 .也就是说，现在一个组件的css样式一共存放在三个地方。组件的style里面的css，那是绝对不能改的。所以要对这个传入的props验证，如果传进来有修改这个的props，就返回false
hObject:{
type:Object,
validator:function(value){
for(let key in value){
let harray=['width']
//这个数组里面的值不能传入的
//这个还有个问题：如果传入不符合css规范的写法怎么判定
//还得判断是否传入的值为空，是判断对象，并不是数据。所以直接取length是没用的
//关键是数组验证还有点问题，返回了false，然后下面mounted还是会返回全部的数据，有毒
//所以还是直接在下面的mounted操作吧，允许传入这些数据，但是不使用这个算了。
//所以现在的解决方法就变成了默认的不可改的数据都放在了组件的data里面，然后修改。所以只要想的出来，其实不必要非要按照框架给的方案实现。
return !harray.includes(key)
}
},
},
4 .组件data里面的数据，我把默认的样式写在这个里面，这样新传入的props样式是会和data里面的样式进行一次合并，最后实际使用的是这个合并后的样式
5 .props传入的数据，这些是可以传入的，自定义的数据
6 .每做一步都需要看代码跑起来的情况，不然出了错还得不停的返回
7 .本来是验证的是不能符合的props是不能传入的，而且传入的props还会覆盖原来的默认值，所以要在mounted里面按照不能修改的css样式找出来，合并数据的时候把他删掉，这样用户不小心传入也不会生效，不影响正常使用，而且Object.assign()方法，把需要的css按照层级划分，默认的样式，传入的样式，基础的样式。这样三个对象合并的时候，会自动加上样式。
8 .快速的改变页面宽度的大小，浏览器在切换的时候会显示body的背景颜色。这个不知道有没有方法修改一下
9 .flex:1的时候会不填满高度，这个时候需要加个height:100%；
布局容器
1 .上中下三个
2 .左右布局
具体布局组件
1 .单一分栏创建所有的栅格布局，就是所有的都需要以行为单位显示数据
2 .row组件：进行横行的创建，可以传入参数如下
3 .栅格之间的间距，水平排列方式，栅格的高度，垂直的排列方式
4 .col组件：具体的内容呈现容器。这个有点简单，感觉不用做了
slot相关
1 .内容分发:将父组件传入的内容巧妙的放到子组件的某个位置
2 .父组件模板的所有东西都会在父级作用于内编译，子组件模板的所有东西都会在子集作用于内编译。在插槽中也是如此。
3 .作用域插槽在了解一下。
flex
1 .任何一个容器都可以指定为flex容器，那是不就意味着flex是可以隔代进行操作的。所有的子元素会自动称谓容器成员，那孙子元素呢？
2 .行内元素也可以使用flex布局，主要是还可以实现自适应的弹性布局
3 .flex-direction:项目的排列方式，默认是按照主轴排列，即横向排列。这个属性是来设置主轴的排列方向。
4 .justify-content:项目在主轴方向的对齐方式，横向，纵向（center,space-between,space-around）
5 .align-items属性：项目在交叉轴上项目的对齐方式，常用来做上下居中。
6 .flex-wrap:确定换行是怎们操作，之前都是单行的来操作，这个使用过的是日历的那个日期排列用过，其余的都是一行一行的操作，也就是设置为不换行。
7 .项目属性
flex局部布局
1 .
body{
background: #000;
}
.box{
width: 200px;
height: 200px;
background: #fff;
display: flex;
}
.box div{
width: 30px;
height: 30px;
border-radius: 50%;
background:#000;
}
justify-content: center;
justify-content: flex-end;
align-items: center;
align-items: center;
justify-content: center;
align-items: center;
justify-content: flex-end;
align-items: flex-end;
align-items: flex-end;
justify-content: center;
align-items: flex-end;
justify-content: flex-end;
justify-content: space-around;
flex-direction: column;
justify-content: space-around; 纵向排列
flex-direction: column;
justify-content: space-around;
align-items: center;
13 .flex 可以使用百分比，（25%）来实现每行添加4个单位，一直向下排列。流式布局
布局组件的必要性
1 .基础（栅格布局）
1 .横向排列的布局，里面可以插入横向的块，设置块之间的间隔，改变块之间的顺序，元素的偏移，元素的左右排列方式，元素的上下排列方式
2 .这样的简单东西其实根本不用代码，因为使用的场景太多了，如果都是这样写的话，每次用的时候都需要引入一次组件，还加重了dom结构，所以最简单的就是直接单独写css样式，特别是使用less分离出来样式的时候。
.fb{
display: flex;
flex:1;
}
.fb_heng{
flex-direction: row;
}
.fb_shu{
flex-direction:column;
}
2 .页面整体的布局-layout布局
1 .整个页面的布局。多个需要重复使用的，左右布局，圣杯布局之类的
2 .自适应的全面布局
3 .layout:其下可以嵌套Header, Slider, Content，Footer, layout本身
4 .header：顶部布局，自带默认样式，其下可以前台任何元素
5 .slider: 侧边栏，自带默认样式及基本功能
6 .Content:内容部分，自带默认样式，其下可嵌套任何元素
7 .Footer:底部元素，自带默认样式。
8 .侧边栏加一个收起功能
3 .其实也就这么一点，还不如直接写呢。。。
