Vue.js je velmi výkonná, snadno se učící a přístupná knihovna, která se znalostí HTML, CSS a Javascriptu v ní může začít vytvářet webové aplikace. Vue.js je postaven kombinací nejlepších funkcí z již existujících rámců Angular a React. Jedná se o progresivní a reaktivní rámec Javascriptu, který se používá k vytváření uživatelských rozhraní (uživatelská rozhraní) a SPA (jednostránkové aplikace), a proto vývojáři rádi kódují a při vývoji aplikací ve Vue.js. cítí svobodu a pohodlí. podívejte se na poslech a zpracování událostí ve Vue.js., budeme vědět, že poskytuje směrnici v-on pro naslouchání a zpracování událostí. K naslouchání DOM a provádění požadovaných úkolů můžeme použít směrnici v-on. Poskytuje také mnoho obslužných rutin událostí. V tomto článku se však budeme pouze učit a soustředit se na události kliknutí. Pojďme tedy začít!
Stejně jako událost onClick Javascriptu, Vue.js poskytuje v-on: kliknutí pro poslech událostí.
Syntaxe události v-on: click by vypadala takto:
< knoflík v-on: klikněte='functionName'>Klikněte</ knoflík >
Vue.js poskytuje zkrácenou @ místo použití v-on také.
< knoflík @klik='functionName'> Klikněte</ knoflík >
Vue.js nepřestává jen poslouchat událost kliknutí a volat funkci. Umožní nám to také přímo zapsat do uvozovek jakoukoli aritmetickou operaci nebo cokoli související s Javascriptem. Prostě takto:
< knoflík @klik='num += 1'> Přidat</ knoflík >
Vue.js nám umožňuje volat metodu nebo funkci v vloženém příkazu Javascript, jak je uvedeno níže:
< knoflík @klik='message (' Ahoj ')'> Zobrazit</ knoflík >Pomocí obslužných rutin událostí Vue.js můžeme přistupovat také k události DOM pomocí vloženého příkazu předáním speciálně poskytnuté proměnné $ event Vue.js do argumentu metody, stejně jako v následujícím příkladu:
< knoflík @klik='message (' Ahoj ', $ událost)'> Odeslat</ knoflík >
Vue.js nám také umožňuje volat více funkcí nebo metod. Můžeme volat více než jednu funkci a oddělit je čárkami, jako je tento příklad:
< knoflík @klik='first (' Hello '), second (' Hi ', $ event)'> Odeslat</ knoflík >Vue.js také poskytuje modifikátory událostí.
Modifikátory událostí
Spolu s událostmi často musíme volat modifikátory. Vue.js tedy poskytuje některé z následujících modifikátorů:
.stop
Zastaví přenos události kliknutí.
< na @click.stop='Udělej tohle'></ na >.zabránit
Zabrání opětovnému načtení nebo přesměrování stránky.
< formulář @odeslat.prevent='onSubmit'></ formulář >.jednou
Událost kliknutí spustí pouze jednou.
< na @klikni. jednou='Udělej tohle'></ na >.zachytit
Většinou se používá k přidání posluchače událostí.
< div @click.capture='Udělej tohle'> ...</ div >Můžeme také zřetězit modifikátory. Mějte však na paměti, že na pořadí modifikátorů záleží a bude to mít vliv na výsledky.
< na @click.stop.prevent='Udělej to'></ na >Závěr
V tomto článku jsme pokryli celé koncepty zpracování událostí Click od úrovně noob po ninja. Dozvěděli jsme se o různých syntaxích psaní událostí kliknutí a různých způsobech použití | _+_ | směrnice poskytovaná Vue.js pro snadnost vývojářů a různých modifikátorů událostí. Chcete -li získat další užitečný obsah, jako je tento, související s Vue.js, pokračujte na linuxhint.com.