Vue.js একটি খুব শক্তিশালী, শিখতে সহজ এবং সহজলভ্য লাইব্রেরি যা HTML, CSS এবং জাভাস্ক্রিপ্টের জ্ঞানের সাহায্যে আমরা এতে ওয়েব অ্যাপ্লিকেশন নির্মাণ শুরু করতে পারি। Vue.js ইতিমধ্যেই বিদ্যমান কৌণিক এবং প্রতিক্রিয়া ফ্রেমওয়ার্ক থেকে সেরা বৈশিষ্ট্যগুলির সমন্বয়ে নির্মিত হয়েছে। এটি একটি প্রগতিশীল এবং প্রতিক্রিয়াশীল জাভাস্ক্রিপ্ট কাঠামো যা ইউআই (ইউজার ইন্টারফেস) এবং এসপিএ (একক পৃষ্ঠার অ্যাপ্লিকেশন) তৈরিতে ব্যবহৃত হয়, যার কারণে ডেভেলপাররা Vue.js- এ অ্যাপ্লিকেশনগুলি বিকাশের সময় কোড এবং স্বাধীনতা এবং স্বাচ্ছন্দ্য অনুভব করতে পছন্দ করে। Vue.js- এ ইভেন্ট লিসেনিং এবং হ্যান্ডলিংয়ের দিকে নজর দিন, আমরা জানব যে এটি ইভেন্টগুলি শোনার এবং পরিচালনা করার জন্য একটি v-on নির্দেশিকা প্রদান করে। আমরা DOM শুনতে এবং প্রয়োজনীয় কাজ সম্পাদন করতে v-on নির্দেশিকা ব্যবহার করতে পারি। এটি অনেক ইভেন্ট হ্যান্ডলার সরবরাহ করে। যাইহোক, এই নিবন্ধে, আমরা কেবল শিখব এবং ক্লিক ইভেন্টগুলিতে আমাদের ফোকাস রাখব। চল শুরু করা যাক!
জাভাস্ক্রিপ্টের অনক্লিক ইভেন্টের মতোই, Vue.js v-on প্রদান করে: ইভেন্ট শোনার জন্য ক্লিক করুন।
V-on: click ইভেন্টের জন্য সিনট্যাক্স এই রকম হবে:
< বোতাম v-on: ক্লিক করুন='ফাংশন নাম'>ক্লিক</ বোতাম >
Vue.js একটি শর্টহ্যান্ড প্রদান করে @ পরিবর্তে v-on ব্যবহার করার পরিবর্তে।
< বোতাম @ক্লিক='ফাংশন নাম'> ক্লিক করুন</ বোতাম >
Vue.js শুধু ক্লিক ইভেন্ট শোনা এবং ফাংশন কল করাতে থেমে থাকে না। এটি আমাদের সরাসরি কোন গাণিতিক অপারেশন বা জাভাস্ক্রিপ্ট সম্পর্কিত কিছু উদ্ধৃতি চিহ্নের ভিতরে লিখতে অনুমতি দেবে। ঠিক এই রকম:
< বোতাম @ক্লিক='সংখ্যা += 1'> যোগ করুন</ বোতাম >
Vue.js আমাদের একটি ইনলাইন জাভাস্ক্রিপ্ট স্টেটমেন্টে পদ্ধতি বা ফাংশন কল করার জন্য প্রদান করে, যেমনটি নীচে দেখানো হয়েছে:
< বোতাম @ক্লিক='বার্তা (' হাই ')'> দেখান</ বোতাম >Vue.js এর ইভেন্ট হ্যান্ডলারগুলি ব্যবহার করে, আমরা ইনলাইন স্টেটমেন্ট ব্যবহার করে, Vue.js- এর বিশেষভাবে প্রদত্ত $ event ভেরিয়েবলকে পদ্ধতির যুক্তিতে পাস করে, যেমন নীচের উদাহরণের মতো, DOM ইভেন্টটিও অ্যাক্সেস করতে পারি:
< বোতাম @ক্লিক='বার্তা (' হাই ', $ ইভেন্ট)'> পাঠান</ বোতাম >
Vue.js আমাদের একাধিক ফাংশন বা পদ্ধতিতে কল করার জন্যও প্রদান করে। আমরা একাধিক ফাংশন কল করতে পারি এবং কমা দ্বারা তাদের আলাদা করতে পারি, যেমন এই উদাহরণ:
< বোতাম @ক্লিক='প্রথম (' হ্যালো '), দ্বিতীয় (' হাই ', $ ইভেন্ট)'> জমা দিন</ বোতাম >Vue.js পাশাপাশি ইভেন্ট সংশোধনকারী প্রদান করে।
ইভেন্ট সংশোধনকারী
আমাদের প্রায়শই ইভেন্টগুলির সাথে সংশোধনকারীদের কল করতে হবে। সুতরাং, Vue.js নিম্নলিখিত কিছু সংশোধনকারী প্রদান করে:
.স্টপ
এটি ক্লিক ইভেন্টের সংক্রমণ বন্ধ করবে।
< প্রতি @ক্লিক.স্টপ='এটা কর'></ প্রতি >.প্রতিরোধ
এটি পৃষ্ঠাটিকে পুনরায় লোড বা পুনirectনির্দেশিত করতে বাধা দেবে।
< ফর্ম @জমা দিন='জমা দিন'></ ফর্ম >.একদা
এটি শুধুমাত্র একবার ইভেন্ট ট্রিগার করবে।
< প্রতি @একবার ক্লিক করুন='এটা কর'></ প্রতি >.ক্যাপচার
এটি বেশিরভাগ ইভেন্ট শ্রোতা যোগ করতে ব্যবহৃত হয়।
< ডিভ @click.capture='এটা কর'> ...</ ডিভ >আমরা সংশোধনকারীদেরও চেইন করতে পারি। যাইহোক, মনে রাখবেন যে সংশোধনকারীদের ক্রমটি গুরুত্বপূর্ণ, এবং এটি ফলাফলগুলিকে প্রভাবিত করবে।
< প্রতি @click.stop.prevent='কর এটা'></ প্রতি >উপসংহার
এই নিবন্ধে, আমরা নুব থেকে নিনজা স্তর পর্যন্ত পুরো ক্লিক ইভেন্ট হ্যান্ডলিং ধারণাগুলি অন্তর্ভুক্ত করেছি। আমরা ক্লিক ইভেন্ট লেখার বিভিন্ন সিনট্যাক্স এবং ব্যবহার করার বিভিন্ন উপায় সম্পর্কে শিখেছি | _+_ | ডেভেলপারদের স্বাচ্ছন্দ্য এবং বিভিন্ন ইভেন্ট সংশোধনকারীদের জন্য Vue.js দ্বারা প্রদত্ত নির্দেশিকা। Vue.js এর সাথে সম্পর্কিত এইরকম আরও দরকারী সামগ্রীর জন্য, linuxhint.com ভিজিট করতে থাকুন।