Korisnik:PavleJovanovic01/pesak

Vue.js (Vju.džejes)

Vue.js je softver otvorenog koda koji spada u front-end JavaScript biblioteku čija se arhitektura zasniva na tome da se prezentacioni deo aplikacije odvoji od serverskog dela. Najčešće se koristi za izradu veb aplikacija, a može se koristiti i u izradi veb sajtova.

Napravljen je od strane programera Even Ju, a održavanjem ovog softvera pored njega bave se i mnogi drugi programeri koji koriste ovaj softver i žele da ga učine boljim.

Velika prednost Vue.js-a je ta što je moguće dodavanj samo modula koji su potrebni, za razliku od nekih drugih biblioteka sličnog tipa. Ta karakteristika omogućava mnogo manju veličinu krajnjeg koda i samim tim optimizovaniji i brži rad aplikacije.

Arhitektura ovog softverskog alata nam omogućava korišćenje komponenti za izradu našeg sajta/aplikacije. osnovne funkcije vju-a su fokusirane samo na prezentacioni deo aplikacije. Dodavanj bilo koje druge funkcionalnosti, kao što su: rutiranje, privremeno čuvanje podataka, ”građenje softvera,, , povlačenje podataka sa servera itd... se može izvršiti uključivanjem nekih od zvanično podržanih modula i paketa koji su drugi programeri napisali i objavili u okviru pokreta softver otvorenog koda.

Vju omogućava korišćenje klasične HTML sintakse i proširenom listom posebnih html tagova koji omogućavaju lakši način pisanja veb aplikacija.

Vju je trenotno na verziji 3.2 koja je izašla 5. Avgusta 2021. godine.

Komponente

Komponente su klljučni deo Vju biblioteke i omogućavaju ponovnog iskorišćavanja određenog dela koda koji je isti za različite delove aplikacije. Sastoje se od HTML dela, CSS dela i JavaScript dela. Mogu da prihvataju određene podatke koji se dalje koriste u kodu te aplikacije. Najveća prednost komponenti je to što je moguće kreirati ih samo jednom i jednostavno ih koristiti na više mesta i moguće je dodavati različite varijante istih.

Primer jedne Vju komponente:

<template>
  <div id="tuto">
    <button-clicked v-bind:initial-count="0"></button-clicked>
  </div>
</template>

<script>
Vue.component('button-clicked', {
  props: ['initialCount'],
  data: () => ({
    count: 0,
  }),
  template: '<button v-on:click="onClick">Clicked {{ count }} times</button>',
  computed: {
    countTimesTwo() {
      return this.count * 2;
    }
  },
  watch: {
    count(newValue, oldValue) {
      console.log(`The value of count is changed from ${oldValue} to ${newValue}.`);
    }
  },
  methods: {
    onClick() {
      this.count += 1;
    }
  },
  mounted() {
    this.count = this.initialCount;
  }
});

new Vue({
  el: '#tuto',
});
</script>

Šablon

šablon je deo u kome se nalazi HTML deo komponente i služi za prikaz podataka korisniku. Takođe je moguće ubaciti komande koje omogućavaju jednostavniji način interakcije sa elementima na stanici. Takve komande se bave stvarima kao što su šta se dešava kada se pređe mišem ili se klikne na određeni element. Sintaksa za ove komande je v-on: događaj na koji želimo da dodamo neku određenu funkciju. Isto tako u šablon može da se dodaju i podaci koji su definisani u JavaScript delu komponente.

Reaktivnost

Zahvaljujući arhitekturi i načinu na koji je Vju pisan, rutiranje i bilo koja druga funkcionalnost koja bi u aplikaciji pisanoj u vanila javascript-u izazvala ponovno učitavanje i potrebu da se sačeka određeno vreme da se komanda izvrši, izgleda kao da se izvršila bez bilo kakvog učitavanja što pruža mnogo bolji korisnički osećaj.