Panel Component with props

Vue Component demo by http://qcode.in

by Saqueib Ansari

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div class="container">
  <div id="app">
  
    <bs-panel 
      title="User Details" 
      body="Hi, I am Saqueib Ansari from http://www.qcode.in">
    </bs-panel>
    
    <bs-panel 
      title="Latest Posts" 
      body="Components, Directives, Filters and Mixins in Vue JS">
    </bs-panel>
    
  </div>
</div>


<!-- Templates -->
<template id="panel">
  <div class="panel panel-default">
    <div class="panel-heading">{{ title }}</div>
    <div class="panel-body">
      {{ body }}
    </div>
  </div>
</template>

CSS

body {
  margin-top: 1rem
}

JavaScript

// Component 
Vue.component('bs-panel', {
  template: '#panel',
  props: ['title', 'body']
});

// Initialize Vue
new Vue({
  el: '#app'
})