From 61c0fef9379f5608c3773b4260e10b7922d8edd2 Mon Sep 17 00:00:00 2001
From: Xicheng Guo <xicheng_guo@wistron.com>
Date: Tue, 23 Jul 2024 17:07:19 +0800
Subject: [PATCH] update form md

---
 src/.vitepress/sidebars/vue.yaml         | 37 ++++++++++------
 src/MarkMap.vue                          |  2 +-
 src/frontend/vue/form/modifiers.md       | 26 ++++++++++++
 src/frontend/vue/form/two-way-binding.md | 54 ++++++++++++++++++++++++
 4 files changed, 105 insertions(+), 14 deletions(-)
 create mode 100644 src/frontend/vue/form/modifiers.md
 create mode 100644 src/frontend/vue/form/two-way-binding.md

diff --git a/src/.vitepress/sidebars/vue.yaml b/src/.vitepress/sidebars/vue.yaml
index 8e51e1a..ef632ec 100644
--- a/src/.vitepress/sidebars/vue.yaml
+++ b/src/.vitepress/sidebars/vue.yaml
@@ -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#表达式
\ No newline at end of file
+      - 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
\ No newline at end of file
diff --git a/src/MarkMap.vue b/src/MarkMap.vue
index acc548f..8ee8b02 100644
--- a/src/MarkMap.vue
+++ b/src/MarkMap.vue
@@ -39,7 +39,7 @@ const createOrUpdateMarkmap = (markmapFormat) => {
                 if (activeNode) {
                     activeNode.scrollIntoView({ behavior: 'auto', block: 'center' });
                 }
-            }, 500)
+            }, 600)
         });
     });
 }
diff --git a/src/frontend/vue/form/modifiers.md b/src/frontend/vue/form/modifiers.md
new file mode 100644
index 0000000..1ca9e18
--- /dev/null
+++ b/src/frontend/vue/form/modifiers.md
@@ -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
diff --git a/src/frontend/vue/form/two-way-binding.md b/src/frontend/vue/form/two-way-binding.md
new file mode 100644
index 0000000..4cbf16a
--- /dev/null
+++ b/src/frontend/vue/form/two-way-binding.md
@@ -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 [值绑定]
+
+:::