vue 版todolist

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/jscript" src="vue.js" charset="UTF-8"></script>
    </head>
    <body>

        <div id="todo-list-example">
            <form v-on:submit.prevent="addNewTodo">
                <label for="new-todo"> Add a todo</label>
                <input v-model="newTodoText" id='new-todo' placeholder="E.g. Feed the cat" />
                <button>Add</button>
            </form>

            <ul>
                <li is="todo-item" v-for="(todo,index) in todos" v-bind:key="todo.id" v-bind:title="todo.title" v-on:remove="todos.splice(index,1)"></li>
            </ul>
        </div>
        <script type="text/jscript">
            Vue.component('todo-item', {
                template: '\
            <li>\
            {{title}}\
            <button v-on:click="$emit(\'remove\')">remove</button>\
            </li>\
            ',
                props: ['title']

            })

            new Vue({
                el: '#todo-list-example',
                data: {
                    newTodoText: '',
                    todos: [{
                            id: 1,
                            title: 'Do the dishes'
                        },
                        {
                            id: 2,
                            title: 'Do the Vue'
                        }
                    ],
                    newTodoId: 3
                },
                methods: {
                    addNewTodo: function() {
                        this.todos.push({
                            id: this.newTodoId++,
                            title: this.newTodoText
                        })
                        this.newTodoText = ''
                    }
                }
            })
        </script>
    </body>
</html>