Uvod
Vue.js je MVVM framework, koji ima sistem kako da poveže “model” (podatke) sa odgovarajućim “view”. Sekcija “view” je kao i u drugim frontend bibliotekama ustvari HTML, ali sa dodatnim funkcionalnostima koje mu omogućavaju dinamičko prikazivanje model-a, a to su:
- “interpolacija”
- “direktive”
Deo HTML koda nad kojim se izvršava interpolacija se obeležava sa duplim vitičastim zagradam a takva sintaksa je poznata pod nazivom “Mustache syntax”. Sve što se nalazi u okviru duplih vitičastih zagrada će biti obradjeno od strane Vue.js i zamenjeno odgovarajućim rezultatom.
Interpolacija teksta
Ukoliko se izmedju zagrada nalazi tekst koji predstavlja neko svojstvo iz “data” objekta ova sintaksa će da prikaže u okviru HTML-a trenutnu vrednost iz tog svojstva. Pošto je “data” svojstvo specifično i ponaša se kao proxy prema vue instanci, nije potrebno koristi sintaksu this.data.svojstvo, već je dovoljan samo naziv svojsva. Najbitnija stvar vezana za interpolaciju teksta je da će Vue.js ponovno obraditi sve što je u okviru zagrada ukoliko dodje do promene podataka, nakon čega će automatski ažurirati HTML.
|
1 2 3 4 5 6 7 8 9 10 |
<p id="example">{{ message }}</p> <script> new Vue ({ el: "#example" data: { messsage: "Ovaj tekst treba da se izrenderuje!" } }); </script> |
Sa ovakvim načinom se interpretira “data” kao običan tekst, ne kao HTML. Ukoliko je potrebno da se evaulira HTML onda se koristi direktiva “v-html”. Treba naglastiti da se interpolacija teksta ne može koristiti za interpretaciju atributa HTML taga, za to je neophodno da se koristi direktiva “v-bind”.
Interpolacija JavaScript izraza
Kada se izmedju duplih vitičastih zagrada nadje neki JavaScript izraz i njega će Vue.js obraditi. Nakon obrade izraza unutar ovih duplih zagrada Vue.js vraća nešto što je prikaldno za DOM, nešto što se može konvertovati u string.
a) Interpolacija jednostavnog izraza
U okviru duplih vitičastih zagrada može da se nadje jednostavni JavaScript izraz koji će Vue.js obraditi i njegov rezultat izrenderovati na tom mestu. Ograničenje je da po jednom setu vitičastih zagrada može biti samo jedan JavaScript izraz, što znači da petlje i komplikovana logika nisu moguće. Stoga za komplikovanu logiku koristite “metode” ili “computed properties”.
Primer
|
1 2 3 |
{{ number + 1 }} // ili {{ ok ? 'YES' : 'NO' }} |
b) Interpolacija “method” svojstva
Mustache sintaksa se može koristi za prikazivanje rezultata odredjenje metode, a za to je dovoljno da se u okviru duplih vitičastih zagrada pozove željena metoda:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<p>{{ nekaMetoda() }}</p> <script> let vm = new Vue ({ data: { messsage: "Neki tekst" } methods: { nekaMetoda: function () { return this.message.split('').reverse().join('') } } }); </script> |
Vue.js će ponovo pozvati metodu pri svakom ponovnom renderovanju stranice.
c) Interpolacija “computed” svojstva
Ukoliko želimo da prikažemo rezultate nekog “computed” svojstva onda u okviru duplih vitičastih zagrada upisujemo samo njegov naziv (bez zagrada):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<p>{{ nekoComputedSvojstvo }}</p> <script> let vm = new Vue ({ data: { messege: "Hello" } computed: { nekoComputedSvojstvo : function () { return this.message.split('').reverse().join('') } } }); </script> |