Vue.js ir ļoti spēcīga, viegli apgūstama un pieejama bibliotēka, kurā, zinot HTML, CSS un Javascript, mēs varam sākt veidot tīmekļa lietojumprogrammas. Vue.js ir veidots, apvienojot labākās iezīmes no jau esošajiem Angular un reaģēšanas ietvariem. Tas ir progresīvs un reaģējošs Javascript ietvars, ko izmanto, lai izveidotu lietotāja saskarnes (lietotāja saskarnes) un SPA (vienas lapas lietojumprogrammas), tāpēc izstrādātāji mīl kodēt un izjust brīvību un komfortu, vienlaikus izstrādājot lietojumprogrammas vietnē Vue.js. Ja mēs apskatiet notikumu klausīšanos un apstrādi vietnē Vue.js., mēs zināsim, ka tā nodrošina v-on direktīvu notikumu klausīšanai un apstrādei. Mēs varam izmantot direktīvu v-on, lai klausītos DOM un veiktu nepieciešamos uzdevumus. Tas arī nodrošina daudzus notikumu apstrādātājus. Tomēr šajā rakstā mēs tikai uzzināsim un turpināsim koncentrēties uz klikšķu notikumiem. Tātad, sāksim!
Tāpat kā Javascript onClick notikums, arī Vue.js nodrošina v-on: click, lai noklausītos notikumus.
Pasākuma v-on: click sintakse būtu šāda:
< pogu v-on: noklikšķiniet='functionName'>Klikšķis</ pogu >
Vue.js nodrošina saīsinājumu @, nevis v-on.
< pogu @klikšķis='functionName'> Noklikšķiniet</ pogu >
Vue.js neapstājas, vienkārši klausoties klikšķa notikumu un izsaucot funkciju. Tas arī ļaus mums pēdiņās tieši ierakstīt jebkuru aritmētisko darbību vai jebko, kas saistīts ar Javascript. Tieši šādi:
< pogu @klikšķis='skaits += 1'> Pievienot</ pogu >
Vue.js nodrošina metodes vai funkcijas izsaukšanu iekļautā Javascript paziņojumā, kā parādīts zemāk:
< pogu @klikšķis='ziņojums (' Sveiki ')'> Rādīt</ pogu >Izmantojot Vue.js notikumu apstrādātājus, mēs varam piekļūt arī DOM notikumam, izmantojot iekļauto paziņojumu, metodes argumentā iekļaujot Vue.js īpaši nodrošināto mainīgo $ event, tāpat kā zemāk redzamajā piemērā:
< pogu @klikšķis='message (' Hi ', $ event)'> Sūtīt</ pogu >
Vue.js arī ļauj mums izsaukt vairākas funkcijas vai metodes. Mēs varam izsaukt vairākas funkcijas un atdalīt tās ar komatiem, piemēram, šo piemēru:
< pogu @klikšķis='pirmais (' Sveiki '), otrais (' Hi ', $ event)'> Iesniegt</ pogu >Vue.js nodrošina arī notikumu pārveidotājus.
Pasākumu pārveidotāji
Mums bieži vien kopā ar notikumiem ir jāizsauc pārveidotāji. Tātad, Vue.js nodrošina dažus no šiem pārveidotājiem:
.apstāties
Tas pārtrauks klikšķa notikuma pārraidi.
< uz @click.stop='dari šo'></ uz >.novērst
Tas neļaus lapai atkārtoti ielādēt vai novirzīt.
< veidlapu @iesniegt.novērst='onSubmit'></ veidlapu >.vienreiz
Tas aktivizēs klikšķa notikumu tikai vienu reizi.
< uz @noklikšķiniet. vienreiz='dari šo'></ uz >.noķert
To galvenokārt izmanto, lai pievienotu notikuma klausītāju.
< div @click.capture='dari šo'> ...</ div >Mēs varam arī savienot pārveidotājus ar ķēdi. Tomēr paturiet prātā, ka modifikatoru secībai ir nozīme, un tā ietekmēs rezultātus.
< uz @click.stop.prevent='izdari to'></ uz >Secinājums
Šajā rakstā mēs esam apskatījuši visus klikšķu notikumu apstrādes jēdzienus no noob līdz ninja līmenim. Mēs esam iemācījušies par dažādām klikšķu notikumu rakstīšanas sintaksēm un dažādiem izmantošanas veidiem | _+_ | direktīva, ko nodrošina Vue.js izstrādātāju un dažādu notikumu pārveidotāju ērtībai. Lai iegūtu vairāk noderīga šāda satura, kas saistīts ar Vue.js, turpiniet apmeklēt vietni linuxhint.com.