一个项目学习Vue3---事件处理

news2025/2/25 3:02:47

学习下面代码，了解Vue3的事件处理

<!--条件和列表渲染-->
<template>
    <el-button v-on:click="countAdd" type="primary">count={{ count }}</el-button>
    <el-button @click="countAdd" type="primary">count={{ count }}</el-button>
    <el-button @click="speak('你好！')" type="primary">说你好！</el-button>
    <el-button @click="eventClick('李四',$.event)" type="primary">获取事件，更改下面div的值</el-button>
    <div id="changeName">张三</div>

</template>
<script lang="ts" setup>
import { computed, nextTick } from 'vue'
import { ref } from 'vue'
import { reactive } from 'vue'
import { ElMessage } from 'element-plus'
import $ from 'jquery'
const count = ref(0);
  
function countAdd(){
   count.value += 1
}

function speak(context){
    ElMessage.success(context)
}

function eventClick(message,event){
    ElMessage.success(message)
    if (event) {
        event.preventDefault()
    }
    $("#changeName").text(message)
}
</script>
<style scoped>
</style>

在Vue 3中，事件处理是构建交互式Web应用程序中至关重要的部分。Vue 3提供了多种方式来处理事件，从简单的点击事件到复杂的自定义事件处理逻辑，都可以通过Vue的语法和特性来实现。本文将深入探讨Vue 3中事件处理的基础知识和实际应用。

基本的点击事件处理

在Vue 3中，可以通过@click或v-on:click来绑定点击事件处理函数。例如：

<template>
    <el-button @click="countAdd" type="primary">count={{ count }}</el-button>
</template>
<script setup lang="ts">
import { ref } from 'vue'

const count = ref(0);

function countAdd() {
    count.value += 1;
}
</script>

上述代码中，@click="countAdd"绑定了一个点击事件处理函数countAdd，每次点击按钮时，count的值会自增并更新视图。

参数传递与事件修饰符

Vue 3支持向事件处理函数传递参数以及使用事件修饰符来更灵活地控制事件行为。例如：

<template>
    <el-button @click="speak('你好！')" type="primary">说你好！</el-button>
</template>
<script setup lang="ts">
import { ElMessage } from 'element-plus'

function speak(context: string) {
    ElMessage.success(context);
}
</script>

在上述示例中，点击按钮后将调用speak函数，并显示一个成功消息框，内容为"你好！"。

访问原生事件对象

有时需要访问原生事件对象，例如阻止默认行为或获取更多事件信息。Vue 3可以通过特定语法实现这一点：

<template>
    <el-button @click="eventClick('李四', $event)" type="primary">获取事件，更改下面div的值</el-button>
    <div id="changeName">张三</div>
</template>
<script setup lang="ts">
import { ElMessage } from 'element-plus'
import $ from 'jquery'

function eventClick(message: string, event: MouseEvent) {
    ElMessage.success(message);
    event.preventDefault(); // 阻止默认事件
    $("#changeName").text(message); // 更改DOM元素内容
}
</script>

在这个例子中，通过$event传递事件对象，可以在事件处理函数中访问到原生的事件对象，并进行相应的操作，如阻止默认事件和修改DOM元素内容。