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 और एपीआई अनुरोध करने या डेटा सहेजने जैसे कार्य करने के लिए किया जाता है।

<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 घटना

जब कोई तत्व स्क्रॉल किया जाता है तो यह ईवेंट ट्रिगर हो जाता है। इसका उपयोग आमतौर पर अनंत स्क्रॉलिंग, सामग्री की आलसी लोडिंग या 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 में घटनाओं के कुछ बुनियादी उदाहरण हैं। आप अपने प्रोजेक्ट की विशिष्ट आवश्यकताओं के अनुरूप इवेंट हैंडलिंग फ़ंक्शंस को कस्टमाइज़ कर सकते हैं।