Frontend jegyzetSearch...
Direktívák
A direktívák segítségével fogjuk kiegészíteni a HTML-t. Tulajdonképpen nem mások mint speciális attribútumok, amelyek az értéket nem a megszokott módon kezelik. Tulajdonképpen ES változókat, függvényeket és kódrészleteket fogunk értékül adni, amiket a v-node (virtuális node) renderelésekor fog cserélgetni a rendszer.
v-text
Arra szolgál, hogy egy szöveget elhelyezzük az elemünkön belül. Erre is két lehetőség ad a kezünkbe a Vue:
HTML
<p v-text="bekezdes"> </p>
Látjuk, hogy nem ez a legszebb és a legegyszerűbb módszer. Szerencsére mindenki tanult az esetből, így felhasználhatjük a Blade-ből ismert bajusz operátoros megoldást itt is:
HTML
<h1> {{ oldalCime }} </h1>
v-bind
Ez a dirketíva lesz az, ami önállóan nem fog semmi értelmes dolgot csinálni nekünk. Viszont, ha más attribútummal kombináljuk, akkor láthatjuk, hogy képes a többi dirketívához hasonló képességet adni a hagyományos attribútumoknak is, tehát ők is ki fogják értékelni az értékként megadott utasítást.
HTML
<div v-bind:id="elem.id"> ... </div>
De, hogy ne legyen hiányérzetünk, őt is lehet (sőt célszerű) rövidíteni, ami így fog kinézni:
HTML
<div :id="elem.id"> ... </div>
v-show
Enne a segítségével mondhatjuk meg, hogy megjelenjen-e a megjelölt elemünk az oldalon vagy sem. Ammenyiben igaz értéket kap megjelenik, ha hamis értéket kap, akkor elrejti a Vue.
HTML
<div v-show="isVisible"> ... </div>
Vigyázat!
Az elem ugyanúgy az oldal része marad, csak egy display: none;-t fog kapni
v-if | v-else-if | v-else
Ez előzőhöz hasonlóan ő is az elemek megjelenésével fog foglalkozni. Azonban lényegi különbség, hogy nem csak CSS segítségével rejtjük el a nem kellő elemet, hanem még a DOM-ból is eltávolításra kerül.
HTML
<p v-if="viz_hom < 0"> Fagyott </p>
<p v-else-if="0 <= viz_hom && viz_hom <= 100"> Folyékony </p>
<p v-else> Forr </p>
v-for
Lehetőségünk van arra is, hogy egy tömb segítségével több elemet hozzunk létre.
HTML
<ul>
<li v-for="elem in tomb" :key="elem.id"> {{elem.name}} </li>
</ul>
Figyelem!
A :key számára mindig adjunk meg valamilyen azonosítót ami egyedi az elemeink között, mert ez alapján tudjuk később az elemeinket kezelni.
Például, ha törlünk a tömből, akkor törlődni fog a listából is.
v-on
Ahhoz, hogy tudjuk eseményeket kezelni (például gombnyomást), a v-on-t fogjuk használni, ugyanis sokkal rugalmasabb, mint a hagyományos eseménykezelők. Többek között képes egymaga kezelni, hogy milyen egégombbal kattintottunk egy elemre, vagy, hogy csak egyszer legyen lehetőség lefuttatni azt.
HTML
<button v-on:click="klikk()" > Saját gomb </button>
Ezt is tudjuk azonban rövidíteni, valamit bővíteni módosítókkal:
HTML
<button @click.right="csakJobbKlikk()"> Jobb klikkes gomb </button>
Módosítók
A teljesség igénye nélkül.
| Módosító | Művelet |
|---|---|
.stop | meghívja az event.stopProprgation()-t. |
.prevent | meghívja az event.preventDefault()-ot. |
.{billentyű} | Csak a módosító billenytű lenyomása mellett fut le. |
.left | Csak bal egérgombra fut le. |
.right | Csak jobb egérgombra fut le. |
.middle | Csak középső egérgombra fut le. |
.once | Csak és kizárólag egyszer fut le. |
Módosító billentyűk
.enter.tab.delete.esc.space.up.down.alt.ctrl.shift.meta
v-model
Biztosítja a kétirányú adatáramlást. Ezt a direktívát mindig beviteli mezőn fogjuk használni és a megadott változó értékét folyamatosan frissíti, ha frissül az értéke.
HTML
<input type="text" v-model="username" />
Ellenőrző kérdések
- Miben hasonli a vue és a blade?
- Mi a legnagyobb különség a v-show és a v-if között?
- Mit fontos a v-for-nál megadni? Miért?
- Miért jó a v-bind-ot használni?
- Mire használhatók a módosítók a v-on esetén? Mutass egy példát!
\pagebreak