آموزش Event Handling و v-on در Vue.js | مدیریت رویدادها با مثال کاربردی

کار با رویدادها در Vue.js یکی از مهم‌ترین بخش‌های تعاملات کاربر با برنامه است. Vue.js برای مدیریت رویدادها از دستور v-on استفاده می‌کند که این دستور به شما اجازه می‌دهد به رویدادهای مختلفی مانند کلیک، تغییر، فشردن کلید و موارد دیگر پاسخ دهید. در این مقاله، به بررسی نحوه استفاده از v-on و انواع مختلفی از کار با رویدادها در Vue.js می‌پردازیم.

استفاده از v-on برای رویدادها

برای افزودن یک رویداد به یک عنصر HTML در Vue.js، از دستور v-on استفاده می‌شود. v-on به عنوان دستورالعمل (Directive) عمل می‌کند و به Vue.js اجازه می‌دهد تا رویدادهای مختلف را شنود کند و واکنش‌های مورد نظر را اعمال کند.

مثال: رویداد کلیک ساده

< div id="app" >
  < button v-on:click=" showMessage " > Click Me < / button >
< / div >

  new Vue ( {
    el : ' #app ' ,
    data ( ) {
      return {
        message : ' Hello Vue! '
      } ;
    } ,
    methods : {
      showMessage ( ) {
        alert ( this.message ) ;
      }
    }
  } ) ;

در این مثال:

• با کلیک بر روی دکمه، متد showMessage اجرا می‌شود که پیام ذخیره شده در data را نمایش می‌دهد.

• v-on:click رویداد کلیک را به متد showMessage متصل می‌کند.

مخفف v-on به @

در Vue.js می‌توان از علامت @ به جای v-on استفاده کرد تا کد کوتاه‌تر و خواناتر شود.

همان مثال قبل با استفاده از @:

< button @click=" showMessage " > Click Me < / button >

این روش مخفف به کار شما سرعت و سادگی بیشتری می‌بخشد و در کدهای Vue.js به‌طور گسترده‌ای استفاده می‌شود.

ارسال پارامتر به متدها

گاهی نیاز دارید پارامترهایی را به متدهای خود ارسال کنید. برای این کار می‌توانید از تابع arrow function استفاده کنید.

مثال: ارسال پارامتر به متد

< div id=" app " >
  < button @click=" showMessage ( ' Hello! ' ) " > Click Me < / button >
< / div >

  new Vue ( {
    el : ' #app ' ,
    methods : {
      showMessage ( msg ) {
        alert ( msg ) ;
      }
    }
  } ) ;

در این مثال، مقدار 'Hello!' به عنوان پارامتر به متد showMessage ارسال می‌شود.

رویدادهای پیش‌فرض مرورگر و اصلاح‌کننده‌ها (Modifiers)

Vue.js از اصلاح‌کننده‌ها برای جلوگیری از رفتارهای پیش‌فرض و اصلاح عملکرد رویدادها پشتیبانی می‌کند. برای مثال، برای جلوگیری از ارسال فرم با submit می‌توان از .prevent استفاده کرد.

مثال: جلوگیری از ارسال فرم

< form @submit.prevent= " handleSubmit " >
  < input type="text" v-model="name" >
  < button type="submit" > Submit < / button >
< / form >

  new Vue ( {
    el : ' #app ' ,
    data ( ) {
      return {
        name : ' '
      } ;
    } ,
    methods : {
      handleSubmit ( ) {
        alert ( ' Form submitted! ' ) ;
      }
    }
  } ) ;

در این مثال، .prevent از ارسال فرم به صورت پیش‌فرض جلوگیری می‌کند.

اصلاح‌کننده‌های رایج در Vue.js

مثال: استفاده از .stop

< div id = " app " @click = " parentClick " >
  < button @click.stop = " childClick " > Click Me < / button >
< / div >

  new Vue ( {
    el : ' #app ' ,
    methods : {
      parentClick ( ) {
        alert ( ' Parent clicked! ' ) ;
      } ,
      childClick ( ) {
        alert ( ' Button clicked! ' ) ;
      }
    }
  } ) ;

در این مثال، با کلیک بر روی دکمه، تنها childClick اجرا می‌شود و رویداد به parentClick نمی‌رسد.

مدیریت رویدادهای کیبورد

Vue.js به شما اجازه می‌دهد رویدادهای کیبورد را با کمک v-on و اصلاح‌کننده‌های خاصی مانند .enter، .esc و سایر کلیدها مدیریت کنید.

مثال: استفاده از کلید Enter

< input @keyup.enter = " submitInput " v-model = " inputValue " >

  new Vue ( {
    el : ' #app ' ,
    data ( ) {
      return {
        inputValue : ' '
      } ;
    } ,
    methods : {
      submitInput ( ) {
        alert ( ` Input Submitted: ${this.inputValue} ` ) ;
      }
    }
  } ) ;

در این مثال، زمانی که کاربر کلید Enter را فشار می‌دهد، متد submitInput اجرا می‌شود.

استفاده از Event Modifiers به عنوان شرط در رویدادها

Vue.js به شما اجازه می‌دهد از چندین اصلاح‌کننده در یک رویداد استفاده کنید. به این صورت می‌توانید به رویدادها شرایطی اضافه کنید تا تنها در موارد خاص اجرا شوند.

مثال: استفاده از چندین اصلاح‌کننده در یک رویداد

< button @click.ctrl.shift = " specialAction " > Special Action < / button >

  new Vue ( {
    el : ' #app ' ,
    methods : {
      specialAction ( ) {
        alert ( ' Ctrl + Shift + Click triggered! ' ) ;
      }
    }
  } ) ;

در این مثال، متد specialAction فقط زمانی اجرا می‌شود که کاربر همزمان با فشار دادن کلیدهای Ctrl و Shift، دکمه را کلیک کند.

نتیجه‌گیری

استفاده از v-on و مدیریت رویدادها در Vue.js به شما کمک می‌کند تعاملات متنوع و انعطاف‌پذیری را با کاربران پیاده‌سازی کنید. v-on همراه با اصلاح‌کننده‌ها و شرایط مختلف، امکان کنترل دقیق رویدادها و عملکردهای مورد نظر را فراهم می‌آورد.