index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue.js</title>
	<script src="https://unpkg.com/vue"></script>
</head>
<body>

	<!-- 文本插值 -->
	<!-- <div id="app">{{ message }}</div> -->
	<!-- 绑定 DOM 元素属性 -->
	<!-- <div id="app-2"><span v-bind:title="message">
		鼠标悬停几秒查看此处动态绑定的提示信息！
	</span></div> -->
	<!-- 条件循环 -->
	<!-- <div id="app-3">
		<p v-if="seen">现在你看到我了</p>
	</div> -->
	<!-- 绑定数组渲染项目列表 -->
	<!-- <div id="app-4">
		<ol>
			<li v-for="todo in todos">{{ todo.text }}</li>
		</ol>
	</div> -->
	<!-- 处理用户输入 -->
	<!-- <div id="app-5">
		<p>{{ message }}</p>
		<button v-on:click="reverseMessage">逆转消息</button>
	</div> -->
	<!-- v-model 指令 实现表单输入和应用状态之间的双向绑定 -->
	<!-- <div id="app-6">
		<p>{{ message }}</p>
		<input type="text" v-model="message">
	</div> -->

    <!-- <ol> -->
		<!-- 创建一个 todo-item 组件的实例 -->
  		<!-- <todo-item></todo-item> -->
    <!-- </ol> -->
    <div id="app-7">
	  <ol>
	    <!--
	      现在我们为每个 todo-item 提供待办项对象
	      待办项对象是变量，即其内容可以是动态的。
	      我们也需要为每个组件提供一个“key”，晚些时候我们会做个解释。
	    -->
	    <todo-item
	      v-for="item in groceryList"
	      v-bind:todo="item"
	      v-bind:key="item.id">
	    </todo-item>
	  </ol>
	</div>


	<script>

	//文本插值
	// var app = new Vue({
	// 	el:'#app',
	// 	data:{
	// 		message:'Hello Vue!'
	// 	}
	// });
	//绑定 DOM 元素属性
	// var app2 = new Vue({
	// 	el:'#app-2',
	// 	data:{
	// 		message:'页面加载于' + new Date()
	// 	}
	// });
	// 条件循环
	// var app3 = new Vue({
	// 	el:'#app-3',
	// 	data:{
	// 		seen:true
	// 	}
	// });
	// 绑定数组渲染项目列表
	
	// var app4 = new Vue({
	// 	el:'#app-4',
	// 	data:{
	// 		todos:[
	// 			{text:'学习javascript'},
	// 			{text:'学习vue'},
	// 			{text:'整个牛项目'}
	// 		]
	// 	}
	// });
	//在控制台里，输入 app4.todos.push({ text: '新项目' })，你会发现列表中添加了一个新项。
	// 处理用户输入
	// var app5 = new Vue({
	//   el: '#app-5',
	//   data: {
	//     message: 'Hello Vue.js!'
	//   },
	//   methods: {
	//     reverseMessage: function () {
	//       this.message = this.message.split('').reverse().join('')
	//     }
	//   }
	// })
	// <!-- v-model 指令 实现表单输入和应用状态之间的双向绑定 -->
	// var app = new Vue({
	// 	el:'#app-6',
	// 	data:{
	// 		message:'Hello Vue!'
	// 	}
	// });
	// 定义名为 todo-item 的新组件
	Vue.component('todo-item',{
		// template:'<li>这是一个待办项</li>'
		// // todo-item 组件现在接受一个
  		// "prop"，类似于一个自定义属性
  		// 这个属性名为 todo。
  		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>