Skip to content

Commit

Permalink
update form md
Browse files Browse the repository at this point in the history
  • Loading branch information
Xicheng Guo committed Jul 23, 2024
1 parent ac205ff commit 61c0fef
Show file tree
Hide file tree
Showing 4 changed files with 105 additions and 14 deletions.
37 changes: 24 additions & 13 deletions src/.vitepress/sidebars/vue.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -49,16 +49,27 @@
link: /frontend/vue/template-syntax/list-rendering#template-上的-v-for
- text: v-for 与 v-if
link: /frontend/vue/template-syntax/list-rendering#v-for-与-v-if
# - text: 核心概念
# items:
# - text: 模版语法
# link: /frontend/vue/core-concepts/template-syntax
# items:
# - text: 文本插值
# link: /frontend/vue/core-concepts/template-syntax#文本插值
# - text: 原始 HTML
# link: /frontend/vue/core-concepts/template-syntax#原始-html
# - text: 属性绑定
# link: /frontend/vue/core-concepts/template-syntax#属性绑定
# - text: 表达式
# link: /frontend/vue/core-concepts/template-syntax#表达式
- text: 表单
items:
- text: 双向绑定
link: /frontend/vue/form/two-way-binding
items:
- text: 什么是双向绑定
link: /frontend/vue/form/two-way-binding#什么是双向绑定
- text: 文本框
link: /frontend/vue/form/two-way-binding#文本框
- text: 复选框
link: /frontend/vue/form/two-way-binding#复选框
- text: 单选框
link: /frontend/vue/form/two-way-binding#单选框
- text: 下拉选框
link: /frontend/vue/form/two-way-binding#下拉选框
- text: 修饰符
link: /frontend/vue/form/modifiers
items:
- text: .lazy
link: /frontend/vue/form/modifiers#lazy
- text: .number
link: /frontend/vue/form/modifiers#number
- text: .trim
link: /frontend/vue/form/modifiers#trim
2 changes: 1 addition & 1 deletion src/MarkMap.vue
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ const createOrUpdateMarkmap = (markmapFormat) => {
if (activeNode) {
activeNode.scrollIntoView({ behavior: 'auto', block: 'center' });
}
}, 500)
}, 600)
});
});
}
Expand Down
26 changes: 26 additions & 0 deletions src/frontend/vue/form/modifiers.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
# 修饰符

## .lazy

`v-model` 默认会在每次 `input` 事件触发后同步数据,可以添加 `lazy` 修饰符,从而转变为在 `change` 事件触发后同步数据。

<<< @/../projects/vue-sandbox/src/components/Form/Modifier.vue#lazy

## .number

`v-model` 默认会将输入的值转换为字符串,可以添加 `number` 修饰符,从而将输入的值转换为数字。

::: details

- 如果输入的值无法被`parseFloat`解析为数字,那么将返回原始值。
- `number` 修饰符会在输入框有 `type="number"` 时自动生效。

:::

<<< @/../projects/vue-sandbox/src/components/Form/Modifier.vue#number

## .trim

`v-model` 默认会保留输入的值的前后空格,可以添加 `trim` 修饰符,从而去除输入的值的前后空格。

<<< @/../projects/vue-sandbox/src/components/Form/Modifier.vue#trim
54 changes: 54 additions & 0 deletions src/frontend/vue/form/two-way-binding.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
# 双向绑定

## 什么是双向绑定

在前端处理表单时,常常需要将表单输入的内容同步给 Javascript 变量,或者将 Javascript 变量的值同步给表单输入。这种双向的数据同步,就是双向绑定。

::: warning

- `v-model` 只能用在表单元素上。
- `v-model` 会忽略所有表单元素的 `value``checked``selected` 特性的初始值,而总是将 `Vue 实例`的数据作为数据来源。
- `v-model` 会根据所使用的元素自动使用对应的 DOM 属性和事件组合:
- `<input>``<textarea>` 元素绑定 `value` 属性并监听 `input` 事件;
- `checkbox``radio` 绑定 `checked` 属性并监听 `change` 事件;
- `<select>` 绑定 `value` 属性并监听 `change` 事件。

:::

## 文本框

<<< @/../projects/vue-sandbox/src/components/Form/TextBox.vue

## 复选框

::: code-group

<<< @/../projects/vue-sandbox/src/components/Form/CheckBox.vue [基本用法]

<<< @/../projects/vue-sandbox/src/components/Form/CheckBoxValueBind.vue [值绑定]

:::

## 单选框

::: code-group

<<< @/../projects/vue-sandbox/src/components/Form/RadioBtn.vue [基本用法]

<<< @/../projects/vue-sandbox/src/components/Form/RadioBtnValueBind.vue [值绑定]

:::

## 下拉选框

::: details
如果 `v-model` 表达式的初始值不匹配任何一个选择项,`<select>` 元素会渲染成一个“未选择”的状态。在 iOS 上,这将导致用户无法选择第一项,因为 iOS 在这种情况下不会触发一个 change 事件。因此,建议提供一个空值的禁用选项。
:::

::: code-group

<<< @/../projects/vue-sandbox/src/components/Form/Selector.vue [基本用法]

<<< @/../projects/vue-sandbox/src/components/Form/SelectorValueBind.vue [值绑定]

:::

0 comments on commit 61c0fef

Please sign in to comment.