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 मधील इव्हेंटची ही काही मूलभूत उदाहरणे आहेत. तुमच्या प्रोजेक्टच्या विशिष्ट गरजा पूर्ण करण्यासाठी तुम्ही इव्हेंट हाताळणी फंक्शन्स सानुकूलित करू शकता.