vue表单事件

Vue中有很多表单事件可以用来监听表单元素上的交互事件，常见的表单事件包括：

1. input：监听输入框输入的事件，包括键盘输入和复制粘贴操作；

2. change：监听表单元素的值改变的事件，例如下拉框、单选框或复选框的选择；

3. submit：监听表单提交时的事件；

4. blur：在一个元素失去焦点时触发该事件，例如离开输入框；

5. focus：在一个元素获得焦点时触发该事件，例如标签被点击或通过Tab键移动到元素上。

与这些事件相对应，Vue也提供了对应的事件处理函数，你可以在Vue组件中使用这些事件的处理函数来响应用户的操作。下面是一些示例：

<template>
  <div>
    <input v-model="message" @input="inputHandler" type="text">
    <span>输入内容: {{ message }}</span>

    <select v-model="selected" @change="changeHandler">
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
    </select>
    <span>选择的内容: {{ selected }}</span>

    <form @submit.prevent="submitHandler">
      <input type="text">
      <button type="submit">提交</button>
    </form>

    <input type="text" @blur="blurHandler">
    <input type="text" @focus="focusHandler">
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
      selected: ''
    }
  },
  methods: {
    inputHandler: function(event) {
      console.log(event.target.value); //input值发生改变执行
    },
    changeHandler: function(event) {
      console.log(event.target.value);
    },
    submitHandler: function() {
      console.log('提交表单');
    },
    blurHandler: function() {
      console.log('失去焦点');
    },
    focusHandler: function() {
      console.log('获得焦点');
    }
  }
}
</script>