„Vue.js“ yra labai galinga, lengvai išmokstama ir prieinama biblioteka, kurioje, žinodami HTML, CSS ir „Javascript“, galime pradėti kurti žiniatinklio programas. „Vue.js“ yra sukurtas derinant geriausias jau esančių „Angular“ ir „Reaguos“ sistemų funkcijas. Tai progresyvi ir reaktyvi „Javascript“ sistema, naudojama kuriant vartotojo sąsajas (vartotojo sąsajas) ir SPA (vieno puslapio programos), todėl kūrėjai mėgsta kurti ir jausti laisvę bei komfortą kurdami programas „Vue.js“. Pažvelkite į įvykių klausymą ir tvarkymą „Vue.js.“, mes žinosime, kad jame pateikiama „v-on“ direktyva, skirta klausytis ir valdyti įvykius. Mes galime naudoti „v-on“ direktyvą, kad išklausytume DOM ir atliktume reikalingas užduotis. Ji taip pat teikia daugybę renginių tvarkytojų. Tačiau šiame straipsnyje mes tik mokysimės ir sutelksime dėmesį į paspaudimų įvykius. Taigi, pradėkime!
Kaip ir „Javascript“ įvykis „onClick“, „Vue.js“ teikia „v-on: click“, jei norite klausytis įvykių.
„V-on: click“ įvykio sintaksė būtų tokia:
< mygtuką v-on: spustelėkite='functionName'>Spustelėkite</ mygtuką >
„Vue.js“ pateikia santrumpą @, o ne naudoja „v-on“.
< mygtuką @spustelėkite='functionName'> Spustelėkite</ mygtuką >
„Vue.js“ nenustoja vien klausytis paspaudimo įvykio ir skambinti funkcijai. Tai taip pat leis mums tiesiogiai parašyti bet kokią aritmetinę operaciją ar bet ką, susijusį su „Javascript“, kabutėse. Būtent taip:
< mygtuką @spustelėkite='num += 1'> Pridėti</ mygtuką >
„Vue.js“ suteikia mums galimybę iškviesti metodą ar funkciją įterptame „Javascript“ sakinyje, kaip parodyta žemiau:
< mygtuką @spustelėkite='žinutė (' Sveiki ')'> Rodyti</ mygtuką >Naudodami „Vue.js“ įvykių tvarkytojus, mes taip pat galime pasiekti DOM įvykį, naudodami tiesioginį teiginį, į metodo argumentą įtraukdami „Vue.js“ specialiai pateiktą kintamąjį $ event, kaip ir toliau pateiktame pavyzdyje:
< mygtuką @spustelėkite='message (' Labas ', $ event)'> Siųsti</ mygtuką >
„Vue.js“ taip pat leidžia mums iškviesti kelias funkcijas ar metodus. Galime iškviesti daugiau nei vieną funkciją ir atskirti jas kableliais, kaip šis pavyzdys:
< mygtuką @spustelėkite='pirma (' Sveiki '), antra (' Sveiki ', $ event)'> Pateikti</ mygtuką >„Vue.js“ taip pat teikia įvykių modifikatorius.
Įvykių modifikatoriai
Dažnai kartu su įvykiais turime kviesti modifikatorius. Taigi, „Vue.js“ pateikia keletą šių modifikatorių:
.sustabdyti
Tai sustabdys paspaudimo įvykio perdavimą.
< į @click.stop='daryk tai'></ į >.užkirsti kelią
Tai neleis puslapiui iš naujo įkelti ar nukreipti.
< forma @pateikti. užkirsti kelią='onSubmit'></ forma >.kartą
Paspaudimo įvykis bus suaktyvintas tik vieną kartą.
< į @spustelėkite vieną kartą='daryk tai'></ į >.užfiksuoti
Dažniausiai jis naudojamas renginio klausytojui pridėti.
< div @click.capture='daryk tai'> ...</ div >Mes taip pat galime grandines modifikuoti. Tačiau atminkite, kad modifikatorių tvarka yra svarbi ir tai turės įtakos rezultatams.
< į @click.stop.prevent='padaryti, kad'></ į >Išvada
Šiame straipsnyje mes apžvelgėme visas „Click“ įvykių tvarkymo sąvokas nuo „noob“ iki „ninja“ lygio. Mes sužinojome apie skirtingas paspaudimų įvykių rašymo sintakses ir įvairius naudojimo būdus | _+_ | direktyvą, kurią pateikė Vue.js kūrėjams ir įvairiems įvykių modifikatoriams palengvinti. Norėdami gauti daugiau naudingo turinio, susijusio su „Vue.js“, apsilankykite linuxhint.com.