完成TODO应用：

HTML文件为：
<div id="todo-list-example">
    <form v-on:submit.prevent="addNewTodo" method="post">
        <label for="new-todo">Add a todo</label>
        <input v-model="newTodoText" id="new-todo" placeholder="E.g. Feed the cat"/>
        <button type="submit">ADD+</button>
    </form>
    <ul>
        <li
            is="todo-item"
            v-for="(entry, index) in items"
            v-bind:key="entry.id"
            v-bind:title="entry.title"
            v-on:remove="items.splice(index, 1)">
        </li>
    </ul>
</div>
<script type="text/javascript">
    Vue.component('todo-item', {
        template: '<li>{{ title }}&nbsp;&nbsp;<button v-on:click="$emit(\'remove\')">Remove</button></li>',
        props: ['title']
    })
    const vm = new Vue({
        el: '#todo-list-example',
        data: {
            newTodoText: '',
            items: [
                {id: 1, title: 'Do the dishes'},
                {id: 2, title: 'Take out the trash'},
                {id: 3, title: 'Mow the lawn'}
            ],
            nextTodoId: 4
        },
        methods: {
            addNewTodo: function(){
                this.items.push({
                    id: this.nextTodoId++,
                    title: this.newTodoText
                })
                this.newTodoText = ''
            }
        }
    })
</script>