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“.
