Ang Vue.js ay isang napakalakas, madaling malaman, at madaling lapitan ng silid-aklatan na sa kaalaman ng HTML, CSS, at Javascript, maaari nating simulan ang pagbuo ng mga web application dito. Ang Vue.js ay binuo sa pamamagitan ng pagsasama ng mga pinakamahusay na tampok mula sa mayroon nang mga Angular at reaksyon ng Mga Framework. Ito ay isang progresibo at reaktibo na balangkas ng Javascript na ginagamit upang bumuo ng mga UI (User Interfaces) at SPAs (Mga Single-page na Aplikasyon), na ang dahilan kung bakit gustung-gusto ng mga developer na mag-code at makaramdam ng kalayaan at ginhawa habang binubuo ang mga aplikasyon sa Vue.js. Kung gagawin namin tingnan ang Pakikinig sa Kaganapan at Pangangasiwa sa Vue.js., malalaman natin na nagbibigay ito ng isang direktoryo upang makinig at hawakan ang mga kaganapan. Maaari naming gamitin ang direktoryo na v-on upang makinig sa DOM at isagawa ang mga kinakailangang gawain. Nagbibigay din ito ng maraming mga handler ng kaganapan. Gayunpaman, sa artikulong ito, matututunan lamang namin at mapanatili ang aming pagtuon sa mga kaganapan sa pag-click. Kaya, magsimula na tayo!
Tulad ng kaganapan saClick ng Javascript, nagbibigay ang Vue.js ng v-on: mag-click para sa mga kaganapan sa pakikinig.
Ang syntax para sa v-on: kaganapan sa pag-click ay magiging ganito:
< pindutan v-on: mag-click='functionName'>Mag-click</ pindutan >
Nagbibigay ang Vue.js ng isang shorthand @ sa halip na gumamit din ng v-on.
< pindutan @click='functionName'> Mag-click</ pindutan >
Ang Vue.js ay hindi hihinto sa pakikinig lamang sa kaganapan sa pag-click at pagtawag sa pagpapaandar. Papayagan din kaming direktang magsulat ng anumang operasyon ng arithmetic o anumang nauugnay sa Javascript sa loob ng mga marka ng sipi. Tulad nito:
< pindutan @click='num + = 1'> Idagdag</ pindutan >
Nagbibigay sa amin ang Vue.js upang tawagan ang pamamaraan o pag-andar sa isang inline na pahayag ng Javascript, tulad ng ipinakita sa ibaba:
< pindutan @click='mensahe (' Kumusta ')'> Ipakita</ pindutan >Gamit ang mga humahawak sa kaganapan ng Vue.js, maaari din nating ma-access ang kaganapan ng DOM, gamit ang inline na pahayag, sa pamamagitan ng pagpasa ng lalo na ibinigay na Vue.js na variable ng kaganapan sa argumento ng pamamaraan, tulad ng halimbawa sa ibaba:
< pindutan @click='mensahe (' Kumusta ', $ kaganapan)'> Ipadala</ pindutan >
Nagbibigay din sa amin ang Vue.js upang tumawag sa maraming mga pag-andar o pamamaraan. Maaari kaming tumawag sa higit sa isang pagpapaandar at paghiwalayin ang mga ito sa pamamagitan ng mga kuwit, tulad ng halimbawang ito:
< pindutan @click='una (' Hello '), pangalawa (' Hi ', $ event)'> Isumite</ pindutan >Nagbibigay din ang Vue.js ng mga modifier ng kaganapan.
Mga Modifier ng Kaganapan
Madalas na kailangan naming tawagan ang mga modifier kasama ang mga kaganapan. Kaya, nagbibigay ang Vue.js ng ilan sa mga sumusunod na modifier:
.itigil
Hihinto nito ang paghahatid ng kaganapan ng pag-click.
< sa @ click.stop='gawin ito'></ sa >.pigilan
Pipigilan nito ang pahina upang muling i-reload o i-redirect.
< form @ isumite.prevent='onSubmit'></ form >.sabay
Ito ay magpapalitaw sa kaganapan sa pag-click nang isang beses lamang.
< sa @ click.once='gawin ito'></ sa >.capture
Karamihan ito ay ginagamit upang idagdag ang tagapakinig ng kaganapan.
< div @ click.capture='gawin ito'> ...</ div >Maaari naming chain ang mga modifier din. Gayunpaman, tandaan na ang pagkakasunud-sunod ng mga modifier ay mahalaga, at makakaapekto ito sa mga resulta.
< sa @ click.stop.prevent='gawin mo yan'></ sa >Konklusyon
Sa artikulong ito, sakop namin ang buong konsepto ng paghawak ng kaganapan sa pag-click mula sa noob hanggang sa antas ng ninja. Nalaman namin ang tungkol sa iba't ibang mga syntax ng pagsulat ng mga kaganapan sa pag-click at iba't ibang paraan upang magamit ang v-on:click ang direktiba na ibinigay ng Vue.js para sa kadalian ng mga developer at iba't ibang mga modifier ng kaganapan. Para sa mas kapaki-pakinabang na nilalamang tulad nito, na nauugnay sa Vue.js, patuloy na bisitahin ang linuxhint.com.