3: 表单和事件

所有应用程序都需要允许用户对存储的数据执行某些类型的交互。在我们的例子中，第一种交互类型是插入新的任务，否则我们的应用程序就没有多大价值，不是吗？

用户在网站中插入或编辑数据的主要方式之一是通过表单，在大多数情况下，使用<form>标签是一个好主意，因为它为其中的元素提供了语义含义。

3.1: 创建任务表单

首先，我们需要创建一个简单的表单组件来封装我们的逻辑。

在你的ui文件夹中创建一个名为TaskForm.vue的新文件。

imports/ui/TaskForm.vue

<template>
  <form className="new-task" @submit.prevent="handleSubmit">
    <input
      type="text"
      placeholder="Type to add new tasks"
      v-model="newTask"
    />
    <button type="submit">Add Task</button>
  </form>
</template>

<script>
  import Vue from "vue";
  import { TasksCollection } from "../../api/TasksCollection";

  export default {
    data() {
      return {
        newTask: ""
      }
    },
    methods: {
      handleSubmit(event) {}
    },
}
</script>

此表单将添加一个具有v-model属性的输入元素。newTask数据字段现在将通过双向绑定绑定到输入元素的值。

你还可以看到，表单元素有一个@submit.prevent属性，它引用了一个名为handleSubmit的方法，我们稍后将在组件的methods对象中定义它。在Vue中，这就是你监听浏览器事件的方式，例如表单上的提交事件。

在组件的methods中，我们有handleSubmit来处理表单的输入，我们稍后会回到这里。

3.2: 更新App组件

然后，我们只需将其添加到App组件中，位于你的任务列表上方。

imports/ui/App.vue

<template>
  <div className="container">
    <header>
      <h1>Todo List</h1>
    </header>
    <TaskForm />
    <ul>
      <Task
          v-for="task in tasks"
          v-bind:key="task._id"
          v-bind:task="task"
      />
    </ul>
  </div>
</template>

<script>
import Vue from "vue";
import Task from "./components/Task.vue";
import TaskForm from "./components/TaskForm.vue";
import { TasksCollection } from "../api/TasksCollection";

export default {
  components: {
    Task,
    TaskForm
  },
  data() {
    return {};
  },
  methods: {},
  meteor: {
    tasks() {
      return TasksCollection.find({}).fetch();
    }
  }
};
</script>

3.3: 更新样式表

你也可以对其进行样式设置，目前我们只需要在顶部添加一些边距，这样表单就不会显得有点偏离目标。添加CSS类.task-form，这需要与表单组件中的class属性中的名称相同。

client/main.css

.new-task {
  margin-top: 1rem;
}

3.4: 添加提交处理程序

现在，你可以使用我们之前准备好的handleSubmit方法将提交处理程序附加到你的表单。

如你所见，在Vue中，你可以通过直接引用组件上的方法来处理DOM事件。在事件处理程序中，你可以通过为元素提供v-model属性并在data属性中添加字段来引用组件中的元素。在Vue.js指南中了解更多关于Vue支持的不同类型的事件以及事件系统如何工作的信息。

imports/ui/TaskForm.vue

..

  methods: {
    handleSubmit(event) {
      TasksCollection.insert({
        text: this.newTask,
        createdAt: new Date() // current time
      });

      // Clear form
      this.newTask = "";
  }
},
..

还在你的task文档中插入一个日期createdAt，以便你了解每个任务的创建时间。

在事件处理程序中，我们通过调用TasksCollection.insert()将任务添加到tasks集合中。我们可以为任务对象分配任何属性，例如创建时间，因为我们永远不必为集合定义模式。

现在，如果我们尝试向集合中添加任何内容，将被拒绝。出于原型设计目的，我们将添加insecure包以暂时解决此问题。

meteor add insecure

能够从客户端向数据库中插入任何内容并不安全，但目前可以接受。在第8步中，我们将学习如何使我们的应用程序安全并限制数据如何插入到数据库中。

3.5: 首先显示最新的任务

现在，你只需要进行一个更改，这将使用户感到高兴：我们需要首先显示最新的任务。我们可以通过对Mongo查询进行排序来快速完成此操作。

imports/ui/App.vue

..

  meteor: {
    tasks() {
      return TasksCollection.find({}, { sort: { createdAt: -1 } }).fetch();
    }
  }
 ..

你的应用程序应该如下所示

回顾：你可以查看你的代码在这一步结束时应该是什么样子这里

在下一步中，我们将更新你的任务状态并为用户提供删除任务的方法。