Vue.js ایک بہت ہی طاقتور ، سیکھنے میں آسان اور قابل رسائی لائبریری ہے جسے HTML ، CSS اور جاوا اسکرپٹ کے علم سے ہم اس میں ویب ایپلیکیشن بنانا شروع کر سکتے ہیں۔ Vue.js پہلے سے موجود Angular اور React Frameworks کی بہترین خصوصیات کو یکجا کرکے بنایا گیا ہے۔ یہ ایک ترقی پسند اور ری ایکٹیو جاوا اسکرپٹ فریم ورک ہے جو کہ UIs (یوزر انٹرفیس) اور SPAs (سنگل پیج ایپلی کیشنز) کی تعمیر کے لیے استعمال ہوتا ہے ، یہی وجہ ہے کہ ڈویلپرز کوڈ کرنا پسند کرتے ہیں اور Vue.js میں ایپلی کیشنز تیار کرتے ہوئے آزادی اور راحت محسوس کرتے ہیں۔ Vue.js میں ایونٹ سننے اور سنبھالنے پر ایک نظر ڈالیں ، ہم جان لیں گے کہ یہ ایونٹس سننے اور سنبھالنے کے لیے وی آن ہدایت دیتا ہے۔ ہم V-on ہدایت کو DOM کو سننے اور مطلوبہ کاموں کو انجام دینے کے لیے استعمال کر سکتے ہیں۔ یہ بہت سے ایونٹ ہینڈلرز بھی مہیا کرتا ہے۔ تاہم ، اس آرٹیکل میں ، ہم صرف سیکھیں گے اور کلک فوکس پر اپنی توجہ رکھیں گے۔ تو ، آئیے شروع کریں!
جاوا اسکرپٹ کے آن کلیک ایونٹ کی طرح ، Vue.js وی آن فراہم کرتا ہے: ایونٹس سننے کے لیے کلک کریں۔
v-on: click ایونٹ کے لیے نحو اس طرح ہوگا:
< بٹن v-on: کلک کریں۔='فنکشن نام'>کلک کریں۔</ بٹن >
Vue.js شارٹ ہینڈ فراہم کرتا ہے @ بجائے v-on استعمال کرنے کے۔
< بٹن lick کلک کریں='فنکشن نام'> کلک کریں۔</ بٹن >
Vue.js صرف کلک ایونٹ سننے اور فنکشن کو کال کرنے میں نہیں رکتا۔ یہ ہمیں اجازت دے گا کہ کوئی بھی ریاضی آپریشن یا جاوا اسکرپٹ سے متعلق کوئی بھی چیز کوٹیشن مارکس کے اندر براہ راست لکھے۔ اس طرح:
< بٹن lick کلک کریں='نمبر += 1'> شامل کریں</ بٹن >
Vue.js ہمیں ان لائن جاوا اسکرپٹ بیان میں طریقہ کار یا فنکشن کو کال کرنے کی سہولت فراہم کرتا ہے ، جیسا کہ ذیل میں دکھایا گیا ہے۔
< بٹن lick کلک کریں='پیغام (' ہیلو ')'> دکھائیں</ بٹن >Vue.js کے ایونٹ ہینڈلرز کا استعمال کرتے ہوئے ، ہم Vue.js کے خاص طور پر فراہم کردہ $ event متغیر کو طریقہ کار کی دلیل میں پاس کر کے ، ان لائن اسٹیٹمنٹ کا استعمال کرتے ہوئے ، DOM ایونٹ تک بھی رسائی حاصل کر سکتے ہیں ، جیسے نیچے دی گئی مثال:
< بٹن lick کلک کریں='پیغام (' ہیلو '، $ ایونٹ)'> بھیجیں۔</ بٹن >
Vue.js ہمیں ایک سے زیادہ افعال یا طریقوں پر کال کرنے کی سہولت بھی فراہم کرتا ہے۔ ہم ایک سے زیادہ فنکشن کو کال کر سکتے ہیں اور ان کو کوما کے ذریعے الگ کر سکتے ہیں ، جیسے اس مثال:
< بٹن lick کلک کریں='پہلا (' ہیلو ') ، دوسرا (' ہیلو '، $ ایونٹ)'> جمع کروائیں۔</ بٹن >Vue.js ایونٹ موڈیفائر بھی فراہم کرتا ہے۔
ایونٹ میں ترمیم کرنے والے۔
ہمیں اکثر ایونٹس کے ساتھ موڈیفائرز کو کال کرنے کی ضرورت ہوتی ہے۔ لہذا ، Vue.js مندرجہ ذیل میں سے کچھ ترمیم کار فراہم کرتا ہے:
سٹاپ
یہ کلک ایونٹ کی ترسیل کو روک دے گا۔
< کو @click.stop='یہ کرو'></ کو >روکنا
یہ صفحہ کو دوبارہ لوڈ یا ری ڈائریکٹ کرنے سے روک دے گا۔
< فارم @submit.prevent='جمع کروائیں'></ فارم >ایک بار
یہ صرف ایک بار کلک ایونٹ کو متحرک کرے گا۔
< کو @کلک کریں۔='یہ کرو'></ کو >.قبضہ
یہ زیادہ تر ایونٹ سننے والے کو شامل کرنے کے لیے استعمال ہوتا ہے۔
< div @کلک کیپچر۔='یہ کرو'> ...</ div >ہم ترمیم کاروں کو بھی زنجیر بنا سکتے ہیں۔ تاہم ، اس بات کو ذہن میں رکھیں کہ ترمیم کرنے والوں کا حکم اہمیت رکھتا ہے ، اور یہ نتائج کو متاثر کرے گا۔
< کو @click.stop.prevent='وہ کرو'></ کو >نتیجہ
اس آرٹیکل میں ، ہم نے نوب سے ننجا لیول تک کلیک ایونٹ کو سنبھالنے کے پورے تصورات کا احاطہ کیا ہے۔ ہم نے کلک ایونٹس لکھنے کے مختلف نحو اور استعمال کرنے کے مختلف طریقوں کے بارے میں سیکھا ہے۔ _+_ | ڈویلپرز اور مختلف ایونٹ میں ترمیم کرنے والوں کی آسانی کے لیے Vue.js کے ذریعہ فراہم کردہ ہدایت۔ اس طرح کے مزید مفید مواد کے لیے ، Vue.js سے متعلق ، linuxhint.com پر آتے رہیں۔