vue第一个小demo：使用vue.js做一个简单的todolist

html

<div id="app">
	<!-- 使用v-model绑定输入框中的数据 -->
	<input type="text" v-model="todoValue"/>
	<!-- 使用v-on触发时间，click，点击事件 -->
	<button v-on:click="hdclick">提交</button>
	<ul>
		<!-- v-bind 与 :  等同-->
		<!-- 循环获取list中的数据，其中item为内容，index为序号 ，将item与content绑定-->
		<todo-item v-bind:content="item" 
				   :index="index"
				   v-for="(item,index) in list"
				   <!-- 监听delete事件 -->
				   @delete="hdItemDelete"></todo-item>
	</ul>
</div>

js

<script>
	// Vue.component("TodoItem",{
	// 	props:['content'],
	// 	template:"<li>{{content}}</li>"
	// })
	var TodoItem = {
		// 定义一个子模块,通过props接受绑定的数据
		props:['content','index'],
		// @click = v-on:click
		template:"<li @click='hditemclick'>{{content}}</li>",
		methods:{
			hditemclick: function(){
				this.$emit("delete",this.index);
			}
		}
	}
	
	var app = new Vue({
		el:'#app',
		components:{
			TodoItem: TodoItem
		},
		data:{
			todoValue:'',
			list:[]
		},
		methods:{
			hdclick: function(){
				this.list.push(this.todoValue)
				this.todoValue=''
			},
			hdItemDelete: function(index){
				this.list.splice(index,1)
			}
		}
	})
</script>

通过这个小demo初步了解了vue.js的语法，如何创建子模块，v-model，v-for，v-on，父子模块间传值