Vue 官网文档 todolist的一些想法

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

在刚开始看这个例子的时候，看到

 <form v-on:submit.prevent="addNewTodo">

这句代码的时候就在找submit事件在那里触发，后来发现button如果不设置type的话，默认就是submit。可以参考MDN上的知识

 

另外form 上的for属性是为了提高form的可用性，将其设置与后边input框的id属性相同时，当你点击label，也会自动给予input框焦点。