<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title></title>

</head>

<body>

<div id="app">

<ol>

<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>

</ol>

</div>

<script src="http://static.runoob.com/assets/vue/1.0.11/vue.min.js"></script>

<script>

Vue.component("todo-item",{

props:['todo'],

template:'<li>`todo`.`text`</li>'

});

new Vue({

el:'#app',

data:{

groceryList:[

{ text: 'Vegetables' },

{ text: 'Cheese' },

{ text: 'Whatever else humans are supposed to eat' }

]

}

});

</script>

</body>

</html>