v-on (@) توجيه الاستماع للأحداث
آخر تحديث: 2026-10-22
v-on (@) توجيه الاستماع للأحداث
يربط v-on مستمع أحداث، وصيغته المختصرة @. وتُخصِّص المعدِّلات مثل .stop و.prevent و.once السلوك.
| المجموعة | التوجيهات |
|---|---|
| النوع | توجيه |
| النطاق | القالب |
| إصدار Vue | 3.0+ |
| دعم SSR | مدعوم |
📝 الصيغة
<button v-on:click="count++">+1</button>
<button @click="greet">Greet</button>
<form @submit.prevent="onSubmit">⚙️ الوسائط
| expression | اسم الحدث مع معالِج أو عبارة مباشرة؛ ومعدِّلات مثل .stop و.prevent و.once و.self |
|---|
القيمة المُرجعة：توجيه، بلا قيمة مُعادة
▶ مثال
عدّل الشيفرة أدناه وشاهد النتيجة مباشرة:
المخرجات：
Shows 'Clicked 0 times'; each click increments the counter.💡 نقاط مهمة
💡 نصيحة @ اختصار لـ v-on: — وتستخدم الشيفرة اليومية @click.
ℹ️ ملاحظة أشهر المعدِّلات: .stop و.prevent و.once و.self.
⚠️ تحذير مرِّر اسم الدالة دون أقواس (@click="greet")؛ وأضف الأقواس فقط لتمرير وسائط.
🏷️ التوجيهات ذات صلة
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س ما الفرق بين @click="fn" و@click="fn()"؟
ج الأولى تمرِّر كائن الحدث تلقائيًا؛ أما الأقواس فلتمرير وسائط مخصصة.
س هل يمكن تسلسل المعدِّلات؟
ج نعم، مثل @click.stop.prevent — وتُطبَّق من اليسار إلى اليمين.
س كيف أستمع لأحداث لوحة المفاتيح؟
ج استخدم معدِّلات المفاتيح مثل @keyup.enter أو @keydown.esc.
