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లోని ఈవెంట్‌లకు కొన్ని ప్రాథమిక ఉదాహరణలు మాత్రమే. మీరు మీ ప్రాజెక్ట్ యొక్క నిర్దిష్ట అవసరాలకు సరిపోయేలా ఈవెంట్ హ్యాండ్లింగ్ ఫంక్షన్‌లను అనుకూలీకరించవచ్చు.