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 ஒரு பட்டனைக் கிளிக் செய்வதன் மூலமோ அல்லது புலத்தின் உள்ளே உள்ள Enter ஐ அழுத்துவதன் மூலமோ, படிவம் சமர்ப்பிக்கப்படும் போது இந்த நிகழ்வு தூண்டப்படும் 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 இல் உள்ள நிகழ்வுகளின் சில அடிப்படை எடுத்துக்காட்டுகள் இவை. உங்கள் திட்டத்தின் குறிப்பிட்ட தேவைகளுக்கு ஏற்ப நிகழ்வு கையாளுதல் செயல்பாடுகளை நீங்கள் தனிப்பயனாக்கலாம்.