Interpolaatio ja direktiivit
Käyttäkää mustache-interpolaatiota ja keskeisiä direktiivejä templateissa
Interpolaatio ja direktiivit on ilmainen Vue Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/3. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Vue Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Vue Academy-kurssilla on yhteensä 3 oppituntia.
Mallipohjien syntaksin yleiskatsaus
Vue-mallipohjat ovat kelvollista HTML:ää, jota on laajennettu erityisellä syntaksilla:
- Mustache-interpolaatio tekstiä varten
- Direktiivit (v-etuliitteiset attribuutit) toimintaa varten
Vue kääntää nämä tehokkaiksi renderöintifunktioiksi.
Mustache-interpolaatio
Kaksoisaaltosulkeet eli mustache-syntaksi tulostavat tekstiä.
Sisältö on JavaScript-lauseke, ei pelkkä muuttujan nimi.
<span>Hello, {{ userName }}</span>
<span>{{ price * quantity }}</span>
<span>{{ isActive ? "On" : "Off" }}</span>v-bind attribuuteille
Mustacheja ei voi käyttää HTML-attribuuttien sisällä. Sitokaa data attribuuttiin käyttämällä direktiiviä v-bind.
<a v-bind:href="profileUrl">Profile</a>
<img v-bind:src="imagePath" v-bind:alt="caption" />
<button v-bind:disabled="isLoading">Submit</button>v-bindin lyhyt syntaksi
v-bind on niin yleinen, että sille on lyhyt syntaksi: pelkkä kaksoispiste.
<!-- Full syntax -->
<a v-bind:href="url">Link</a>
<!-- Shorthand -->
<a :href="url">Link</a>v-on tapahtumille
v-on-direktiivi kuuntelee DOM-tapahtumia ja suorittaa käsittelijöitä.
<button v-on:click="handleClick">Click me</button>
<input v-on:input="onType" />
<form v-on:submit="onSubmit">...</form>v-onin lyhyt syntaksi
v-onilla on myös lyhyt syntaksi: at-merkki.
<!-- Full syntax -->
<button v-on:click="save">Save</button>
<!-- Shorthand -->
<button @click="save">Save</button>Sisäiset ja metodikäsittelijät
Tapahtumakäsittelijät voivat olla sisäisiä lausekkeita tai metodien nimiä.
<!-- Inline expression -->
<button @click="count++">Add</button>
<!-- Method handler -->
<button @click="increment">Add</button>
<!-- Inline with the event object -->
<button @click="log($event)">Log</button>v-text
v-text-direktiivi määrittää elementin tekstisisällön. Se vastaa mustachen käyttöä.
<!-- These two are equivalent -->
<span v-text="message"></span>
<span>{{ message }}</span>v-html
v-html-direktiivi renderöi merkkijonon oikeana HTML:nä eikä suojattuna tekstinä.
<div v-html="rawHtml"></div>
<!-- If rawHtml = "<b>Bold</b>",
it renders actual bold text -->v-html ja XSS-varoitus
Varoitus: v-html on vaarallinen epäluotettavan sisällön kanssa.
- Se voi lisätä haitallisia skriptejä (XSS-hyökkäyksiä)
- Käyttäkää sitä vain sisällölle, johon luotatte täysin
- Älkää koskaan renderöikö käyttäjän lähettämää HTML:ää suoraan
Suosikaa tavallisessa tekstissä aina mustache-interpolaatiota, joka suojaa HTML:n erikoismerkit.
Direktiivien argumentit
Jotkin direktiivit ottavat kaksoispisteen jälkeen argumentin, joka määrittää esimerkiksi attribuutin tai tapahtuman.
<!-- argument is the attribute name -->
<a :href="url">Link</a>
<!-- argument is the event name -->
<button @click="run">Run</button>
<!-- dynamic argument -->
<a :[attrName]="value">Dynamic</a>Pikatarkistus
Testatkaa, miten hyvin ymmärrätte interpolaation ja direktiivit.
Kertaus: interpolaatio ja direktiivit
Opitte Vue-mallipohjien perusteet:
- {{ }} mustache tulostaa tekstilausekkeita
- v-bind (lyhyt syntaksi :) sitoo attribuutteja
- v-on (lyhyt syntaksi @) käsittelee tapahtumia
- v-text määrittää tekstisisällön
- v-html renderöi käsittelemätöntä HTML:ää (XSS-riski, käyttäkää varoen)
Seuraavaksi tutustutaan ehtoihin ja silmukoihin.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 42
- Oppitunnit
- 156
Usein kysytyt kysymykset
Onko oppitunti ”Interpolaatio ja direktiivit” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Vue Academy-oppimispolun 3 oppituntia, myös oppitunnin “Interpolaatio ja direktiivit”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Vue Academy-kurssilla on yhteensä 3 oppituntia.
Mitä opin oppitunnilla ”Interpolaatio ja direktiivit”?
Käyttäkää mustache-interpolaatiota ja keskeisiä direktiivejä templateissa Harjoittelet Vue Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Vue Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Vue Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/3.
Kuinka kauan ”Interpolaatio ja direktiivit”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Vue Academy-oppitunnilla?
Kyllä. Jokainen Vue Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Interpolaatio ja direktiivit
- Ehdot ja silmukat
- Attribuutti- ja luokkasidonnat