VUEComponent

VUE Component

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<div id="app-7">
  <ol>
    <!-- Now we provide each todo-item with the todo object    -->
    <!-- it's representing, so that its content can be dynamic -->
    <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
  </ol>
</div>

JavaScript

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo}}</li>'
})
var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
       'Vegetables' ,
        'Cheese' ,
        'Whatever else humans are supposed to eat' 
    ]
  }
})