Vue basic exercises of Todo List

<body>
   <div id = "app">
       <input type="text" v-model="inputValue"/>
       <button v-on:click="handleBtnClick">提交</button>
       <ul>
          <!-- <li v-for="item in list">{{item}}</li>-->
           <todo-item v-bind:content="item"
                       v-bind:index="index"
                       v-for="(item,index) in list"
                       @delete = "handleItemDelete"> ! <- listen for events -> 
           </ TODO-Item > 
       </ ul > 
   </ div > 
   < Script > 
       / * Vue.component ( "TodoItem", {// global components 
           props: [ "content"], 
          Template: "<Li> {{Content}} </ Li>" 
       }) * / 
        var TodoItem = {
             // local assembly, in the example need to declare 
            the props: [ " Content " , " index " ], 
            Template: " < li @ click = 'handleItemClick'>{{content}}</li>", 
            Methods: { 
                handleItemClick: function () {
                     the this . $ EMIT ( " the Delete " , the this .index); // trigger event 
                } 
            } 
        } 

        var App = new new Vue ({ // create an instance 
            EL: " #app " , / / DOM instance is responsible for area management 
            components: {
                 // subassembly statement 
              TodoItem: TodoItem, 
            },  
            Data: {
                List: [],
                inputValue: ""
            },
            methods:{
                handleBtnClick:function () {
                    this.list.push(this.inputValue);
                    this.inputValue="";
                },

                handleItemDelete:function (index) {
                    this.list.splice(index,1);
                }
            }
        })



   </script>

</body>
Vue basic exercises of Todo List

Guess you like
