Vue练习题：增删列表

 实现功能：在输入框中输入内容，点击提交后，内容在列表中出现，然后点击列表中的内容，对应列表会删除

    <div id="demo" class="demo">
        <input type="text" v-model="content">
        <button v-on:click="submit">提交</button>
        <ul>
            <todo-list v-for="(item,index) in items" :item="item" :index="index" @delete="deleteThing"></todo-list>
        </ul>
    </div>
    <script>
        var TodoList = {
            props: ['item', 'index'],
            template: `<li @click='$emit("delete",index)'>{{item}}</li>`
        }
        var vm = new Vue({
            el: '#demo',
            components: {
                TodoList: TodoList
            },
            data: {
                items: ['1', '2'],
                content: '',
            },
            methods: {
                submit: function () {
                    this.items.push(this.content);
                    this.content = ''
                },
                deleteThing: function (index) {
                    this.items.splice(index, 1);
                }
            }
        })
    </script>

此处用到了：

局部组件：局部组件在Vue的components中申明才能使用

组件的传值（索引值的传递）

数组方法：splice的用法（index, 1），从索引值是几的位置裁剪1个