VueLearn1/Composing.html

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" href="index.css">
	<script src="vue.js"></script>
</head>
<body>	
	<div id = "app-7">
		<ol>
			<todo-item
				v-for = "item in groceryList"
				v-bind:todo = "item"
				v-bind:key = "item.id"
			></todo-item>
		</ol>
	</div>
	
	<script>
		//组键的定义
		Vue.component('todo-item', {
  			props: ['todo'],
  			template: '<li>{{ todo.text }}</li>'
		})

		var app7 = new Vue({
			el:'#app-7',
			data:{
				groceryList:[
					{id : 0,text : '蔬菜'},
					{id : 1,text : '奶酪'},
					{id : 2,text : '随便其他什么人吃的东西'}
				]
			}
		})
		
	</script>
</body>
</html>