diff --git a/docs/zh/guide/essentials/forms.md b/docs/zh/guide/essentials/forms.md index 868a3a406..67b837a90 100644 --- a/docs/zh/guide/essentials/forms.md +++ b/docs/zh/guide/essentials/forms.md @@ -1,8 +1,8 @@ # 表单处理 -在 Vue 中,表单可以是简单的 HTML 表单,也可以是复杂的嵌套自定义 Vue 组件表单元素。我们将逐步了解如何与表单元素交互、设置值和触发事件。 +在 Vue 中,表单可以是简单的 HTML 表单,也可以是复杂的嵌套自定义 Vue 组件表单元素。我们将逐步了解如何与表单元素交互、赋值和触发事件。 -我们将使用的主要方法是 `setValue()` 和 `trigger()`。 +我们主要使用的方法是 `setValue()` 和 `trigger()`。 ## 与表单元素交互 @@ -33,11 +33,11 @@ export default { ``` -### 设置元素值 +### 给元素赋值 -在 Vue 中,将输入绑定到数据的最常见方法是使用 `v-model`。正如你可能已经知道的,它处理每个表单元素发出的事件以及它接受的 props,使我们更容易处理表单元素。 +在 Vue 中,将输入绑定到数据的最常见方法是使用 `v-model`。你可能知道,它会处理每个表单元素发出的事件,且可以接受一些 props 使表单元素的工作变得更容易。 -要在 VTU 中更改输入的值,可以使用 `setValue()` 方法。它接受一个参数,通常是一个 `String` 或 `Boolean`,并返回一个 `Promise`,在 Vue 更新 DOM 后解析。 +要在 VTU 中更改输入的值,可以使用 `setValue()` 方法。它接受一个参数,通常是一个 `String` 或 `Boolean`,并返回一个 `Promise`,在 Vue 更新 DOM 后完成解析。 ```js test('sets the value', async () => { @@ -52,11 +52,11 @@ test('sets the value', async () => { 如你所见,`setValue` 将输入元素的 `value` 属性设置为我们传递的值。 -我们使用 `await` 确保 Vue 完成更新,并且更改已反映在 DOM 中,然后再进行任何断言。 +我们使用 `await` 确保在进行任何断言之前,Vue 已经完成更新并且这些更新已反映在 DOM 中。 ### 触发事件 -触发事件是处理表单和操作元素时的第二个重要操作。让我们看看之前示例中的 `button`。 +触发事件是处理表单和可交互元素时的第二个重要操作。让我们看看之前示例中的 `button`。 ```html @@ -82,7 +82,7 @@ test('trigger', async () => { 然后我们可以断言某个操作是否发生。在这种情况下,我们确认发出了正确的事件。 -让我们将这两个结合起来,测试我们的简单表单是否发出了用户输入。 +让我们将这两个结合起来,测试这个简单的表单是否发出了用户输入。 ```js test('emits the input to its parent', async () => { @@ -94,7 +94,7 @@ test('emits the input to its parent', async () => { // 触发元素 await wrapper.find('button').trigger('click') - // 断言 `submit` 事件被发出 + // 断言 `submit` 事件被发出 expect(wrapper.emitted('submit')[0][0]).toBe('my@mail.com') }) ``` @@ -105,7 +105,7 @@ test('emits the input to its parent', async () => { ### 与各种表单元素的协作 -我们看到 `setValue` 可以与输入元素一起使用,但它更为通用,可以设置各种类型输入元素的值。 +我们看到 `setValue` 可以与输入元素一起使用,事实上它可以给更多元类型的输入元素赋值,因此它非常全能。 让我们看一个更复杂的表单,它包含更多类型的输入。 @@ -152,9 +152,9 @@ export default { ``` -我们的扩展 Vue 组件稍微长一些,包含更多输入类型,并且 `submit` 处理程序已移至 `
` 元素。 +我们扩展的 Vue 组件稍微长一些,包含更多输入类型,并且 `submit` 处理程序已移至 `` 元素。 -就像我们为 `input` 设置值一样,我们也可以为表单中的所有其他输入字段设置值。 +就像我们为 `input` 赋值一样,我们也可以为表单中的所有其他输入赋值。 ```js import { mount } from '@vue/test-utils' @@ -171,19 +171,19 @@ test('submits a form', async () => { }) ``` -如你所见,`setValue` 是一个非常通用的方法。它可以与所有类型的表单元素一起使用。 +如你所见,`setValue` 是一个非常全能的方法。它可以与所有类型的表单元素一起使用。 -我们在每个地方都使用 `await`,以确保在触发下一个事件之前,每个更改都已应用。这是推荐的做法,以确保在 DOM 更新后进行断言。 +我们在每个地方都使用 `await`,以确保在触发下一个事件之前,每个更改都已生效。这是推荐的做法,以确保在 DOM 更新后进行断言。 ::: tip -如果你不为 `OPTION`、`CHECKBOX` 或 `RADIO` 传递参数给 `setValue`,它们将被设置为 `checked`。 +如果你处理 `OPTION`、`CHECKBOX` 或 `RADIO` 时没有给 `setValue` 传递参数,它们将被设置为 `checked`。 ::: -我们已经在表单中设置了值,现在该提交表单并进行一些断言了。 +我们已经为表单赋值,现在该提交表单并进行一些断言了。 ### 触发复杂事件监听器 -事件监听器并不总是简单的 `click` 事件。Vue 允许你监听各种 DOM 事件,添加特殊修饰符如 `.prevent` 等。让我们看看如何测试这些。 +事件监听器并不总是服务于简单的 `click` 事件。Vue 允许你监听各种 DOM 事件,添加特殊修饰符如 `.prevent` 等。让我们看看如何测试这些。 在上面的表单中,我们将事件从 `button` 移动到 `form` 元素。这是一个好的实践,因为这样可以通过按 `enter` 键提交表单,这是一种更原生的方式。 @@ -218,14 +218,14 @@ test('submits the form', async () => { 要测试事件修饰符,我们直接将事件字符串 `submit.prevent` 复制粘贴到 `trigger` 中。`trigger` 可以读取传递的事件及其所有修饰符,并选择性地应用必要的内容。 ::: tip -原生事件修饰符如 `.prevent` 和 `.stop` 是 Vue 特有的,因此我们不需要测试它们,Vue 内部已经对此进行了测试。 +诸如 `.prevent` 和 `.stop` 的原生事件修饰符是 Vue 特有的,因此我们不需要测试它们,Vue 内部已经对此进行了测试。 ::: 然后我们进行简单的断言,检查表单是否发出了正确的事件和载荷。 #### 原生表单提交 -在 `