27 May, 2018

টিউটোরিয়াল

rimonmath

2431 views


Vue JS 2 বাংলা টিউটোরিয়াল #11: Components এর সোর্স কোড : 

 

 

 

 

style.css:

body{
	background: #e3e3e3;
}
.panel{
	width: 960px;
	margin: 44px auto;
	border: 1px solid #c5c0c0;
	background: #EEEEEE;
}

.panelTitle{
	background: #D1D1D1;
	font-weight: bold;
	padding: 9px;
	color: #505050;
}

.panelContent{
	padding: 22px;
	background: #fff;			
	min-height: 111px;
}

.close{
	float: right;
	cursor: pointer;
	padding: 0 9px;
}
.close:hover{
	background: #C85454;
}

 

index.html:

<!DOCTYPE html>
<html>
<head>
	<title>Vue Js Bangla Tutorial</title>
	<link rel="stylesheet" type="text/css" href="style.css">	
</head>
<body>

<div id="root">
	
	<panel title="This is panel title">
		This is panel content1 This is panel content This is panel content This is panel content
	</panel>


</div>

<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
	Vue.component("panel", {
		template: `
			<div class="panel" v-if="show">
				<div class="panelTitle">
					{{title}}
					<div class="close" @click="show = false">x</div>
				</div>
				<div class="panelContent">
					<p>				
						<slot></slot>
					</p>
				</div>
			</div>
		`,
		props: ['title', 'content'],

		data: function(){
			return {
				show: true
			}
		}
	});


	var app = new Vue({
		el: "#root",
		data: {
		}
	});
	
</script>

</body>
</html>