详解Vue3中的常见的监听事件click、input和change

本文主要介绍Vue3中的常见的监听事件click、input和change。

目录

• 一、click点击事件
• 二、input输入事件
• 三、change改变事件

一、click点击事件

click事件是最常见的用户交互事件之一。它在元素被点击时触发，可以用于响应按钮点击、图片点击、链接点击等操作。使用@click指令或v-on指令来监听click事件。

下面是一些示例：

1. 在组件模板中监听click事件：

<template>
  <button @click="handleClick">点击按钮</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('按钮被点击了');
    }
  }
}
</script>

这里通过在button元素上使用@click指令来监听click事件，当按钮被点击时，会调用handleClick方法，打印出相应的信息。

2. 在Vue实例的根元素上监听click事件：

<template>
  <div @click="handleClick">
    <p>点击这个div</p>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('div被点击了');
    }
  }
}
</script>

这里通过在div元素上使用@click指令来监听click事件，当div被点击时，会调用handleClick方法，打印出相应的信息。

3. 在循环中动态绑定click事件：

<template>
  <ul>
    <li v-for="(item, index) in list" :key="index" @click="handleItemClick(index)">
      {{ item }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      list: ['选项1', '选项2', '选项3']
    }
  },
  methods: {
    handleItemClick(index) {
      console.log('点击了第', index+1, '项');
    }
  }
}
</script>

这里通过使用v-for指令循环渲染li元素，并在每个li元素上绑定@click指令来监听click事件，当li元素被点击时，会调用handleItemClick方法，并传入相应的索引值，打印出相应的信息。

在Vue3中，click事件可以使用原生事件修饰符，例如.stop停止事件冒泡、.prevent阻止默认行为等，以便更好地控制事件的行为。

二、input输入事件

通过使用v-model指令以及@input事件来处理用户输入。

首先，使用v-model指令将数据绑定到输入框的value属性上，使得数据能够实时反映用户的输入。

例如：

<template>
  <input v-model="message" />
  <p>{{ message }}</p>
</template>

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

在上述代码中，message变量被绑定到了输入框的value属性，这样每当用户输入内容时，message变量都会被更新。

接下来，可以使用@input事件来监听输入框的输入事件。例如：

<template>
  <input v-model="message" @input="handleInput" />
  <p>{{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    handleInput(event) {
      console.log(event.target.value)
    }
  }
}
</script>

在上述代码中，handleInput方法会在每次输入框的值发生变化时被调用，并且可以通过event.target.value获取输入框的当前值。

可以通过这两种方式来实现input输入事件的处理，根据具体的需求选择合适的方式。

三、change改变事件

change事件用于在用户更改表单输入框的值时触发。change事件与input事件的区别在于，change事件在输入框失去焦点后才会触发，而input事件在用户输入时即可触发。

使用v-model指令来绑定表单输入框的值，并通过change事件监听输入值的变化。

以下是一个示例：

<template>
  <div>
    <input type="text" v-model="message" @change="handleChange" />
    <p>输入框的值为：{{ message }}</p>
  </div>
</template>

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

  export default {
    setup() {
      const message = ref('');

      const handleChange = () => {
        console.log('输入框的值发生了改变');
      };

      return {
        message,
        handleChange,
      };
    },
  };
</script>

在上面的示例中，通过v-model指令将message变量与输入框的值进行了双向绑定。在输入框的值发生改变时，change事件会触发handleChange方法，从而打印出一条消息。

需要注意的是，在Vue 3中，由于setup函数的存在，我们需要使用ref函数来创建响应式的变量。这样才能保证当message的值发生改变时，视图会自动更新。

这些是Vue3中比较常见的监听事件，通过在相应的元素上绑定事件监听器，可以在事件触发时执行相应的操作。