Vue基础练习之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"><!--监听事件-->
           </todo-item>
       </ul>
   </div>
   <script>
       /*Vue.component("TodoItem",{//全局组件
           props:["content"],
          template :"<li>{{content}}</li>"
       })*/
        var TodoItem = {
            //局部组件，需要在实例中声明
            props:["content","index"],
            template :"<li @click='handleItemClick'>{{content}}</li>",
            methods:{
                handleItemClick:function () {
                    this.$emit("delete",this.index);//触发事件
                }
            }
        }

        var app =new Vue({//创建实例
            el:"#app",//实例负责管理的dom区域
            components:{
                //子组件声明
              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>

 

posted @ 2019-08-02 16:20  且于黑白  阅读(202)  评论(0)    收藏  举报