<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <script src="./vue.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
body{
background-color: #ccc;
}
#app{
width: 400px;
margin: 20px auto;
background-color: #fff;
border:4px solid blueviolet;
border-radius: 1em;
box-shadow: 3px 3px 3px rgba(0, 0, 0, .5);
padding:1em 2em 2em;
}
h3{
text-align: center;
}
.title{
display: flex;
justify-content: space-between;
align-items: center;
border:1px solid #ccc;
padding: 0 1em;
}
.title h4{line-height: 2;margin:0;}
.container{
border:1px solid #ccc;
padding: 0 1em;
}
.btn {
/* 鼠标改成手的形状 */
cursor: pointer;
}
</style>
</head>
<body>
<div id="app">
<h1>xxxxx</h1>
<my-pannel>
<!-- 向一个名为head的插槽中插入内容 -->
<div slot="head">123</div>
<h1 slot="foot">h1</h1>
</my-pannel>
<!-- <组件 a="1" b="2"> <div>xx</div> </组件> -->
</div>
<script>
// 封装一个组件
Vue.component('MyPannel', {
template: `
<div>
MyPannel
定义一个具名插槽
<slot name="head"></slot>
<hr/>
<slot name="foot"></slot>
</div>
`
})
const vm = new Vue({
el: "#app"
})
</script>
</body>
</html>