second.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="./vue.js"></script>
    <title>TodoList</title>
  </head>
  <body>
        <div id="app">
       <input type="text"    v-model = 'inputValue' />
       <button @click='handleClick'> 提交 </button>
       <ul>
           <todo-item   v-bind:content='item'  v-for='item in list'> </todo-item>
       </ul>

        </div>
         <script>
           var TodoItem = {
             props :['content'],
             template:'<li @click = handleItemClick >{{content}}</li>',
             methods : {
               handleItemClick : function (){
                  alert('click') ;
               }
             }
           }

         var  app = new Vue({
             el: '#app',
             components :{
              TodoItem:TodoItem
             },
             data:{
                 list :[] ,
                 inputValue:''
             },
             methods : {
             handleClick : function (){
                     this.list.push(this.inputValue);
                     this.inputValue = '';
                  }
             }

         })
         
         </script>
       

    
  </body>
</html>