vue表单，生命周期表单使用 v-model 进行双向绑定在 input元素上，使用v-model指令将输入框的值

表单

使用 v-model 进行双向绑定

 <template>
 <div>
 <input type="text" v-model="textValue" />
 <p>输入的值: {{ textValue }}</p >
  </div>
 </template>

 <script>
 export default {
  data() {
    return {
      textValue: ""
    };
  }
 };
 </script>

在 input元素上，使用v-model指令将输入框的值与textValue数据属性进行双向绑定。这意味着当输入框的值改变时，textValue也会自动更新；反过来，当textValue的值改变时，输入框的值也会自动更新。在p元素中，显示了当前输入的值，通过插值表达式{{ textValue }}将textValue的值输出到页面上。
可以绑定单，多行文本输入框复选框单选按钮选择框等等
在Vue中，我们可以将选择框的选项存储在一个数组中，并通过v-for指令来渲染选项列表。

  <div id="app">
  <label for="fruit">选择你喜欢的水果：</label>
  <select id="fruit" v-model="selectedFruit">
    <option v-for="fruit in fruits" :value="fruit">{{ fruit }}</option>
  </select>
  <p>你选择的水果是：{{ selectedFruit }}</p >
</div>

生命周期

Vue的生命周期是组件或实例从创建到销毁的一系列过程，包括初始化数据、编译模板、挂载DOM、更新、渲染、卸载等。在这个过程中，Vue提供了一系列的生命周期钩子函数来在这些特定的时间点执行特定的操作。

Vue 3 由于引入了组合式API，生命周期钩子函数的使用方式有所变化。下面是Vue 3中常见的生命周期钩子函数及其对应的组合式API：

beforeCreate（已被移除） => 在组件实例初始化之前调用。对应的组合式API：在 <script setup> 中直接编写初始化逻辑。
created（已被移除） => 在组件实例创建完成后调用。对应的组合式API：在 setup() 函数中编写初始化逻辑。
beforeMount（被取代） => 在组件挂载到DOM之前调用。对应的组合式API：可以在 onBeforeMount 钩子函数中进行操作。
mounted（被取代） => 在组件挂载到DOM后调用。对应的组合式API：可以在 onMounted 钩子函数中进行操作。
beforeUpdate（被取代） => 在组件更新之前调用。对应的组合式API：可以在 onBeforeUpdate 钩子函数中进行操作。
updated（被取代） => 在组件更新之后调用。对应的组合式API：可以在 onUpdated 钩子函数中进行操作。
beforeDestroy（被取代） => 在组件卸载之前调用。对应的组合式API：可以在 onBeforeUnmount 钩子函数中进行操作。
destroyed（被取代） => 在组件卸载之后调用。对应的组合式API：可以在 onUnmounted 钩子函数中进行操作。

需要注意的是，Vue 3中已经移除了一些生命周期钩子函数（如beforeCreate和created，beforeDestroy和destroyed），并且将它们替换为 onBeforeUnmount 和 onUnmounted。记住创建前后被setup取代，其他的前面加上了on。

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  props: ['initialCount'],
  setup(props) {
    // 创建一个响应式的计数器
    const count = ref(props.initialCount || 0);

    // 定义一个增加计数的方法
    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment
    };
  }
};
</script>

在上面的示例中，通过"setup"函数创建了一个响应式的计数器变量count，并定义了一个增加计数的方法increment。然后，将这些值返回给模板中使用。
需要注意的是，在"setup"函数中返回的变量和方法会暴露给模板，因此可以在模板中直接使用。

vue表单 ，生命周期

表单

生命周期

vue表单，生命周期