Vue.js ఈవెంట్‌లను క్లిక్ చేయండి

Vue.js అనేది చాలా శక్తివంతమైనది, నేర్చుకోవడానికి సులభమైనది మరియు చేరుకోగల లైబ్రరీ, ఇది HTML, CSS మరియు Javascript పరిజ్ఞానంతో, మేము దానిలో వెబ్ అప్లికేషన్‌లను రూపొందించడం ప్రారంభించవచ్చు. Vue.js ఇప్పటికే ఉన్న కోణీయ మరియు రియాక్ట్ ఫ్రేమ్‌వర్క్‌ల నుండి ఉత్తమ ఫీచర్‌లను కలపడం ద్వారా నిర్మించబడింది. ఇది ఒక ప్రగతిశీల మరియు రియాక్టివ్ జావాస్క్రిప్ట్ ఫ్రేమ్‌వర్క్, ఇది UI లు (యూజర్ ఇంటర్‌ఫేస్‌లు) మరియు SPA లు (సింగిల్-పేజీ అప్లికేషన్స్) నిర్మించడానికి ఉపయోగించబడుతుంది, అందుకే డెవలపర్లు Vue.js. లో అప్లికేషన్‌లను అభివృద్ధి చేసేటప్పుడు కోడ్ మరియు స్వేచ్ఛ మరియు సౌకర్యాన్ని అనుభూతి చెందుతారు. Vue.js లో ఈవెంట్ లిజనింగ్ మరియు హ్యాండ్లింగ్‌ని పరిశీలించండి, ఈవెంట్‌లను వినడానికి మరియు నిర్వహించడానికి ఇది v- ఆన్ డైరెక్టివ్‌ను అందిస్తుందని మాకు తెలుస్తుంది. DOM ని వినడానికి మరియు అవసరమైన పనులు చేయడానికి మేము v-on ఆదేశాన్ని ఉపయోగించవచ్చు. ఇది అనేక ఈవెంట్ హ్యాండ్లర్‌లను కూడా అందిస్తుంది. అయితే, ఈ ఆర్టికల్‌లో, మేము కేవలం క్లిక్ ఈవెంట్‌లపై మాత్రమే దృష్టి పెడతాము. కాబట్టి, ప్రారంభిద్దాం!

Javascript యొక్క onClick ఈవెంట్ వలె, Vue.js v-on: ఈవెంట్‌లను వినడానికి క్లిక్ చేయండి.

V-on: క్లిక్ ఈవెంట్ కోసం వాక్యనిర్మాణం ఇలా ఉంటుంది:

Vue.js v-on ని ఉపయోగించడానికి బదులుగా @ లఘువును అందిస్తుంది.

Vue.js కేవలం క్లిక్ ఈవెంట్ వింటూ మరియు ఫంక్షన్‌కు కాల్ చేయడంలో ఆగదు. కొటేషన్ మార్కుల లోపల ఏదైనా అంకగణిత ఆపరేషన్ లేదా జావాస్క్రిప్ట్‌కు సంబంధించిన ఏదైనా నేరుగా రాయడానికి కూడా ఇది మాకు అనుమతిస్తుంది. ఇలాగే:

Vue.js పద్ధతి లేదా ఫంక్షన్‌ను ఇన్‌లైన్ జావాస్క్రిప్ట్ స్టేట్‌మెంట్‌లో కాల్ చేయడానికి మాకు అందిస్తుంది, క్రింద చూపిన విధంగా:

Vue.js యొక్క ఈవెంట్ హ్యాండ్లర్‌లను ఉపయోగించి, మేము DOM ఈవెంట్‌ని కూడా యాక్సెస్ చేయవచ్చు, ఆన్‌లైన్ స్టేట్‌మెంట్ ఉపయోగించి, Vue.js ప్రత్యేకంగా అందించిన $ ఈవెంట్ వేరియబుల్‌ను పద్ధతి యొక్క వాదనలోకి పంపడం ద్వారా, దిగువ ఉదాహరణ వలె:

Vue.js మల్టిపుల్ ఫంక్షన్‌లు లేదా మెథడ్స్‌కు కాల్ చేయడానికి కూడా మాకు అందిస్తుంది. మేము ఈ ఉదాహరణ వంటి ఒకటి కంటే ఎక్కువ ఫంక్షన్‌లకు కాల్ చేయవచ్చు మరియు వాటిని కామాలతో వేరు చేయవచ్చు:

Vue.js ఈవెంట్ మాడిఫైయర్‌లను కూడా అందిస్తుంది.

ఈవెంట్ మాడిఫైయర్లు

మేము తరచుగా ఈవెంట్‌లతో పాటు మాడిఫైయర్‌లకు కాల్ చేయాల్సి ఉంటుంది. కాబట్టి, Vue.js కింది కొన్ని మోడిఫైయర్‌లను అందిస్తుంది:

.ఆపు

ఇది క్లిక్ ఈవెంట్ ప్రసారాన్ని ఆపివేస్తుంది.

. నిరోధించు

ఇది పేజీని మళ్లీ లోడ్ చేయడాన్ని లేదా దారి మళ్లించడాన్ని నిరోధిస్తుంది.

.ఒక్కసారి

ఇది క్లిక్ ఈవెంట్‌ని ఒక్కసారి మాత్రమే ట్రిగ్గర్ చేస్తుంది.

.క్యాప్చర్

ఈవెంట్ వినేవారిని జోడించడానికి ఇది ఎక్కువగా ఉపయోగించబడుతుంది.

మేము మాడిఫైయర్‌లను కూడా గొలుసు చేయవచ్చు. అయితే, మోడిఫైయర్‌ల క్రమం ముఖ్యమని గుర్తుంచుకోండి మరియు అది ఫలితాలను ప్రభావితం చేస్తుంది.

ముగింపు

ఈ వ్యాసంలో, నూబ్ నుండి నింజా స్థాయి వరకు మొత్తం క్లిక్ ఈవెంట్ నిర్వహణ భావనలను మేము కవర్ చేసాము. క్లిక్ ఈవెంట్‌లను వ్రాయడం మరియు ఉపయోగించడానికి వివిధ మార్గాల యొక్క విభిన్న వాక్యనిర్మాణాల గురించి మేము తెలుసుకున్నాము డెవలపర్లు మరియు విభిన్న ఈవెంట్ మాడిఫైయర్ల సౌలభ్యం కోసం Vue.js అందించిన ఆదేశం. Vue.js కి సంబంధించిన మరింత ఉపయోగకరమైన కంటెంట్ కోసం, linuxhint.com ని సందర్శించడం కొనసాగించండి.