编辑“︁Vue.js表单输入绑定”︁（章节）

= Vue.js表单输入绑定 =

'''Vue.js表单输入绑定'''（Form Input Bindings）是Vue.js框架中用于实现表单控件与组件数据双向绑定的核心机制。通过<code>v-model</code>指令，开发者可以轻松同步用户输入与JavaScript数据状态，无需手动操作DOM。

== 基础原理 ==
Vue.js通过<code>v-model</code>指令实现'''双向数据绑定'''：
* 当用户输入时，数据自动更新
* 当数据变化时，视图自动响应

其本质是语法糖，结合了：
* <code>v-bind</code>（属性绑定）
* <code>v-on</code>（事件监听）

数学表达为双向数据流：
<math>
\text{View} \rightleftharpoons \text{Model}
</math>

== 基础用法 ==
=== 文本输入 ===
<syntaxhighlight lang="html">
<template>
  <input v-model="message" placeholder="输入文本">
  <p>输入的内容是: {{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>
</syntaxhighlight>

'''输出效果'''：
* 输入框初始为空
* 当用户输入"Hello Vue"时，下方会实时显示相同内容

=== 多行文本 ===
<syntaxhighlight lang="html">
<textarea v-model="multilineText"></textarea>
<p style="white-space: pre-line">{{ multilineText }}</p>
</syntaxhighlight>

== 特殊表单控件处理 ==
=== 复选框 ===
单个复选框绑定布尔值：
<syntaxhighlight lang="html">
<input type="checkbox" v-model="isChecked">
<label>{{ isChecked ? '已选中' : '未选中' }}</label>
</syntaxhighlight>

多个复选框绑定数组：
<syntaxhighlight lang="html">
<div>
  <input type="checkbox" value="vue" v-model="checkedFrameworks">
  <label>Vue</label>
</div>
<div>
  <input type="checkbox" value="react" v-model="checkedFrameworks">
  <label>React</label>
</div>
<p>选择的框架: {{ checkedFrameworks }}</p>
</syntaxhighlight>

=== 单选按钮 ===
<syntaxhighlight lang="html">
<input type="radio" value="option1" v-model="picked">
<label>选项1</label>
<input type="radio" value="option2" v-model="picked">
<label>选项2</label>
<p>选择的是: {{ picked }}</p>
</syntaxhighlight>

=== 选择框 ===
单选下拉列表：
<syntaxhighlight lang="html">
<select v-model="selected">
  <option disabled value="">请选择</option>
  <option>选项A</option>
  <option>选项B</option>
</select>
<p>选择: {{ selected }}</p>
</syntaxhighlight>

多选下拉列表（绑定数组）：
<syntaxhighlight lang="html">
<select v-model="multiSelected" multiple>
  <option>选项1</option>
  <option>选项2</option>
</select>
<p>多选结果: {{ multiSelected }}</p>
</syntaxhighlight>

== 值绑定进阶 ==
通过<code>v-bind</code>实现动态值绑定：

<syntaxhighlight lang="html">
<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no"
>
<!-- 当选中时 toggle === 'yes' -->
<!-- 未选中时 toggle === 'no' -->
</syntaxhighlight>

== 修饰符 ==
Vue提供了多个<code>v-model</code>修饰符来处理特定需求：

=== .lazy ===
将输入事件改为change事件（失焦后更新）：
<syntaxhighlight lang="html">
<input v-model.lazy="msg">
</syntaxhighlight>

=== .number ===
自动将输入转为数字类型：
<syntaxhighlight lang="html">
<input v-model.number="age" type="number">
</syntaxhighlight>

=== .trim ===
自动去除首尾空白字符：
<syntaxhighlight lang="html">
<input v-model.trim="text">
</syntaxhighlight>

== 自定义组件中的v-model ==
在组件上使用<code>v-model</code>时，默认利用<code>modelValue</code>prop和<code>update:modelValue</code>事件：

子组件实现：
<syntaxhighlight lang="javascript">
export default {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  template: `
    <input
      :value="modelValue"
      @input="$emit('update:modelValue', $event.target.value)"
    >
  `
}
</syntaxhighlight>

父组件使用：
<syntaxhighlight lang="html">
<CustomInput v-model="searchText"/>
</syntaxhighlight>

== 实际应用案例 ==
=== 用户注册表单 ===
<syntaxhighlight lang="html">
<template>
  <form @submit.prevent="handleSubmit">
    <div>
      <label>用户名:</label>
      <input v-model.trim="form.username" required>
    </div>
    <div>
      <label>密码:</label>
      <input v-model="form.password" type="password" required>
    </div>
    <div>
      <label>订阅新闻:</label>
      <input type="checkbox" v-model="form.subscribe">
    </div>
    <button type="submit">注册</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: '',
        subscribe: false
      }
    }
  },
  methods: {
    handleSubmit() {
      console.log('提交数据:', this.form)
      // 实际应用中这里会有API调用
    }
  }
}
</script>
</syntaxhighlight>

=== 动态问卷系统 ===
<mermaid>
sequenceDiagram
    participant 用户
    participant 组件
    用户->>组件: 输入文本/选择选项
    组件->>数据: 通过v-model更新
    数据->>组件: 触发响应式更新
    组件->>视图: 重新渲染
</mermaid>

== 常见问题与解决方案 ==
{| class="wikitable"
|-
! 问题 !! 解决方案
|-
| 输入法组合过程中触发更新 | 使用<code>.lazy</code>修饰符或监听<code>compositionstart/end</code>事件
|-
| 数字输入得到字符串 | 添加<code>.number</code>修饰符
|-
| 自定义组件双向绑定不生效 | 确保正确实现<code>modelValue</code>prop和<code>update:modelValue</code>事件
|}

== 最佳实践 ==
* 表单复杂时考虑拆分为多个<code>v-model</code>绑定
* 敏感数据（如密码）避免使用双向绑定
* 大型表单推荐使用Vuex或Pinia管理状态
* 自定义组件实现<code>v-model</code>时保持接口一致性

== 总结 ==
Vue.js的表单输入绑定通过<code>v-model</code>指令提供了简洁高效的双向数据流管理方案，覆盖了从基础文本输入到复杂自定义组件的各种场景。理解其工作原理和修饰符的使用，能够显著提升表单开发效率和数据管理的可靠性。

[[Category:前端框架]]
[[Category:Vue.js]]
[[Category:Vue.js基础]]