<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vue组件:todolist</title>
    <script src="vue.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <div id="root"><!-- 父组件 -->
      <div >
        <input v-model="inputValue"/>
        <button @click="handleSubmit">提交</button>
      </div>
      <ul>
         <!-- 子组件 -->
        <todo-item 
        v-for="(item,index) in list" 
        :key="index"
        :content="item"
        :index="index"
        @delete="handleDelete">
        </todo-item>
      </ul>
    </div>
    <script type="text/javascript">

      //组件拆分
      Vue.component('todo-item',
      {
        template:"<li @click='handleClick' >{{content}}{{index}}</li>",
        props:['content','index'],
        methods:{
          handleClick:function(){
            this.$emit('delete', this.index)
          },
        }
      });

      new Vue({
        el:"#root",
        data:{
          inputValue:'hello',
          list:[]
        },
        methods:{
          handleSubmit:function(){
            this.list.push(this.inputValue)
          },
          handleDelete:function(index){
            this.list.splice(index)
          }
        }
      })
    </script>

  </body>
</html>