Vue.js-এ ইভেন্ট হ্যান্ডলিং: সিনট্যাক্স এবং উদাহরণ

ইভেন্টগুলি পরিচালনা করা ব্যবহারকারীদের সাথে ইন্টারঅ্যাক্ট করার এবং Vue.js এ একটি অ্যাপ্লিকেশনের অবস্থা পরিবর্তন করার একটি গুরুত্বপূর্ণ অংশ। Vue.js ইনলাইন ইভেন্ট হ্যান্ডলার, পদ্ধতি এবং ইভেন্ট মডিফায়ার সহ ইভেন্টগুলি পরিচালনা করার বিভিন্ন উপায় সরবরাহ করে।

এখানে Vue.js-এ কিছু সাধারণ ঘটনা রয়েছে

1. click ঘটনা

এই ইভেন্টটি ট্রিগার হয় যখন একটি ক্লিকযোগ্য উপাদান, যেমন একটি বোতাম বা একটি লিঙ্ক, ক্লিক করা হয়। এটি সাধারণত ক্রিয়া সম্পাদন করতে বা ফাংশন ট্রিগার করতে ব্যবহৃত হয় যখন কোনও ব্যবহারকারী উপাদানটির সাথে যোগাযোগ করে।

<button v-on:click="handleClick">Click me</button>

methods: {  
  handleClick() {  
    console.log('Button clicked!');  
  }  
}

 

2. input ঘটনা

input এই ইভেন্টটি ট্রিগার হয় যখন একটি উপাদানের মান পরিবর্তন হয়। এটি সাধারণত Vue এর উপাদানের একটি ডেটা সম্পত্তির সাথে মানকে v-model আবদ্ধ করার নির্দেশের সাথে ব্যবহৃত হয়। input এটি আপনাকে প্রতিক্রিয়াশীলভাবে মান পরিবর্তন এবং ট্র্যাক করার অনুমতি দেয় input ।

<input v-model="message" v-on:input="handleInput" />

data() {  
  return {  
    message: ''  
  };  
},  
methods: {  
  handleInput() {  
    console.log('Input value:', this.message);  
  }  
}

 

3. change ঘটনা

এই ইভেন্টটি ট্রিগার হয় যখন একটি ফর্ম উপাদানের মান, যেমন একটি নির্বাচন ড্রপডাউন বা চেকবক্স পরিবর্তন করা হয়। এটি সাধারণত নির্বাচিত বিকল্প বা উপাদানটির চেক করা অবস্থার উপর ভিত্তি করে ক্রিয়া সম্পাদন করতে বা ডেটা আপডেট করতে ব্যবহৃত হয়।

<select v-model="selectedOption" v-on:change="handleSelectChange">  
  <option value="option1">Option 1</option>  
  <option value="option2">Option 2</option>  
</select>

data() {  
  return {  
    selectedOption: ''  
  };  
},  
methods: {  
  handleSelectChange() {  
    console.log('Selected option:', this.selectedOption);  
  }  
}

 

4. submit ঘটনা

এই ইভেন্টটি ট্রিগার হয় যখন একটি ফর্ম জমা দেওয়া হয়, হয় একটি বোতামে ক্লিক করে বা একটি ক্ষেত্রের submit ভিতরে এন্টার টিপে ৷ input এটি সাধারণত ফর্ম জমাগুলি পরিচালনা করতে, ব্যবহারকারীকে যাচাই করতে input এবং API অনুরোধ করা বা ডেটা সংরক্ষণ করার মতো ক্রিয়া সম্পাদন করতে ব্যবহৃত হয়।

<form v-on:submit="handleSubmit">  
  <input type="text" v-model="name" />  
  <button type="submit">Submit</button>  
</form>

data() {  
  return {  
    name: ''  
  };  
},  
methods: {  
  handleSubmit(event) {  
    event.preventDefault();  
    console.log('Form submitted! Name:', this.name);  
  }  
}

 

5. keyup ঘটনা

