master

分支 (1)

管理

管理

master

vue__learning_notes
/
index17.html

<!DOCTYPE html>
<html>

<head>
	<title>第18课  插槽</title>
	<style >
		.panel{
			max-width: 300px;
			border: 1px solid #999;
			margin-bottom: 15px;

		}
		.panel > *{
			padding: 15px;
		}
		.panel .title{
			border-bottom: 1px solid #999;

		}
		.panel .footer{
			border-top: 1px solid #999;
			text-align:right;
			height: 20px;
		}
	</style>
</head>
<body>

  <div id="app">
	  <panel>
	        <div slot="title">
				 Vue这是标题栏
			</div>
			<div slot="content">
				2YO>>>>>有******我来试试
			</div>
	  </panel>
	  <panel>2YO>>>>>有******</panel>
	  <panel>
	  	<div slot="title">
			在目前的三大前端框架中
		</div>
		<div slot="content">
	  在目前的三大前端框架中（Vue，Angular，React）Vue怕是最好上手的框架了，然而其核心功能和其他两者也竟然不相伯仲，那有什么理由不先学它呢？
	  	</div>
	  </panel>
  </div >

<template id="panel-tpl">
	<div class="panel">
			<div class="title">
				<slot name="title"></slot>
			</div>
			<div class="content">
				<slot name="content"></slot>
			</div>
			<div class="footer">more>></div>
	  </div>
</template>
<script src="vue-2.4.0.js"></script>
<script src="js17.js"></script>
</body>
</html>