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>