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!');  
  }  
}

 

६. 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 मा घटनाहरूको केही आधारभूत उदाहरणहरू मात्र हुन्। तपाइँ तपाइँको परियोजना को विशेष आवश्यकताहरु लाई फिट गर्न को लागी घटना ह्यान्डलिंग प्रकार्यहरु लाई अनुकूलित गर्न सक्नुहुन्छ।