Vue 生命周期
Vue 组件 

Vue 表单

Vue.js 是一个流行的前端 JavaScript 框架，用于构建用户界面。Vue.js 提供了对表单输入的双向数据绑定，使得在 Vue 应用中处理表单变得非常简洁和直观。

基础用法

使用 v-model 指令创建数据双向绑定。它会根据输入类型自动选取正确的方式更新数据。

<input v-model="message" placeholder="Enter message">

在Vue实例中：

new Vue({
  el: '#app',
  data: {
    message: ''
  }
});


不同类型的输入

v-model 可以用于不同类型的 <input>，如 text, password, checkbox, radio 等。

<!-- 文本输入 -->
<input v-model="username" type="text">
<!-- 复选框 -->
<input v-model="checked" type="checkbox">
<!-- 单选按钮 -->
<input v-model="picked" type="radio" value="One">


修饰符

v-model 可以与修饰符一起使用，例如 .lazy, .number, 和 .trim。

<!-- 在"change"事件之后更新而不是"input" -->
<input v-model.lazy="msg" >
<!-- 自动将用户的输入转换为数值 -->
<input v-model.number="age" type="number">
<!-- 自动过滤用户输入，删除首尾空白 -->
<input v-model.trim="msg">


组件事件

使用 v-on 或 @ 来监听表单元素的事件，如 input, change 等。

<input v-on:input="onInput" type="text">
<input v-on:change="handleChange" type="text" v-model="message">


表单控件数组

当 v-model 与 v-for 结合使用时，可以创建动态表单控件数组。

<form v-for="(item, index) in items" :key="index">
  <input v-model="items[index]">
</form>


表单提交

使用 v-on:submit 或 @submit 来处理表单提交事件，并阻止默认的表单提交行为。

<form @submit.prevent="onSubmit">
  <!-- form 元素 -->
</form>


表单验证

Vue 提供了简单的表单验证功能，通过使用 prop 属性和 required, type 等 HTML5 验证属性。

<input v-model="username" type="text" required>


计算属性和侦听器

使用计算属性和侦听器来响应数据的变化，实现复杂的表单逻辑。

computed: {
  isFormValid() {
    return this.username.trim().length > 0;
  }
}


自定义组件

通过创建自定义表单控件组件，可以扩展 v-model 的功能。

// 在自定义组件中

model: {
  prop: 'value',
  event: 'change'
},
props: ['value'],
methods: {
  updateValue(event) {
    this.$emit('change', event.target.value);
  }
}


完整示例

<!DOCTYPE html>
<html>
<head>
  <title>Vue 表单示例</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <h2></h2>
  <form @submit.prevent="submitForm">
    <div>
      <label for="name">登录账号:</label>
      <input type="text" id="name" v-model="formData.name" required>
    </div>
    
    <div>
      <label for="email">邮箱地址:</label>
      <input type="email" id="email" v-model="formData.email" required>
    </div>
    
    <div>
      <label for="hobby">个人爱好:</label>
      <textarea id="hobby" v-model="formData.hobby" rows="4" cols="30" required></textarea>
    </div>
    
    <button type="submit">提交</button>
  </form>
  
  <div v-if="submitted">
    <h3>提交成功!</h3>
    <p>登录账号: {{ formData.name }}</p>
    <p>邮箱地址: {{ formData.email }}</p>
    <p>个人爱好: {{ formData.hobby }}</p>
  </div>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    formData: {
      name: '',
      email: '',
      hobby: ''
    },
    submitted: false
  },
  methods: {
    submitForm() {
      // 在真实应用中，这里可以发送表单数据到后端或者执行其他提交逻辑
      console.log('Form submitted with:', this.formData);
      // 提交成功后，设置 submitted 为 true，显示提交成功的信息
      this.submitted = true;
    }
  }
});
</script>
</body>
</html>


Vue 的表单处理功能使得开发者能够轻松创建用户友好和响应式的表单，同时保持数据的同步和验证逻辑的清晰。