vue 插槽

1.box-sizing

box-sizing:border-box;就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

2.CSS3 @media 查询

body {
		background-color:lightgreen;
}
@media screen and (max-width: 300px) {
    body {
        	background-color:lightblue;
   			 }
}
浏览器窗口的宽度小于 300 像素时，背景颜色会变成淡蓝，否则是淡绿色

3.插槽
1.匿名插槽

  <tem>
Your Profile
</tem>
你自己定义的插槽在自组件中使用的时候，在子组件之间写东西，因为tem代表的是你的子组件，所以找不到位置

解决

	你在 <tem> 的模板中可能会写为
	var tem={
	<template>
			`<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<slot></slot>
			</ul>`
	</template>
	}
	
	当组件渲染的时候，<slot></slot> 将会被替换为“Your Profile”。插槽内可以包含任何模板代码，包括 HTML结构

2.具名插槽
组件标签中的所有内容会渲染到插槽位置上

	你在 <tem> 的模板中可能会写为
	<tem>
		<template #before>
			<h1>我在前面</h1>
		</template>
		<template #after>
			<h1>我在后面面</h1>
		</template>
	</tem>
	使用具名插槽的时候不能直接写结构，需要在外面套一层template，不然报错
	上面的#before也就是v-slot="before"
	解决
	var tem={
	<template>
			`<ul>
			<slot name="before"></slot>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<slot name="after"></slot>
			</ul>`
	</template>
}