رویدادها (Events)
اینجا درباره «رویدادها در Vue» حرف می زنیم. رویداد (Event) یعنی اتفاقی مثل کلیک یا تایپ. با دایرکتیو v-on می گوییم وقتی رویداد رخ داد، چه کاری انجام شود.
شروع کار با رویدادها در Vue
دکمه را کلیک می کنیم تا شمارنده زیاد شود. داده (Data) یعنی متغیرهای برنامه.
<div id="app">
<img src="img_moose.jpg">
<p>{{ "Moose count: " + count }}</p>
<button v-on:click="count++">Count moose</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
count: 0;
};
}
});
app.mount('#app');
<\/script>
نکته: مقدار داخل <p> با تغییر count خودکار به روز می شود. این یعنی واکنش گرا بودن.
رویدادهای رایج
رویدادهای پرکاربرد: click، mouseover، mouseout، keydown و input. هرکدام محرکی برای اجرای کد هستند.
دایرکتیو v-on چیست؟
v-on به مرورگر می گوید به کدام رویداد گوش دهد و سپس چه کاری انجام دهد. بنابراین صفحه به رفتار کاربر پاسخ می دهد.
متدها (Methods) در رویدادها
برای کدهای پیچیده تر، نام متد را صدا بزن. متد یعنی تابع داخل Vue.
<p v-on:click="changeColor">Click me</p>
مدیفایرهای رویداد
مدیفایر (Modifier) یعنی توضیح اضافه برای رویداد. مثلاً رویداد فقط یک بار اجرا شود، یا ارسال فرم متوقف شود.
گام های عملی
- دکمه بساز و رویداد
clickبده. - یک متغیر در
dataبگذار. - با
v-onعدد را تغییر بده و خروجی را ببین.
جمع بندی سریع
v-onبرای مدیریت رویدادها است.- متدها منطق رویداد را تمیز نگه می دهند.
- مدیفایرها رفتار رویداد را دقیق تر می کنند.
- خروجی با تغییر داده، خودکار به روز می شود.
مسیر بعدی: رندر لیست با v-for و جزئیات v-on برای کنترل کامل رویدادها.