Vue.js நிகழ்வுகளை கிளிக் செய்யவும்

Vue Js Click Events



Vue.js என்பது மிகவும் சக்திவாய்ந்த, கற்றுக்கொள்ள எளிதான மற்றும் அணுகக்கூடிய நூலகமாகும், இது HTML, CSS மற்றும் ஜாவாஸ்கிரிப்ட் பற்றிய அறிவைக் கொண்டு, அதில் வலைப் பயன்பாடுகளை உருவாக்கத் தொடங்கலாம். Vue.js ஏற்கனவே இருக்கும் கோண மற்றும் எதிர்வினை கட்டமைப்பிலிருந்து சிறந்த அம்சங்களை இணைத்து உருவாக்கப்பட்டது. இது ஒரு முற்போக்கான மற்றும் எதிர்வினை கொண்ட ஜாவாஸ்கிரிப்ட் கட்டமைப்பாகும், இது UI கள் (பயனர் இடைமுகங்கள்) மற்றும் SPA களை (ஒற்றை பக்க பயன்பாடுகள்) உருவாக்க பயன்படுகிறது, அதனால்தான் Vue.js இல் பயன்பாடுகளை உருவாக்கும் போது டெவலப்பர்கள் குறியீடு மற்றும் சுதந்திரம் மற்றும் ஆறுதலை உணர விரும்புகிறார்கள். Vue.js இல் நிகழ்வைக் கேட்பது மற்றும் கையாளுதல் ஆகியவற்றைப் பாருங்கள், இது நிகழ்வுகளைக் கேட்கவும் கையாளவும் ஒரு v-on உத்தரவை வழங்குகிறது என்பதை நாங்கள் அறிவோம். DOM ஐக் கேட்கவும் தேவையான பணிகளைச் செய்யவும் நாம் v-on கட்டளையைப் பயன்படுத்தலாம். இது பல நிகழ்வு கையாளுபவர்களையும் வழங்குகிறது. இருப்பினும், இந்த கட்டுரையில், கிளிக் நிகழ்வுகளில் மட்டுமே நாங்கள் கவனம் செலுத்துவோம். எனவே, ஆரம்பிக்கலாம்!

ஜாவாஸ்கிரிப்ட்டின் onClick நிகழ்வைப் போலவே, Vue.js v-on ஐ வழங்குகிறது: நிகழ்வுகளைக் கேட்க கிளிக் செய்யவும்.







வி-ஆன்: சொடுக்கல் தொடருக்கான தொடரியல் இப்படி இருக்கும்:



< பொத்தானை v-on: கிளிக் செய்யவும்='செயல்பாட்டு பெயர்'>கிளிக் செய்யவும்</ பொத்தானை >

Vue.js v-on ஐப் பயன்படுத்துவதற்குப் பதிலாக ஒரு சுருக்கெழுத்து @ ஐ வழங்குகிறது.



< பொத்தானை @கிளிக் செய்யவும்='செயல்பாட்டு பெயர்'> கிளிக் செய்யவும்</ பொத்தானை >

Vue.js கிளிக் நிகழ்வைக் கேட்டு செயல்பாட்டை அழைப்பதில் மட்டும் நிற்காது. மேற்கோள் மதிப்பெண்களுக்குள் எந்த எண்கணித செயல்பாடு அல்லது ஜாவாஸ்கிரிப்ட் தொடர்பான எதையும் நேரடியாக எழுதவும் இது நம்மை அனுமதிக்கும். இது போலத்தான்:





< பொத்தானை @கிளிக் செய்யவும்='எண் += 1'> சேர்</ பொத்தானை >

கீழே காட்டப்பட்டுள்ளபடி, இன்லைன் ஜாவாஸ்கிரிப்ட் அறிக்கையில் முறை அல்லது செயல்பாட்டை அழைக்க Vue.js எங்களுக்கு வழங்குகிறது:

< பொத்தானை @கிளிக் செய்யவும்=செய்தி ('ஹாய்') '> காட்டு</ பொத்தானை >

Vue.js இன் நிகழ்வு கையாளுபவர்களைப் பயன்படுத்தி, DOM நிகழ்வையும், இன்லைன் அறிக்கையைப் பயன்படுத்தி, Vue.js குறிப்பாக வழங்கிய $ நிகழ்வு மாறியை முறையின் வாதத்தில் கடந்து, கீழே உள்ள உதாரணத்தைப் போலவே:



< பொத்தானை @கிளிக் செய்யவும்=செய்தி ('ஹாய்', $ நிகழ்வு) '> அனுப்பு</ பொத்தானை >

பல செயல்பாடுகளை அல்லது முறைகளை அழைக்க Vue.js எங்களுக்கு வழங்குகிறது. நாம் ஒன்றுக்கு மேற்பட்ட செயல்பாடுகளை அழைக்கலாம் மற்றும் அவற்றை இந்த உதாரணம் போல காற்புள்ளிகளால் பிரிக்கலாம்:

< பொத்தானை @கிளிக் செய்யவும்='முதல் (' ஹலோ '), இரண்டாவது (' ஹாய் ', $ நிகழ்வு)'> சமர்ப்பிக்கவும்</ பொத்தானை >

Vue.js நிகழ்வு மாற்றியமைப்பையும் வழங்குகிறது.

நிகழ்வு மாற்றிகள்

நாம் அடிக்கடி நிகழ்வுகளுடன் மாற்றியமைப்பாளர்களை அழைக்க வேண்டும். எனவே, Vue.js பின்வரும் சில மாற்றிகளை வழங்குகிறது:

.நிறுத்து

இது கிளிக் நிகழ்வின் பரிமாற்றத்தை நிறுத்தும்.

< க்கு @click.stop='இதை செய்ய'></ க்கு >

.தடுக்கவும்

இது பக்கத்தை மீண்டும் ஏற்றுவதை அல்லது திசை திருப்புவதைத் தடுக்கும்.

< வடிவம் @submit.prevent='onSubmit'></ வடிவம் >

.ஒரு முறை

இது கிளிக் நிகழ்வை ஒரு முறை மட்டுமே தூண்டும்.

< க்கு @click.once='இதை செய்ய'></ க்கு >

.பொறி

இது பெரும்பாலும் நிகழ்ச்சி கேட்பவரைச் சேர்க்கப் பயன்படுகிறது.

< div @click.capture='இதை செய்ய'> ...</ div >

மாற்றியமைப்பாளர்களையும் நாம் சங்கிலி செய்யலாம். இருப்பினும், மாற்றிகளின் வரிசை முக்கியமானது என்பதை நினைவில் கொள்ளுங்கள், அது முடிவுகளை பாதிக்கும்.

< க்கு @click.stop.prevent='அதை செய்'></ க்கு >

முடிவுரை

இந்த கட்டுரையில், முழு க்ளிக் நிகழ்வு கையாளுதல் கருத்துகளை நூப் முதல் நிஞ்ஜா நிலை வரை உள்ளடக்கியுள்ளோம். க்ளிக் நிகழ்வுகளை எழுதுவதற்கான வெவ்வேறு தொடரியல் மற்றும் பயன்படுத்த பல்வேறு வழிகள் பற்றி நாங்கள் கற்றுக்கொண்டோம் | _+_ | டெவலப்பர்கள் மற்றும் வெவ்வேறு நிகழ்வு மாற்றிகளின் எளிமைக்காக Vue.js வழங்கிய உத்தரவு. Vue.js தொடர்பான இது போன்ற பயனுள்ள உள்ளடக்கத்திற்கு, linuxhint.com ஐப் பார்வையிடவும்.