<div id="personapp">
  <h3>Person List</h3>
  <person-item v-for="person in personitems" v-bind:person="person"></person-item>
</div>
<script type="text/x-template" id="personitem">
  <div id="personitem">
		<p>Hello {{person.name}}</p>
		<p>Age: {{person.age}}</p>
		<hr/>
	</div>        
</script>
body {
  background-color: lightsteelblue;
}
Vue.component('person-item', {
  props: ['person'],
  template: '#personitem'
});

var app = new Vue({
  el: '#personapp',
  data: {
    personitems: [
      {name: 'tamer', age: 25}, 
      {name: 'tolga', age: 45},
      {name: 'veli', age: 33}     
    ]
  }
});  

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/vue@2.0.3/dist/vue.js