مدیریت رویدادها در Vue
مدیریت رویدادها در 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>