/*
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
margin-bottom: 20px;
}
</style>
<script src="js/vue.js"></script>
<script src="js/jquery-1.12.3.min.js"></script>
</head>
<body>
<!--demo7-->
<div id="app7">
<ol>
<!--创建待办事项项组件的实例-->
<!--现在，我们提供了每个待办事项项目-->
<!--他的内容可以是动态的-->
<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
</ol>
</div>
<script>
/*待办事项组件现在接受一个“道具”，这就像一个自定义属性。*/
Vue.component('todo-item',{
props:['todo'],
template:'<li>{{ todo.text }}</li>'
})
var app7 =new Vue({
el:"#app7",
data:{
groceryList:[
{text:'1111'},
{text:'2222'},
{text:'3333'}
]
}
})
</script>
</body>
</html>
*/