এই ইভেন্টটি ট্রিগার হয় যখন নিচে চাপার পর একটি কী প্রকাশ করা হয়। এটি সাধারণত কীবোর্ডের প্রতিক্রিয়া হিসাবে ক্রিয়া সম্পাদন করতে ব্যবহৃত হয় input, যেমন আইটেমগুলির একটি তালিকা ফিল্টার করা বা অনুসন্ধান কার্যকারিতা ট্রিগার করা।

<input v-model="message" v-on:keyup="handleKeyUp" />

data() {  
  return {  
    message: ''  
  };  
},  
methods: {  
  handleKeyUp() {  
    console.log('Key up event triggered!');  
  }  
}

 

6. keydown ঘটনা

একটি কী চাপলে এই ইভেন্টটি ট্রিগার হয়। এটি সাধারণত নির্দিষ্ট কী সংমিশ্রণ শোনার জন্য বা কী চেপে রাখা অবস্থায় ক্রিয়া সম্পাদন করতে ব্যবহৃত হয়, যেমন একটি স্লাইডশোর মাধ্যমে নেভিগেট করা বা একটি গেম নিয়ন্ত্রণ করা।

<input v-model="message" v-on:keydown="handleKeyDown" />

data() {  
  return {  
    message: ''  
  };  
},  
methods: {  
  handleKeyDown() {  
    console.log('Key down event triggered!');  
  }  
}

 

7. mouseover ঘটনা

মাউস পয়েন্টার একটি উপাদানের উপর সরানো হলে এই ইভেন্টটি ট্রিগার হয়। এটি সাধারণত অতিরিক্ত তথ্য দেখাতে বা একটি উপাদানের উপর ঘোরাঘুরি করার সময় চাক্ষুষ প্রতিক্রিয়া প্রদান করতে ব্যবহৃত হয়।

<div v-on:mouseover="handleMouseOver">Hover over me</div>

methods: {  
  handleMouseOver() {  
    console.log('Mouse over event triggered!');  
  }  
}

 

8. mouseout ঘটনা

মাউস পয়েন্টার একটি উপাদান থেকে সরানো হলে এই ইভেন্টটি ট্রিগার হয়। এটি সাধারণত উপাদানগুলিকে লুকাতে বা সংশোধন করতে ব্যবহৃত হয় যখন মাউস আর তাদের উপর ঘোরাফেরা করে না।

<div v-on:mouseout="handleMouseOut">Move mouse out</div>

methods: {  
  handleMouseOut() {  
    console.log('Mouse out event triggered!');  
  }  
}

 

9. scroll ঘটনা

এই ইভেন্টটি ট্রিগার হয় যখন একটি উপাদান স্ক্রোল করা হয়। এটি সাধারণত অসীম স্ক্রোলিং, বিষয়বস্তুর অলস লোডিং বা অবস্থানের উপর ভিত্তি করে UI উপাদান আপডেট করার মতো বৈশিষ্ট্যগুলি বাস্তবায়ন করতে ব্যবহৃত হয় scroll ।

<div v-on:scroll="handleScroll">Scroll me</div>

methods: {  
  handleScroll() {  
    console.log('Scroll event triggered!');  
  }  
}

 

10. focus ঘটনা

এই ইভেন্টটি ট্রিগার হয় যখন একটি উপাদান গ্রহণ করে focus, সাধারণত যখন এটি ক্লিক করা হয় বা যখন ব্যবহারকারী কীবোর্ড ব্যবহার করে এটিতে নেভিগেট করে। এটি সাধারণত ক্রিয়া সম্পাদন করতে বা চাক্ষুষ প্রতিক্রিয়া প্রদান করতে ব্যবহৃত হয় যখন একটি input বা উপাদান লাভ করে focus ।

<input v-on:focus="handleFocus" />

methods: {  
  handleFocus() {  
    console.log('Input focused!');  
  }  
}

 

এগুলি Vue.js-এর ইভেন্টগুলির কিছু প্রাথমিক উদাহরণ। আপনি আপনার প্রকল্পের নির্দিষ্ট চাহিদা মাপসই ইভেন্ট হ্যান্ডলিং ফাংশন কাস্টমাইজ করতে পারেন.