Vue template-i su HTML poboljšan direktivama i interpolacijom — pišete markup koji izgleda kao HTML, plus posebni atributi (direktive, koje počinju sa v-) i {{ }} za dinamičke vrijednosti.
<template>
<h1>{{ title }}</h1> <!-- inserts the value of `title` -->
<p>{{ count * 2 }}</p> <!-- any JS expression works -->
<p>{{ isActive ? "On" : "Off" }}</p> <!-- ternaries, method calls, etc. -->
</template>
{{ }} evaluira JavaScript izraz (ne naredbe) i renderira rezultat kao tekst, automatski ažurirajući se kada se podaci promijene.
<template>
<p v-if="loggedIn">Welcome</p> <!-- conditional rendering -->
<li v-for="item in items" :key="item.id">{{ item.name }}</li> <!-- loops -->
<img :src="imageUrl" /> <!-- v-bind: bind an attribute -->
<button @click="submit">Send</button> <!-- v-on: handle an event -->
<input v-model="name" /> <!-- two-way binding -->
</template>
<a :href="url">link</a> <!-- : is short for v-bind: -->
<button @click="fn">go</button> <!-- @ is short for v-on: -->
Skraćenice : (bind) i @ (on) su idiomatski način pisanja Vue-a — rijetko ćete vidjeti puni oblik v-bind:/v-on:.
<div class="static">{{ text }}</div> <!-- {{}} for CONTENT -->
<div :class="dynamicClass"></div> <!-- :attr for ATTRIBUTES -->
Koristite {{ }} za tekstualni sadržaj i :attr za vrijednosti atributa — ne možete staviti mustache-ove unutar atributa.
Sintaksa template-a je srce pisanja Vue UI-ja.
Kombinacija {{ }} interpolacije i v- direktiva (sa : / @ skraćenicama) omogućava vam da izrazite dinamički, reaktivni UI deklarativno — čitljiv kao HTML, ali vođen podacima.
Ovladavanje čestim direktivama čini većinu svakodnevnog Vue razvoja.
Knjižnica IT pitanja za razgovore za posao s detaljnim odgovorima — od Juniora do Seniora.
Doniraj