مدیریت رویدادها در Vue.js یکی از مهم‌ترین بخش‌های این فریمورک است که به شما امکان می‌دهد تعاملات کاربر را کنترل کنید. Vue برای مدیریت رویدادها از ویژگی v-on (یا به‌صورت کوتاه‌شده @) استفاده می‌کند.
1. افزودن یک رویداد ساده
می‌توان یک رویداد کلیک را به یک متد متصل کرد:
<template>
<button @click="sayHello">کلیک کن</button>
</template>
<script>
export default {
methods: {
sayHello() {
alert("سلام!");
}
}
}
</script>
<button @click="sayHello">کلیک کن</button>
</template>
<script>
export default {
methods: {
sayHello() {
alert("سلام!");
}
}
}
</script>
2. ارسال پارامتر به متد
اگر بخواهید مقداری را هنگام کلیک ارسال کنید، می‌توانید آن را داخل تابع قرار دهید:
<template>
<button @click="sayMessage('سلام کاربر!')">کلیک کن</button>
</template>
<script>
export default {
methods: {
sayMessage(msg) {
alert(msg);
}
}
}
</script>
<button @click="sayMessage('سلام کاربر!')">کلیک کن</button>
</template>
<script>
export default {
methods: {
sayMessage(msg) {
alert(msg);
}
}
}
</script>
3. استفاده از event$
اگر بخواهید رویداد را به متد ارسال کنید، از event$ استفاده کنید:
<template>
<input type="text" @keyup.enter="handleKeyPress($event)">
</template>
<script>
export default {
methods: {
handleKeyPress(event) {
alert(`شما دکمه ${event.key} را فشار دادید!`);
}
}
}
</script>
<input type="text" @keyup.enter="handleKeyPress($event)">
</template>
<script>
export default {
methods: {
handleKeyPress(event) {
alert(`شما دکمه ${event.key} را فشار دادید!`);
}
}
}
</script>
4. مدیریت رویداد با اصلاح‌کننده‌ها (Modifiers)
Vue دارای اصلاح‌کننده‌هایی است که مدیریت رویداد را آسان‌تر می‌کنند:
-
prevent > جلوگیری از رفتار پیش‌فرض
-
stop > جلوگیری از انتشار رویداد
-
capture > فعال شدن قبل از عناصر داخلی
-
once > فقط یک بار اجرا شدن متد
-
self > فقط اگر رویداد روی خود عنصر باشد
مثال:
<template>
<form @submit.prevent="submitForm">
<button type="submit">ارسال</button>
</form>
</template>
<script>
export default {
methods: {
submitForm() {
alert("فرم ارسال شد!");
}
}
}
</script>
<form @submit.prevent="submitForm">
<button type="submit">ارسال</button>
</form>
</template>
<script>
export default {
methods: {
submitForm() {
alert("فرم ارسال شد!");
}
}
}
</script>
5. مدیریت چندین رویداد
می‌توان چند رویداد را برای یک عنصر تعیین کرد:
<template>
<button @mouseover="hoverEvent" @click="clickEvent">تعامل کن</button>
</template>
<script>
export default {
methods: {
hoverEvent() {
console.log("ماوس روی دکمه رفت!");
},
clickEvent() {
console.log("دکمه کلیک شد!");
}
}
}
</script>
<button @mouseover="hoverEvent" @click="clickEvent">تعامل کن</button>
</template>
<script>
export default {
methods: {
hoverEvent() {
console.log("ماوس روی دکمه رفت!");
},
clickEvent() {
console.log("دکمه کلیک شد!");
}
}
}
</script>
