جلسه ۱۳-مقدمه ای بر رویدادها در ویو جی اس

ما در آمورش های قبلیمون در ویو جی اس از رویداد ها استفاده کردیم و در این آموزش می خوایم به ویژه روی خود رویداد در ویو جی اس صحبت کنیم

ویو جی اس به ما این امکان رو میدهد که با DOM توسط دایرکتیو  v-on تعامل داشته باشیم .

به طور مثال کد زیر را در نظر بگیرید.

<template>
  <a>Click me!</a>
</template>

اگه ما بخوایم بعد از رویداد کلیک روی تگ لینک چیزی اتفاق بی افته  نیاز است که دایرکتیو  v-on  رو اضافه کنیم .

<template>
  <a v-on:click="handleClick">Click me!</a>
</template>

ویو به ما یک سینتکس جایگزین مناسب دیگه برای این کار میده بهه صورت زیر

<template>
  <a @click="handleClick">Click me!</a>
</template>

همچنیین شما می توانید از پرانتز استفاده کنید یا خیر

@click="handleClick" مساوی است با @click="handleClick()" handleClick یک متد است که به کامپوننتمون اضافه میشه
<script>
export default {
  methods: {
    handleClick: function(event) {
      console.log(event)
    }
  }
}
</script>

چیز دیگه که باید بگم اینه که شما میتونید پارامتر های مربوط به رویداد رو انتقال بدید

@click="handleClick(param)" و اونا رو دریافت کنید در متد که براش تو کامپوننت تعریف کردید دستیابی به شی رویداد در بیشتر رویداد ها شما میخواید عملی رو شی رویداد انجام بدید یا مقادیری از اون داشته باشید . چگونه به این قضیه دست پیدا کنیم ؟ به وسیله یک directive مخصوص $event
<template>
  <a @click="handleClick($event)">Click me!</a>
</template>
<script>
export default {
  methods: {
    handleClick: function(event) {
      console.log(event)
    }
  }
}
</script>

و همراه پارامتری میخوایم این کارو بکنیم به صورت زیر عمل میکنیم

<template>
  <a @click="handleClick('something', $event)">Click me!</a>
</template>
<script>
export default {
  methods: {
    handleClick: function(text, event) {
      console.log(text)
      console.log(event)
    }
  }
}
</script>
شما میتونید بر روی توسط فانکشن های جاوا  اسکریپت event.preventDefault() رو صدا بزنید ولی بهتر است که از مودیفایر های ویو استفاده کنید
  • @click.prevent فراخوانی میکند event.preventDefault()
  • @click.stop فراخوانی میکند event.stopPropagation()
  • @click.capture
  • مطمئن میشه که رویداد فقط برای خود المان باشه از سوی فرزندش نباش   @click.self
  • فقط یک مرتبه رویداد رو در یافت میکنه @click.once
  • @click.passive

موفق باشید با همراه باشید

local_offerevent_note تیر ۲۱, ۱۳۹۷

account_box ali kaviani


local_offer

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *