Komunikacija izmedju susednih komponenti

Posted on 18/05/2018 at 23:24.Written by Dragoljub Živanović

Uvod

Komunikacija izmedju “susednih” komponenti se može ostvariti na više načina, a izbor jednog od ponudjenih mehanizma najčešće zavisi od komplikovanosti aplikacije.

a) Komunikacija preko zajedničkog roditelja ($emit -> $on & atribut -> props )

Izvodljivo rešenje, ali je generalno loša ideja, jer se teško prati protok podataka a samim tim je otežano debag-ovanje.

b) Event bus ($emit & $on)

Brzo i jednostavno rešenje za aplikacije sa jednostavnom arhitekturom i manjim brojem komponenti.

c) Vuex (centralizovani state menadžment)

Kompleksno rešenje za kompleksne aplikacije

Komunikacija izmedju komponenti tip “parent <---> child”

Posted on 17/05/2018 at 09:43.Written by Dragoljub Živanović

Uvod

emit-props

U okviru Vue.js svaka komponenta ima svoj izolovani domen, direktna komunikacija izmedju dve komponente po default-u nije dozvoljena, tako da se za razmenu podataka koriste odgovarajuće mehanizmi.
Komunikacija izmedju parent i child komponente može da se odvija u oba smera ali koristeći različite mehanizme. U smeru od parenta ka child komponenti podatak se prosledjuje kroz atribut child taga, a u smeru od child komponente ka parent komponenti se prosledjuje uz custom event.

Treba naglasiti da u zavisnosti od tipa prosledjenog podatka zavisi da li je komunikacija jednosmerna ili dvosmerna. U slučaju podataka primitivnog tipa ova komunikacija je jednosmerna, jer child komponenta čak i da napravi promenu nad prosledjenim podatkom to neće uticati na parent komponentu. Medjutim ako se proslede podaci referentog tipa (nizovi ili objekat), onda promena takvog podatka u child komponenti će se primetiti i iz roditeljske komponente jer obe “posmatraju” isto mesto u memoriji.

<parent-komponenta>
  <div>
    <child-komponenta></child-komponenta>
  </div>
</parent-komponenta>

<parent-komponenta>

<div>

<child-komponenta></child-komponenta>

</div>

</parent-komponenta>

Šta su Vue.js komponente?

Posted on 13/05/2018 at 17:47.Written by Dragoljub Živanović

Kreiranje komponente

Poznato je da čak i kod najjednostavnijih aplikacija nije dobro držati ceo kod u jednom fajl, već je bolje razbiti ga na više celina jer se na taj način pojednostavljuje aplikacija i omogućava bolja preglednost kao i lakši debuging. Upravo su komponente odličan način da se razbije kompleksnost aplikacije na manje delove. Pored toga komponente nam omogućavaju da enkapsuliramo kod naš kod, kao i da ga možemo koristiti više puta u aplikaciji (reusable kod).

U suštini komponenta predstavlja jedan options objekat Vue instance. Ukoliko nam je dostupna ES6 sintaksa i korišćenje modula, onda je dobro taj options objekat izdvajiti u zaseban fajl. Taj fajl u okviru Vue.js framework-u ima specijalnu ekstenziju .vue, a naziv po konvenciji mora da započinje velikim slovom i sastoji se iz tri sekcije: template, script, style.

Primer: ButtonCounter.vue

<template>
   <div>
     <button v-on:click="count++">Klikni me</button>
     <p>kliknuto {{ count }} puta </p>
   </div>
</template>

<script>
    export default {
      data() {
        return {
          count: 0
        };
      }
    };
</script>

<style>
    button {
        font-size: 1rem;
        background-color: red;
        color: white;
        padding: 0.3rem 0.8rem;
    }
</style>

<div>

<button v-on:click="count++">Klikni me</button>

<p>kliknuto {{ count }} puta </p>

</div>

</template>

export default {

data() {

return {

};

}

};

</script>

<style>

button {

font-size: 1rem;

background-color: red;

color: white;

padding: 0.3rem 0.8rem;

}

</style>

Prednosti korišećenja komponenti su sledeće:

Syntax highlighting
Component-scoped CSS
Preglednija aplikacija zbog modularnog programiranje

NAPOMENA:

Za Vue verziju 2.0 template sekcija mora da ima samo jedan root element, u susprotnom Vue.js izbacuje error.

<template>
     <button v-on:click="count++">Klikni me</button>
     <p>kliknuto {{ count }} puta </p>
</template>

<button v-on:click="count++">Klikni me</button>

<p>kliknuto {{ count }} puta </p>

</template>

Prethodni primer izbacuje error, jer postoje dva root elementa u okviru template. Rešenje je da stavimo oba elementa u zajednički wrapper element:

<template>
   <div>
     <button v-on:click="count++">Klikni me</button>
     <p>kliknuto {{ count }} puta </p>
   </div>
</template>

<div>

<button v-on:click="count++">Klikni me</button>

<p>kliknuto {{ count }} puta </p>

</div>

</template>

Registrovanje komopnente

Da bi mogli implementirati kreiranu komponentu u našu aplikaciju (ili u drugu komponentu) potrebno ju je registrovati (mora da ima konstruktorsku funkciju na osnovu koje se generiše).

a) Globalno registrovanje komponente

Globalno registrovanje komponente nam omoućava da komponentu koristimo iz različitih Vue instanci ili drugih komponenti. Komponentu registrujemo koristeći component() metodu. Ova metoda prihvata dva argumenta: naziv tag-a i options objekat:

Vue 3.0
Vue 2.0

const app = Vue.createApp({})

app.component('naziv_komponente', {/* options objekat */})

app.mount('#app')

const app = Vue.createApp({})

app.component('naziv_komponente', {/* options objekat */})

app.mount('#app')

Primer

See the Pen
Untitled by Web programiranje (@chos)
on CodePen.

Vue.component('naziv-taga', { /* options objekat */  }

1	Vue.component('naziv-taga', { /* options objekat */ }

Primer

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">Stisnuli ste dugme {{ count }} puta.</button>'
})

Vue.component('button-counter', {

data: function () {

return {

}

template: '<button v-on:click="count++">Stisnuli ste dugme {{ count }} puta.</button>'

})

b) Lokalno registrovanje komponente

Za razliku od globalne registacije komponente, kada su komponente dostupne svim drugim komponentama, kod lokalno registrovane komponente sadržaj jedne komponente nije odmah dostupan u okviru druge komponente, potrebno je dodatno importovati i lokalno registrovati komponentu.
Pri lokalnoj registraciji se ne koristi metoda component() nego components svojstvo. To svojstvo je objekat kroz koji se definišu sve lokalne komponente u vidu paraova key/value. Kroz key se definiše naziv komponente, a value ukazuje na promenjivu koja predstavlja options objekt:

Vue 3.0
Vue 2.0

new Vue({
    el:"#app",
    components: {
        'button-counter' : { /* options objekat */ }
    }
})

new Vue({

el:"#app",

components: {

'button-counter' : { /* options objekat */ }

}

})

ili da izdvojimo options objekat (važno kod “Single File Component”)

var button-counter-options = { /* options objekat */ }

new Vue({
    el:"#app",
    components: {
        'button-counter' : button-counter-options
    }
})

var button-counter-options = { /* options objekat */ }

new Vue({

el:"#app",

components: {

'button-counter' : button-counter-options

}

})

“data” svojstvo u Vue komponenti

Svojstvo “data” u komponentama ne može da bude običan objekat, jer je Vue.js dizajniran da u tom slučaju izbaci error. Razlog zbog čega Vue.js sprečava takvu sintaksu (koja je inače regularna za u okviru Vue instance), je taj što bi se tako definisan objekat delio u svim kreiranim instancama! Da bi se to izbeglo potrebno je da podatke deklarišemo kao funkciju koja vraća objekat sa data svojstvima, nakon čega će svaka instanca komponente dobiti svoju novu kopiju početnog “data” objekta.

data: function (){
    return {
        message: "Hello"
    }
}

data: function (){

return {

message: "Hello"

}

ili ako smo u mogućnosti da koristimo ES6, možemo napisati jednostavanije:

data() {
    return {
        message: "Hello"
    };
  }

data() {

return {

message: "Hello"

};

}

Primer

See the Pen Komponente by Web programiranje (@chos) on CodePen.

NAPOMENA:
Kada bi smo ipak želeli da delimo isti data objekat kroz više instanci, postoji način da “zaznemo” Vue.js. Potrebno je da izvučemo data objekat izvan vue istance i dodelimo ga nekoj promenjivoj, pa data svojstvu ukažemo na tu promenjivu:

See the Pen Komponente i zajedniki data objekat by Web programiranje (@chos) on CodePen.

Ukoliko bi vratili data objekat u instancu, svaka komponenta bi tada imala svoj data objekat, nakon čega bi brojači bili razdvojeni.

components: {
    'naziv-komponente' : { /* options objekat */ }
}

components: {

'naziv-komponente' : { /* options objekat */ }

}

Primer

See the Pen
Lokalne komponente by Web programiranje (@chos)
on CodePen.

NAPOMENA:

Kada se koristi single file komponenta ona se nalazi u zasebnom fajlu pre registrovanja je neophodno da je prvo importujemo (pogledaj primer):

import ButtonCounter from './ButtonCounter.vue'

1	import ButtonCounter from './ButtonCounter.vue'

Implementacija komponente u HTML

<template> tag

Vue aplikacija može da ubaci novi element u HTML. Mesto dodavanja novog HTML elementa se obeležava sa ubacivanjem <template></template> taga:

<div id="app">
  <template></template>
</div>

</div>

Ovaj element ne postoji sve dok se ne kreira Vue instanca. Sa čime će se zameniti template tag kada se kreira Vue instanca se definiše u okviru “template” svojstva instance:

let app = Vue.createApp({
  template: `<p>{{msg}}</p>`
})

let app = Vue.createApp({

})

Primer

See the Pen
Vue template by Web programiranje (@chos)
on CodePen.

<Komponent> tag

Komponente se slično implementiraju kao i <template> tag, dovoljno je ugraditi custom tag sa nazivom komponente i on će sa sobom “doneti” svoje HTML elemente, svu logiku, i stajling definisan u komponenti.

<div id="app">
    <naziv-komponente></naziv-komponente>
</div>

<naziv-komponente></naziv-komponente>

</div>

U aplikaciji se mogu koristi više instanci iste komponente, za to je dovoljno da se tag sa nazivom komponente ubaci na više mesta u okviru samog HTML-a.

Direktive v-text & v-html & v-pre

Posted on 10/05/2018 at 07:09.Written by Dragoljub Živanović

v-text

Ova direktiva prihvata kao argument promenjivu koja predstavlja tekst sa kojim treba da se ažurira ceo sadržaj taga. Ima istu funkcionalnost kao interpolacija string-a.

See the Pen v-text by Web programiranje (@chos) on CodePen.

vue.js
Continue reading…

Direktive v-show & v-once & v-cloak

Posted on 07/05/2018 at 21:07.Written by Dragoljub Živanović

v-show

Direktiva “v-show” se koristi za uslovno prikazivanje elementa. Iako “v-show” uvek generiše HTML elemenat na kome se nalazi (elemenat se vidi u inspektoru), prikazaće ga na korisničkom interfejsu tek ako je stanje direktive true v-show="true" u suprotnom elemenat neće biti prikazan jer ima svojstvo display:none. Isti krajnji rezultat na korisničkom interfejsu bi dobili korišćenjem direktive “v-if”, medjutim u pozadini se ove dve direktive krucijalno razlikuju, u slučaju v-if="false", element nije samo sakriven već potpuno nestaje iz DOM-a.

Kada koristiti “v-show”

Ako imamo puno elemenata koji bi trebali biti vidljivi u zavisnosti od nekih dinamičkih podataka, savetuje se da koristimp atribut v-shov, jer dodavanje ili uklanjanje elemenata u DOM-u prilično skupa operacija, pa mnogo takvih operacija može uticati na performanse aplikacije. S druge strane, ako elemente treba uslovno da se izvrše samo jednom, recimo, prilikom pokretanja aplikacije onda koristite atribut v-if.

v-if vs v-show

v-cloak

“v-cloak” je atribut koji nakon dodavanja elementu, nestaje kada se Vue instanca generiše. Stoga se koristi da se uz pomoć nje targetira elemenat sve dok se instanca ne generiše. Najčešće se koristi da bi se targetirao element u CSS-u, nakon čega se tom elementu dedeli svojstvo display: none, jer se tako sprečava prikazivanje elementa dok se instanca ne kreira.

Primer

Pošto će ova direktiva ostati na elementu sve dok se ne generiše Vue instanca, iskoristićemo je da preko nje targetiramo elemenat u tom periodu, da bi prikrili sadržaj:

// HTML:
    <div id="app" v-cloak>
      {{ message }}
    </div>

// CSS:
    #app[v-cloak] {
      display: none;
    }

// HTML:

</div>

// CSS:

#app[v-cloak] {

display: none;

}

Primer

Za sakrivanje dece:

[v-cloak] > * { display:none }

1	[v-cloak] > * { display:none }

Primer

Za ubacivanje loadera:

[v-cloak]::before { content: "loading…"

1	[v-cloak]::before { content: "loading…"

NAPOMENA:
Direktiva “v-cloak” ne radi prilikom učitavanja remote podataka, već samo pri startovanju aplikacije. Takodje ne pokušavajte da učitavate veliki sadržaj čije bi učitavanje duže trajalo (npr. slike), jer je vreme generisanje Vue instance kratko, pa neće stići da se downloaduje ceo sadržaj.

v-once

Iako je rendering običnog HTML elementa veoma brz, ponekad ukoliko imamo komponentu koja sadrži puno statičkog sadržaja, treba izvršiti optimizaciju. Optimizacija se zasniva na korišćenju v-once direktive koja obezbedjuje samo jedno renderovanje sadržaja, dok se svaki drugi put vraća keširan sadržaj.

<div class=”v-once”>
    ...
    ... statičiki sadržaj koji se ne menja
    ...
</div>

...

... statičiki sadržaj koji se ne menja

...

</div>

Iako izgleda veoma korisno, preporuka je da se ova direktiva koristi retko, zbog problema kada aplikaciju preuzme drugi developer, koji previdi postojanje direktive “v-once” i utroši sate provaljivajući zašto neće da mu se ažurira sadrža:).

Direktiva v-if

Posted on 04/05/2018 at 08:18.Written by Dragoljub Živanović

Uvod

Ove direktive se ugradjuju kao atribut u željene HTML elemente i mogu da zamene poznatu javascript sintaksu:

if (uslov 1) {
    ovaj deo koda ce biti izvrsen ako je uslov 1 zadovoljen;
} elseif (uslov 2) {
    ovaj deo koda ce biti izvrsen ako je uslov 1 nije zadovoljen ali uslov 2 jeste;
} else {
    ovaj deo koda ce biti izvrsen ako nije ispunjen ni jedan od prethodna dva uslova
}

if (uslov 1) {

ovaj deo koda ce biti izvrsen ako je uslov 1 zadovoljen;

} elseif (uslov 2) {

ovaj deo koda ce biti izvrsen ako je uslov 1 nije zadovoljen ali uslov 2 jeste;

} else {

ovaj deo koda ce biti izvrsen ako nije ispunjen ni jedan od prethodna dva uslova

}

vue.js

Sintaksa i primeri

v-if

Koristi se za kondicionlno renderovanje elementa tj. može da doda i ukloni elemenat iz DOM-a.

<div v-if="Math.random() > 0.8"> Ako je slucajni broj veci od 0,8 videcemo ovaj element</div>

1	<div v-if="Math.random() > 0.8"> Ako je slucajni broj veci od 0,8 videcemo ovaj element</div>

NAPOMENA:
Ukoliko se direktiva “v-for” koristi zajedno sa “v-if” na istom elementu, direktiva “v-for” ima viši prioritet od “v-if.“

v-else-if

Element za koji je zakačena direktiva "v-else-if" mora da stoji odmah iza HTML elmenata na koji je zakačena "v-if" direktiva, ako ovo nije ispoštovano Vue.js ga neće prepoznati.

<div v-if="Math.random() > 0.8"> Ako je slucajni broj veci od 0,8 videcemo ovaj element</div>
<div v-else-if="Math.random() > 0.5"> Ako je slucajni broj veci od 0.5 videcemo ovaj element</div>

1 2	<div v-if="Math.random() > 0.8"> Ako je slucajni broj veci od 0,8 videcemo ovaj element</div> <div v-else-if="Math.random() > 0.5"> Ako je slucajni broj veci od 0.5 videcemo ovaj element</div>

v-else

Element za koji je zakačena direktiva "v-else" mora da stoji odmah iza HTML elmenata na kojima su zakačene "v-if" ili "v-else-if" direktive, ako ovo nije ispoštovano Vue.js ga neće prepoznati.

<div v-if="Math.random() > 0.8"> Ako je slucajni broj veci od 0,8 videcemo ovaj element</div>
<div v-else-if="Math.random() > 0.5"> Ako je slucajni broj veci od 0,5 videcemo ovaj element</div>
<div v-else>Ako je slucajni broj manji od 0.5 videcemo ovaj div</div>

<div v-if="Math.random() > 0.8"> Ako je slucajni broj veci od 0,8 videcemo ovaj element</div>

<div v-else-if="Math.random() > 0.5"> Ako je slucajni broj veci od 0,5 videcemo ovaj element</div>

<div v-else>Ako je slucajni broj manji od 0.5 videcemo ovaj div</div>

Primer

Pošto direktiva v-else mora da bude na elementu koji je odmah iza elementa koji ima “zakačenu” direktivu “if”, ukoliko imamo potrebu da utiče na više elemenata moramo da obavijemo željene elemente sa nekim “wrapper” elementom. Taj wrapper može biti “div” tag, ali je preporuka je da se koristi <template> tag, jer “ne zagadjuje” DOM (tag se ne renderuje ali njegov sadražaj da).

<div v-if="Math.random() > 0.5">Ako je slucajni broj veći od 0,5 videcemo ovaj div</div>
<template v-else>
    <h3>Ovo je naslov</h3>
    <p>Ako je slucajni broj manji od 0,5 videcemo ovaj paragraf i naslov</p>
</template>

<div v-if="Math.random() > 0.5">Ako je slucajni broj veći od 0,5 videcemo ovaj div</div>

<h3>Ovo je naslov</h3>

<p>Ako je slucajni broj manji od 0,5 videcemo ovaj paragraf i naslov</p>

</template>

Direktiva v-for

Posted on 02/05/2018 at 07:19.Written by Dragoljub Živanović

Uvod

Koristeći Vue.js direktivu “v-for” dinamički generišemo HTML tzv. izlistavanje (mapiranje) podataka. <div v-for="item in items">
Iako možda na prvi pogled izgleda logično da se direktiva stavi na parent element (“ul” ili “ol”), to ovde nije slučaj, kod Vue.js se direktiva “v-for” ugradjuje na HTML elemenat koji treba da se “izlistava”, tj. HTML elemenat na kojem je “zakačena” direktiva “v-for” će se koristiti kao template za renderovanje odgovarajućeg sadržaja.

Direktiva “v-for” koristi takozvanu “in-place patch” strategiju koja omogućava efikasno korišćenje resursa. Medjutim ovakav pristup u nekim slučajevima može da napravi problem u prikazivanju izlistanih elemenata, nakon njihovog sortiranja ili izmeni njihovog redosleda (npr. ako koristimo metodu koja meša redosled). Za ovaj problem postoji rešenje dodavanjem jedinstvenog “key” atributa svakom elementu, koji se “veže” (eng. “bind”) za taj element. U suštini dodavanje ovog dodatnog atributa je znak za Vue.js, da prati identitet svakog elementa i na taj način ispravno izvrši redefinisanje pozicije elementa. Za ključ treba izabrati neki jedinstveni podatak
v-bind:key="nekiJedinstveniParametar"
Preporuka je da se ovaj atribut obezbedi kad god je to moguće. Procitajte više o ovoj problematici na oficijelnoj strani ili na stranici “codingexplained.com” u clanku “Understanding-v-for-update-strategy”

Primer

<div v-for="item in items" v-bind:key="item.id"  >
  <!-- content -->
</div>

</div>

Direktiva v-model

Posted on 25/04/2018 at 07:21.Written by Dragoljub Živanović

Uvod

vue.js direktive

Korisničku akciju na view prosledjujemo aplikaciji sa direktivom “v-on:”, nakon obrade podataka radi ažuriranja korisničkog interfejsa prosledjujemo podake iz aplikacije interpolacijom ili direktivom v-bind. Svaki od navedenh pojedinačnih postupaka predstavlja prosledjivanja podataka u jednom smeru (eng. “one-way binding”). Medjutim polja za unos podataka su specifična, jer imaju potrebu za prosledjivanje podataka u oba smera (eng. “two-way binding”), stoga su na istom elementu potrebne obe direktive.
U narednom primeru se podaci iz forme prosledjuju data objektu sa “v-on:input” direktivom, dok se podaci izmenjeni iz same aplikacije ažuriraju vrednost u HTML inputu sa “v-bind:value” direktivom.

<div id="app"
    <input v-on:input="cuvarVrednosti = $event.target.value"   v-bind:value="cuvarVrednosti">
</div>
<script>
    new Vue({
      el: '#app',
      data: {
        cuvarVrednosti: 'neki tekst'
      }
      methods: {
        reset(){
          cuvarVrednosti = '';
        }
      }
    })
</script>

<div id="app"

</div>

new Vue({

el: '#app',

data: {

cuvarVrednosti: 'neki tekst'

}

methods: {

reset(){

cuvarVrednosti = '';

}

})

</script>

U okviru Vue.js postoji direktiva koja pokriva ovaj postupak pod nazivom “v-model”, sa čijim korišćenjem kod izgleda dosta jednostavnije, pa umesto:

<input v-on:input="cuvarVrednosti = $event.target.value"   v-bind:value="cuvarVrednosti">

1	<input v-on:input="cuvarVrednosti = $event.target.value" v-bind:value="cuvarVrednosti">

koristimo pregledniju i jednostavniju sintaksu:

<input v-model="cuvarVrednosti">

1	<input v-model="cuvarVrednosti">

Direktiva v-on:

Posted on 21/04/2018 at 00:10.Written by Dragoljub Živanović

Sintaksa

Vue pruža veoma lep način integrisanja event listener-a na bilo kom elementu DOM-a. Kao i kod ostalih metoda i event callback metode imaju direktan pristup Vue podacima koristeći “this” ključnu reč.

a) Standardna sintaksa

Da bismo event listener priključili bilo kojem HTML elementu, koristimo direktivu v-on: na koju nadovezujemo naziv vrste dogadjaja koji osluškujemo. Pored toga je potrebno da na kraju takve sintakse da “dodelimo” odgovarajuću event handler metodu.

<button v-on:click="nekiEventHandler"></button>
<script>
    let vm = new Vue ({
        methods: {
            nekiEventHandler : function (event) {
                console.log(event.target)
            }
        }
    });
</script>

let vm = new Vue ({

methods: {

nekiEventHandler : function (event) {

console.log(event.target)

}

});

</script>

Skraćeno pisanje sintakse

 <button @click="nekiEventHandler"></button>

1	<button @click="nekiEventHandler"></button>

b) Objektna sintaksa za više “zakačenih” dogadjaja

Ova sintaksa se koristi kada “kačimo” više različitih dogadjaja na isti elemenat

<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

1	<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

Direktiva v-bind:

Posted on 07/04/2018 at 13:33.Written by Dragoljub Živanović

Sintaksa

Kao što je pomenuto Vue.js može da dinamičiki generiše HTML koristeći neku od direktiva. Za dinamičko generisanje atributa HTML elementa se koristi direktiva “v-bind”.

v-bind:nekiHtmlAtribut="dataSvojstvo"

1	v-bind:nekiHtmlAtribut="dataSvojstvo"

Koristeći ovu direktivu možemo reaktivno da povežemo vrednost atributa sa “data” objektom:

Primer

<img v-bind:src="imageSrc">
<a   v-bind:href = "hreflink">...</a>
<div v-bind:title="message">...</div>
<div v-bind:class="nekaKlasa">...</div>
<div v-bind:style="{ color:red, min-width: sirina }">...</div>

<script>
new Vue({
  el: '#example',
  data: {
    imageSrc: "https://webprogramiranje.org/images/neka-slika.jpg",
    hreflink: "https://webprogramiranje.org",
    message: "Neka poruka",
    nekaKlasa: "podebljano",
    sirina: "4rem",
    }
});
</script>

new Vue({

el: '#example',

data: {

imageSrc: "https://webprogramiranje.org/images/neka-slika.jpg",

hreflink: "https://webprogramiranje.org",

message: "Neka poruka",

nekaKlasa: "podebljano",

sirina: "4rem",

}

});

</script>

Skraćeno pisanje direktive

Ova direktiva v-bind: ima skraćenu sintaksu koju predstavlja dvotačaka :

Primer

<a :href="url">...</a>

1	<a :href="url">...</a>