實現功能：在輸入框中輸入內容，點選提交後，內容在列表中出現，然後點選列表中的內容，對應列表會刪除

    <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個