<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<!-- 如果用script标签引入js最好放在head标签里可以避免抖屏 -->
<script src="./vue.js"></script>
</head>
<body>
<div id="test">
<div>
<input v-model="inputValue"/>
<button @click="handleSubmit">提交</button>
</div>
<ul>
<!-- 1.根据list循环显示子组件 -->
<!-- 3.创建子组件的时候向它传递了几个内容，有item、index等 ；4.小组件对应的下标-->
<!-- 5.在父组件里面创建一个子组件的同时也可以监听子组件向外触发的事件 -->
<todo-item v-for="(item,index) of list" :key="index" :content="item" :index="index" @delete="handleDelete">
</todo-item>
</ul>
</div>
<script>
/*声明一个子组件*/
Vue.component('todo-item', {
/*在vue中父组件向子组件传值是需要属性的形式进行值的传递*/
props: ['content', 'index'],
template: '<li @click="handleClick">{{content}}</li>',
methods: {
/*通过点击事件实现删除子组件数据的功能，实际上就是删除父组件中list里面的数据（因为子组件显示与否取决于父组件里的数据）*/
handleClick: function(){
/*这一个组件向外emit（触发）了一个事件叫做delete,这个事件携带了一个index值*/
this.$emit('delete', this.index)
}
}
})
/*new一个vue实例*/
new Vue({
/*挂载点，这个id的标签是这个实例的一个挂载点，标签下的所有内容当做是这个实例的模板来使用*/
el: "#test",
data: {
/*在vue实例的模板中有个输入框，用inputValue来获取输入框的值通过v-model实现绑定*/
inputValue: '',
list: []
},
methods:{
handleSubmit: function(){
/*点击提交时会把inputValue增加到list中*/
this.list.push(this.inputValue)
this.inputValue = ''
},
handleDelete: function(index){
this.list.splice(index, 1)
}
}
})
</script>
</body>
</html>