实现一个todoList

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>todolist</title>
		<script src="vue.js"></script>
	</head>
	<!-- 
	 v-model:双向绑定，输入框的内容变化，vue对象的数据也变化，反之同样
	 v-on:click：简写为@click,绑定点击事件，执行vue对象里的函数内容
	 v-for：遍历vue对象里的数组，类似于高级for循环
	 Vue.component全局组件，以及局部组件
	 v-bind:index简写为:index,父组件给子组件传值
	 this.$emit 子组件给父组件传值,$表示一个实例或属性
	 -->
	<body>
		<div id="app">
			<!-- 双向绑定 -->
			<input type="text" name="" id="" value="" v-model="inputValue" />
			<!-- 绑定点击事件 -->
			<button type="button" v-on:click="handleBtnClick">提交</button>
			<ul>
				<!-- 遍历vue对象的数据 -->
				<!-- <li v-for="item in list">{{item}}</li> -->
				<!-- v-bind:content="item"给组件传值，可以简写为:content -->
				
				<!--todo-item为全局组件，驼峰命名用-代替，代替上面的li标签，把li标签写到全局组件的模板中  -->
				<!--content="item"把list中每一个元素取出来赋值给item，然后通过content和全局组件交互传值  -->
				<!--@delete监听子组件的delete事件  -->
				<!--v-for="(item,index) in list" index是元素下标  -->
				<todo-item :content="item" v-bind:index="index" v-for="(item,index) in list" @delete="handleItemClick"></todo-item>
			</ul>
		</div>
		<script type="text/javascript">
			/* 创建全局组件,名字叫做TodoItem */
			Vue.component("TodoItem", {
				props: ['content'],
				/* 参数 */
				template: "<li>{{content}}</li>" /* 模板 */
			})
			/* 局部组件（其实就是一个变量），需要在vue实例中注册后才能使用 */
			var TodoItem = {
				props: ['content','index'],
				template: "<li @click='handleItemClick'>{{content}}</li>",
				methods:{
					handleItemClick:function(){
						this.$emit("delete",this.index);/*子组件向父组件传值，触发事件，事件名称为delete，参数为list下标  */
					}
				}
			}
			/* 新建一个vue对象 */
			var app = new Vue({
				el: '#app',
				/* 在vue中注册临时组件，变量名叫TodoItem，组件名也叫TodoItem */
				components: {
					TodoItem: TodoItem
				},
				data: {
					list: [],
					inputValue: ''
				},
				methods: {
					handleBtnClick: function() {
						/* 在vue对象里获取本对象数据用this. */
						this.list.push(this.inputValue)
						this.inputValue = ''
					},
					handleItemClick:function(index){
						/* 从index位置开始，删除一个元素 */
						this.list.splice(index,1);
					}
				}
			})
		</script>
	</body>
</html>