Šta je Vue.js?

Posted on 04/12/2019 at 11:47.Written by Dragoljub Živanović

Šta je Vue.js?

Vue.js se izgovara /vjuː/, slično kao engleska reč view, a u oficijelnoj dokumentaciji kažu za njega da je progresivni JavaScript framework za izradu korisničkog interfejsa.

“Progressive framework for building user interfaces”.
Dokumentacija Vue.js

Vue.js se smatra da je jedan od najjednostavnijih JavaScript framework-a, koji je veoma brz, ima malu veličinu i veoma detaljnu dokumentaciju. Vue.js je veoma fleksibilan i prilagodljiv različitim vrstama projekata. U osnovnoj verziji je praktično library, i kao takav je primenjiv za male i srednje projekte, medjutim Vue.js dodavanjem odgovarajućih oficijalnih komponenati postaje full framework, i kao takav ima potencijal za izradu enterprise aplikacija.
Iako trenutno Vue.js nije još uvek popularan kao React (koji podržava Facebook) ili Angular 2 (koji podržava Google), njegova popularnost raste iz dana u dan, a Laravel community ga smatra za jedan od njihovih omiljenih front-end framework-a.

NAPOMENA:
U trenutku pisanja članka je bila aktuelna verzija 2.0, medjutim kasnije je izašla nova verzija 3.0 za koju i dalje važi većina tekstova ali ona ipak donosi sa sobom i brojne promene (pogledajte spisak promena na oficijelom sajtu). Kod najvećih promena sam se vratio i ažurirao sadržaj članaka dodajući objašnjena vezana i za 3.0 verziju ali ne i kod svih, tako da na čitaocu ostaje da prouči sve razlike.

Karakteristike i specifičnosti ruta

Posted on 04/07/2018 at 16:41.Written by Dragoljub Živanović

Svojstva “route” objekta

Vue rute

Objekat “route” sadrži sve informacije u vezi trenutne rute, kojim se uvek može pristupiti iz aplikacije preko nekog od njegovih svojstava:

$route.path – String koji je jednak putanji trenutne rute, uvek se rešava kao apsolutna putanja (npr. “/user/profile”).
$route.params – Objekt u vidu parova ključ/vrednost koji se koristi za vraćanje podataka iz dinamičkih ruta. Ako nema parametara, vrednost će biti prazan objekat.
$route.query – Objekt u vidu parova ključ/vrednost koji se koristi za vraćanje podataka query string-a.
$route.fullPath – full URL uključujući query i hash.
$route.matched – Niz koj sadrži zapise o putanji trenutne rute
$route.name – Ime trenutne rute ako mu je definisano
$route.redirectedFrom – Ime rute sa koje izvršena redirekcija ako postiji redirekcija

Query string

Query string je deo URL adrese koji je dodat na kraj standardne adrese nakon znaka pitanja (?) i sadrži podatke koji su obično u obliku parova key/value.

http://example.com/?bar1=a&bar2=b

1	http://example.com/?bar1=a&bar2=b

Preuzimanje podataka iz query string-a

Koristeći svojstvo rute “$route.query” možemo dobiti šta je poslato kroz query string u okviru URL adrese. Znak pitanja ne ulazi u sastav query string-a. Objekat $route.query sadrži key/value parove.

Primer

Za url adresu: /foo?user=1:

$route.query.user == 1

1	$route.query.user == 1

Ubacivanje podataka u query string

Jedan od načina za ubacivanje query parametara u rutu je kroz atribut “to”<router-link> taga:

<router-link tag="li" to="/user/?status=awesome">User B</router-link>

1	<router-link tag="li" to="/user/?status=awesome">User B</router-link>

Može da se koristi i objektna sintaksa:

<router-link :to="{name:'user', query:{status:'awesome'}}" >User</router-link>

1	<router-link :to="{name:'user', query:{status:'awesome'}}" >User</router-link>

Imenovane rute (named routes)

Vue ruter nudi mogućnost kreiranja tzv. imenovanih ruta, koje nam olakšavaju pozivanje tih ruta, jer se umesto putanje može koristiti dodeljeno ime. Imenovanje rute se vrši definisanjem svojstva “name”.

routes.js

export const routes = [
    {path: '/', component: Home, name: 'home'},
    {path: '/user', component: User, name: 'user'},
];

export const routes = [

{path: '/', component: Home, name: 'home'},

{path: '/user', component: User, name: 'user'},

];

Nakon definisanja svojstva “name”, ruti možemo da pristupimo veoma lako koristeći samo svjosto “name” bez korišćenja svojstva “path”:

<router-link :to="{name:'home'}" exact>Home</router-link>

1	<router-link :to="{name:'home'}" exact>Home</router-link>

ili

this.$router.push({name: 'home'});

1	this.$router.push({name: 'home'});

Dinamičke rute

U slučaju da imamo potrebu za velikim brojem stranica ali sa istom strukturom, gde se menjaju samo podaci na predvidjenim mestima (klasičan primer za to je “user stranica”, koja koristi isti template za sve user-e, ali sa različitim sadržajem), bilo bi glupo da za svaku stranicu pravimo novu rutu.
Iz tog razloga se kreiraju tzv. “dinamičke rute” koje će koristiti istu komponenti, ali sa različitim sadržajem koji zavisi od vrednosti koja se prosledi kao dinamički deo url adrese.

www.example/user/dinamickideo

1	www.example/user/dinamickideo

Definisanje dinamičke rute

U okviru Vue.js dinamički deo rute se definiše tako što se doda promenjiva kojoj prethodi dvotačka:

routes.js

export const routes = [
    {
        path: '/user/:id',
        name: 'user',
        component: User
    }
];

export const routes = [

{

path: '/user/:id',

component: User

}

];

Prikupljanje podataka iz dinamičke rute

Da bismo u okviru Vue.js iskoristili dinamički parametar iz rute, potrebno je da koristimo this.$route.params.dinamičikaPromenjiva (npr. this.$route.params.id).

Primer

U ovome primeru promenjiva “id” čuva vrednost dinamičkog dela rute.

<script>
    export default {
      data() {
        return {
          userId: this.$route.params.id
        }
      }
    }
</script>

export default {

data() {

return {

userId: this.$route.params.id

}

</script>

Primer prikupljanja podataka iz dinamičke rute

pattern	matched path	$route.params
/user/:id	/user/pera	{ id: 'pera' }

Primer prikupljanja podataka kod slučaja dve nestovane dinamičke rute:

pattern	matched path	$route.params
/user/:id/post/:post_id	/user/pera/post/123	{ id: 'pera', post_id: 123 }

watch “$route” objekat

U trenutku kada se već nalazimo na nekoj dinamičkoj ruti i želimo da menjanjem samo dinamičkkog dela url adrese učitamo novu stranicu (npr. idemo sa jednog user profila na drugi), javlja se problem jer Vue.js neće da učita novi sadržaj. Drugim rečima promena samo dinamičkog dela url-a neće naterati Vue.js da ponovo učita istu komponentu sa izmenjenim podacima.
Da bi smo rešili problem, moramo da pratimo (watch) $route objekat i na taj način obezbedimo da aplikacija reaguje i na promenu dinamičkog dela url adrese. Nakon promene “watcher” bi pozivao odgovarujuću callback funkciju.

Primer

U ovome primeru se prati promena $route objekta, i nakon promene poziva callback funkcija koja ažurira svojstvo “id” data objekta.

data() {
    return {
      userId: this.$route.params.id
    }
}
methods:{
    updateCallback () {
       this.userId = this.$route.params.id
    }
}
watch: {
   '$route': 'updateCallback'
}

data() {

return {

userId: this.$route.params.id

}

methods:{

updateCallback () {

this.userId = this.$route.params.id

}

watch: {

'$route': 'updateCallback'

}

Dinamičke rute & <router-link>

Za izlistavanje dinamičkih linkova je potrebno da prosledimo dinamičku rutu kroz atribut “params”.

Primer

Za dinamiču rutu:

{
    path: '/user/:id',
    name: 'user',
    component: User
}

{

path: '/user/:id',

component: User

}

se koristi sledeći kod za izlistavanje gde je neophodno da pored atributa “name” prosledimo dinamičku rutu kroz atribut “params” (promenjiva u dinamičkoj ruti je predstavljena sa :id):

<ul>
    <li v-for="izlistanId in userId" v-bind:key="id">
        <router-link :to="{ name: 'user', params: { id: izlistanId }"> User {{ izlistanId }} </router-link>
    </li>
</ul>

<ul>

<router-link :to="{ name: 'user', params: { id: izlistanId }"> User {{ izlistanId }} </router-link>

</li>

</ul>

Ugneždene rute

U slučaju kada stanica ima pod-stranice, onda želimo da kada korisnik dodje na glavnu stranu da im budu ponudjena nova navigacija (tzv. “pod-meni”) koji im omogućava da posete pod-stranice (npr.za glavnu stranu “user” podemeni sa stranicama “user-profil” i “user-edit)”. Pored toga želimo i da se URL adresa promeni u tom maniru. Da bismo to postigli, možemo koristiti ugnježene rute (eng. nested routes) )unutar komponente koja čini glavnu stranu.
Ugnježdene rute se dobijaju dodavanjem novog svojstva u ruti za glavnu stranicu pod nazivom “children”. Ovo svojvo je niz objekata koje sadrže pod-rute:

{path: '/user', component: User, children: [
        {path: '/', component: UserStartPage},
        {path: 'profil', component: Profil},
        {path: 'edit-profil', component: EditProfil}
    ]
}

{path: '/user', component: User, children: [

{path: '/', component: UserStartPage},

{path: 'profil', component: Profil},

{path: 'edit-profil', component: EditProfil}

]

}

Zatim je potrebno u okviru template glavne stranice (u ovome primeru “user”) da se ubacuje željna navigacija sa komponentom <router-view></router-view> :

Sada možemo da definišemo navigaciju ka ovim pod rutama:

<ul class="list-group">
    <router-link tag="li" to="/user/pera">User Pera</router-link>
    <router-link tag="li" to="/user/mika">User Mika</router-link>
</ul>

<router-link tag="li" to="/user/pera">User Pera</router-link>

<router-link tag="li" to="/user/mika">User Mika</router-link>

</ul>

Primer

Redirekcija rute

Globalna redirekcija

Preusmeravanje (redirekcija) podrazumeva da aplikacija preusmeri korisnika koji želi da poseti stranicu sa jednom rutom ( /a ), na neku drugu stranicu (npr. “b”). Nakon prosledjivanja na drugu stranicu aplikacija će promeniti i URL adresu u odgovarajuću (/b).

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

const router = new VueRouter({

routes: [

{ path: '/a', redirect: '/b' }

]

})

Sintaks kod imenovane (“named”) rute izgleda ovako:

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: { name: 'foo' }}
  ]
})

const router = new VueRouter({

routes: [

{ path: '/a', redirect: { name: 'foo' }}

]

})

Programirana redirekcija

Pod programiranom redirekcijom se podrazumeva slučaj kada želimo otvorimo odredjenu stranicu ali pod odredjenim uslovima (primer: otvaranje nove stranice nakon submita forme)

Primer $router.push()

U ovome primeru programerski definišemo promenu rute nakon klika na dugme sa metodom $router.push()

<template>
   <button @click="goHome">Početna strana</button>
</template>
<script>
    export default {
      methods: {
        goHome(){
          this.$router.push({name : "Home"})
        }
      }
    }
</script>

<button @click="goHome">Početna strana</button>

</template>

export default {

methods: {

goHome(){

this.$router.push({name : "Home"})

}

</script>

Primer $router.go()

U ovome primeru programerski definišemo promenu rute nakon klika na dugme sa metodom $router.go()

<template>
   <button @click="goBack">Nazad</button>
</template>
<script>
    export default {
      methods: {
        goBack(){
          this.$router.go(-1)
        }
      }
    }
</script>

<button @click="goBack">Nazad</button>

</template>

export default {

methods: {

goBack(){

this.$router.go(-1)

}

</script>

NAPOMENA:
Treba naglasiti da $router objekt ima i metode: $router.back() i$router.forward() za koje nije čak potrebno ni proslediti argument.

Osnove rutiranja sa Vue.js

Posted on 02/07/2018 at 08:59.Written by Dragoljub Živanović

Uvod u rutiranje aplikacija

route 66

U razvoju web aplikacija, rutiranje je vezano za razdvajanje korisničkog interfejsa. Deljenje aplikacije na više različitih stranica je neophodno radi lakšeg sagledavanja kompleksne aplikacije. U najgrubljim crtama rutiranje predstavlja definisanje pravila uz pomoć kojih se povezuje odgovarajući sadržaj sa zahtevom koji podnet posebnom URL adresom. Routiranje se često deli na dve glavne sekcije:

a) Routiranje na serveru (eng. server-side routing) podrazumeva da klijent podnosi zahtev serveru definisan sa URL adresom a server obavlja rutiranje (povezuje zahtev sa odgovarajućim sadržajem) i vraća zahtevani sadržaj.
b) Rutiranje na strani klijenta (eng. client-side routing) podrazumeva da klijent podnosi zahtev serveru samo pri inicijalnom učitavanju stranice, dok sve naknadne promene URL adrese prihvata javascript.

Tradicionalne “Single Page Aplication” (SPA) su web aplikacije koje se učitavaju samo jednom, a zatim se dinamično ažuriraju nakon interakcije sa korisnikom (bez narednih zahteva ka serveru). Kod njih se na početku dobija prazan HTML i JavaScript koji nakon toga sve dinamički generiše uključujući i stranice.
Nakon učitavanja prve stranice (obično index.html), Vue.js simulira promenu stranica, jer menja url adrese u prozoru brovsera, dok zapravo istovremeno samo re-renderuje početnu stranicu (index.html). Na taj način dočarava korisniku efekat da posećuje različite stranice, ali u stvarnosti, uvek je u pitanju ista stranica sa drugačijim sadržajem. Iz tog razloga se kaže da Vue.js izvršava “rutiranje na strani klijenta”.
Sa ovim je opisan tzv. ClientSide Rendering (CSR) tradicionalnih SPA aplikacija, ali treba znati da postoji i mogućnost ServerSide Rendering-a (SSR), kada server svaku stranu renderuje “on the fly” i vraća statičnu HTML stranu, nakon čega Vue.js preuzima kontrolu nad stranicom i udahnjuju je joj život. Pojavljivanje “pune” HTML stranice je najveća prednost serverskog renderovanja, jer pretraživači (google, bing…) mogu lako da pregledaju sadržaj, što nije slučaj kod renderovanja na klijentu gde dolazi prazan HTML a tek kasnije JavaScript renderuje DOM. Iz tog razlog se sa SSR-om se dobija bolji SEO. U Vue.js svetu za jednostavno server side renderovanje se koristi framework pod nazivom NUXT.js.

Instalacija ruter plugina

Oficijalni ruter ne dolazi uz osnovnu instalaciju Vue.js, već se mora naknadno ubaciti.

vue-cli & router

Može da se ubaci kao skripta distribuirana preko CDN mreže, stoga je dovoljno je da se na dnu body sekcije posle skripte za sam Vue.js ubaci i skripta sa uvek najnovijim izdanjem rutera:
<script src=" https://unpkg.com/vue-router/dist/vue-router.js"></script>
Kada se koristi “vue-cli” za brzo kreiranje starter projekta, onda se ruter plugin može instalirati zajedno sa instalacijom Vue.js, ukoliko se izabere opcija koja uključuje i ruter (pogledaj sliku).
Za već postojeći Vue.js projekat ga možemo naknadno samostalno instalirati koristeći neki od package manager-a:
- npm
- yarn
npm install --save vue-router

1

npm install --save vue-router

yarn add vue-router

1

yarn add vue-router

Kreiranje router instance i injektovanje u aplikaciju

a) Obaveštavanje aplikacije da postoji ruter plugin

Prva stvar koju mmoramo da uradimo je da importujemo ruter plugin u glavni javascript fajl gde nam se nalazi glavna vue instaca, a zatim da obavestiom aplikaciju da treba da je koristi ( Vue.use(VueRouter);).

main.js

import VueRouter from 'vue-router';

Vue.use(VueRouter);

import VueRouter from 'vue-router';

Vue.use(VueRouter);

b) Kreiranje instance rutera

Pri kreiranju instance rutera konstruktorskoj funkciji se prosledjuje tzv. options objekat koji sadrži podatke o rutama (za koju url adresu je vezana koja komponenta).

new VueRouter(optionObjekat);

1	new VueRouter(optionObjekat);

a) Definisanje ruta (za otpions objekat)

Glavno svojstvo ovog “options objekta” je “routes”. Svojstvo “routes” je niz koji sadrži podatke o rutama, i predstavljen je kao niz objekata, gde svaki objekat definiše jednu rutu. Jednu rutu definišu dva osnovna svojstva: “path” i “component”. U svojstvu path se definiše url adresa, a u svojstvu component naziv komponente koja čuva sadržaj za tu rutu

optionObjekat

{
    routes : [
        {path: '/page-one', component: PageOne},
        {path: '/page-two', component: PageTwo}
    ]
}

{

routes : [

{path: '/page-one', component: PageOne},

{path: '/page-two', component: PageTwo}

]

}

Svojstvo “routes” predstavlja sve rute i zbog bolje organizacije je preporuka da se izdvoji na jednu lokaciju (npr. fajl routes.js.). A da bi rute bile dostupne u celoj aplikaciji potrebno je iz tog fajla eksportovati jednu promenjivu koja će predstavljati sve naše rute.

routes.js

import PageOne from './components/PageOne';
import PageTwo from './components/PageTwo';

export const routes = [
    {path: '/page-one', component: PageOne},
    {path: '/page-two', component: PageTwo}
];

import PageOne from './components/PageOne';

import PageTwo from './components/PageTwo';

export const routes = [

{path: '/page-one', component: PageOne},

{path: '/page-two', component: PageTwo}

];

NAPOMENA:
Spisak svih svojstava rute možete pogledati u dokumentaciji u sekciji “route-object-properties”

b) Kreiranje instance

Za kreiranje instance je potrebno konstruktorskoj funkciji proslediti objekat koji ima definisano svojstvo “routes”. Svojstvo “rutes” (tzv. ““niz svih ruta”) je obično kreiran u zasebnom fajlu, pa ga moramo prvo importovati u fajl gde kreiramo instancu (obično main.js).

main.js

// Importovanje niza ruta koji se prosledjuje novoj router instanci
import {routes} from './routes';

// Kreiranje nove ruter instance kojoj je prosledjen option niza
const router = new VueRouter({routes});

// Importovanje niza ruta koji se prosledjuje novoj router instanci

import {routes} from './routes';

// Kreiranje nove ruter instance kojoj je prosledjen option niza

const router = new VueRouter({routes});

c) Injektovanje rutera u aplikaciju

Prosledjivanjem ruter instance kao svojstvo u glavnu Vue instancu smo izvršili injektovanje rutera. Injektovanje rutera podrazumeva da su karakteristike ruter objekta od tog trenutka dostupne u svakoj komponenti sa this.$router, a trenutna ruta sa this.$route.

main.js

new Vue({
    el: '#app',
    // Injektovanje rutera
    router,
    render: h => h(App)
});

new Vue({

el: '#app',

// Injektovanje rutera

router,

render: h => h(App)

});

Sa injektovanjem rutera smo definitivno završili povezivanje rutera i aplikacje, pa bi krajnji main.js mogao ovako da izgleda:

main.js

import Vue from 'vue'
import VueRouter from 'vue-router';
import App from './App.vue'
import {routes} from './routes';

Vue.use(VueRouter);
const router = new VueRouter({routes});

new Vue({
    el: '#app',
    router,
    render: h => h(App)
});

import Vue from 'vue'

import VueRouter from 'vue-router';

import App from './App.vue'

import {routes} from './routes';

Vue.use(VueRouter);

const router = new VueRouter({routes});

new Vue({

el: '#app',

router,

render: h => h(App)

});

NAPOMENA:
Spisak svih metoda Ruouter instance možete pogledati u dokumentaciji u sekciji “router-instance-methods”

Definisanje mesta gde se prikazuje sadržaj

Poznato je da Vue.js simulira promenu stranica, tako što pri promeni url adrese samo re-renderuje početnu stranicu (index.html) ali sa novim sadržajem. Stoga se mora definisati mesto gde će se prikazati sadržaj koji zavisi od url adrese, a to se postiže sa
<router-view></router-view>

App.vue

<template>
    <div class="container">
        <router-view></router-view>
    </div>
</template>

<router-view></router-view>

</div>

</template>

Dodavanje linkova

I način: deklarativno ubacivanje linkova sa <router-link>

Za deklarativno linkovanje ruta koristimo za to predvidjenu komponentu <router-link>. Ova komponenta se renderuje kao <a> element u pretraživaču.

<router-link>Click for Page 1</router-link>
<router-link>Click for Page 2</router-link>

1 2	<router-link>Click for Page 1</router-link> <router-link>Click for Page 2</router-link>

NAPOMENA:
Komponenra <router-link> nema koa link tipično podešeno svojstvo kursora na hover elementa cursor: pointer;, te je potrebno to definisati u CSS-u.

atribut “to”

Pošto se ova komponenta renderuje kao link tj. <a> element, potrebno je dodeli ti mu adresu na kojuće da vodi, u slučaju <router-link&gt komponente se ne koristiti poznati href atribut već novi specijalizovan pod intuitivnim nazivom “to”:

<!-- literal string -->
<router-link to="home">Home</router-link>
<!-- renders to -->
<a href="home">Home</a>

<!-- javascript expression using `v-bind` -->
<router-link v-bind:to="'home'">Home</router-link>

<!-- Omitting `v-bind` is fine, just as binding any other prop -->
<router-link :to="'home'">Home</router-link>

<!-- same as above -->
<router-link :to="{ path: 'home' }">Home</router-link>

<!-- named route -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

<!-- with query, resulting in `/register?plan=private` -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

<router-link to="home">Home</router-link>

<router-link v-bind:to="'home'">Home</router-link>

<router-link :to="'home'">Home</router-link>

<router-link :to="{ path: 'home' }">Home</router-link>

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

Stilizovanje aktivnog linka

Stilizovanje aktivnog <router-link> taga je veoma jednostavno i predstavlja veliku prednost u odnosu na običan <a></a> tag. Sve što je potrebno je da na svaki tag <router-link>, primenimo atribut “active-class”, nakon čega Vue.js vodi računa i kada je veza aktivna. Ako je link aktivan, Vue.js će linku dodati odgovarajuću CSS klasu, a naše je samo da ubacimo kod u tu klasu i tako stilizujemo aktivan link.
Elementu mogu da se dodaju dve klase:

“router-link-active” – Ova klasa je uvek prisutna, čak i kada su njegovi podlinkovi aktivni. To znači da će “user” link (/user) biti aktivan čak ako je aktivna i njegova podstranica (/user/234)
“router-link-exact-active” – Ova klasa je prisutna samo ako je baš taj link aktivan.

Atribut “exact”

Attribut exact se koristi da bismo bili sigurni da se aktivna klasa primenjuje samo na početnu stranicu tj. samo kada je početna stranica aktivna. U suprotnom, link za početnu stranu će biti aktivan čak i kada kliknete na neku drugu stranicu.

NAPOMENA:
Spisak svih <router-link> atributa možete pogledati u dokumentaciji u sekciji “router-link-props”

Obično se svi linkovi ka stranicama grupišu na jednom mestu na stranici, pa je zgodno da se takodje i kod koji je vezan za navigaciju grupiše u jedan fajl/komponentu (npr.Navigation.vue).

Navigation.vue

<template>
    <div>
        <ul class="nav">
            <li class="nav-item">
                <router-link to="/" class="nav-link" active-class="active" exact>Home</router-link>
            </li>
            <li class="nav-item">
                <router-link to="/page-one" class="nav-link" active-class="active">Page One</router-link>
            </li>
            <li class="nav-item">
                <router-link to="/page-two" class="nav-link" active-class="active">Page Two</router-link>
            </li>
        </ul>
        <hr>
    </div>
</template>

<div>

<router-link to="/" class="nav-link" active-class="active" exact>Home</router-link>

</li>

<router-link to="/page-one" class="nav-link" active-class="active">Page One</router-link>

</li>

<router-link to="/page-two" class="nav-link" active-class="active">Page Two</router-link>

</li>

</ul>

<hr>

</div>

</template>

II način: programirano ubacivanje linkova sa router.push()

Programski način podrazumeva korišćenje metode ruter objekat pod nazivom push ().

Sintaksa

router.push(location, onComplete?, onAbort?)

1	router.push(location, onComplete?, onAbort?)

Glavni parametar koji je obavezan ukazuje na putanju gde treba da odvede link, dok će opcione callback funkcije (onComplete() ili onAbort()) biti pozvane kada je navigacija uspešno završena ili prekinuta.

// literal string path
router.push('home')

// object
router.push({ path: 'home' })

// named route
router.push({ name: 'user', params: { userId: 123 }})

// with query, resulting in /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

// literal string path

router.push('home')

// object

router.push({ path: 'home' })

// named route

router.push({ name: 'user', params: { userId: 123 }})

// with query, resulting in /register?plan=private

router.push({ path: 'register', query: { plan: 'private' }})

Ovaj metod ubacuje novu stavku u istoriju, tako da kada korisnik klikne na back dugme, biva prebačen na prethodni URL.

Primer – PageTwo.js

<template>
    <button @click="pushHome" class="btn">Go Home</button>
</template>

<script>
    export default {
      methods: {
        pushHome() {
          this.$router.push('/');
        }
      }
    }
</script>

</template>

export default {

methods: {

pushHome() {

this.$router.push('/');

}

</script>

Ovaj metod omogućava nam da potisnemo put na stack postojećih ruta. Ovo osigurava da dugmad za nazad i napred pretraživača nastavi da funkcioniše u redu. Takođe, obratite pažnju da smo jednostavno prošli niz predstavljanje rute kojom želimo da se krećemo. Takođe možete proći objekat kao {put: ‘/’} ako želite.

Primer objašnjenog postupka

Animacija više elemenata odjednom “transition-group”

Posted on 25/06/2018 at 20:26.Written by Dragoljub Živanović

Uvod

group animation

Renderovanje liste se veoma često koristi u programiranju, najčešće je to dinamičko prikazivanje listi kada se renderuje serija slično grupisanih informacija.
U ovom članku je objašnjeno kako animirati takve liste sa Vue.js frameworkom. Za animaciju više elemenata ne možemo koristiti komponentu “transition”, jer ona može da “obavije” SAMO JEDAN HTML element, stoga Vue.js uvodi novi tip wrapper komponente, pod nazivom <transition-group>.
Ova komponenta uz odredjena pravila podržava animiranje više HTML elemenata u okviru jednog tranisition bloka. Potrebno definisati atribut kroz koji se definiše kako će se renderovati wrapper element i jedinstveno obeležiti svaki član liste.

<transition-group name="list">
    <p>Element liste br.1</p>
    <p>Element liste br.2</p>
    <p>Element liste br.3</p>
    <p>Element liste br.4</p>
    <p>Element liste br.5</p>
        ...
</transition-group>

<transition-group name="list">

<p>Element liste br.1</p>

<p>Element liste br.2</p>

<p>Element liste br.3</p>

<p>Element liste br.4</p>

<p>Element liste br.5</p>

...

</transition-group>

Komponenta <transition-group> može da animira pojavljivanje i nestajanje elementa sa već pominjanim CSS klasama koje Vue.js automatski generiše isto kao kod komponente <transition>.

…-enter
…-enter-active
…-enter-to
…-leave
…-leave-active
…-leave-to

Karakteristike “transition-group”

Atribut “key”

Jedna od obavezujućih stvari pri korišćenju komponente <transition-group> je jedinstveno obeležavanje svakog elementa liste, da bi ih Vue.js razlikovao. Stoga je nepohodno svakom elementa liste definisati atribut “key” i dodeliti mu jedinstvenu vrednost.

<transition-group name="list">
    <p key="item1" >Element liste br.1</p>
    <p key="item2" >Element liste br.2</p>
    <p key="item3" >Element liste br.3</p>
    <p key="item4" >Element liste br.4</p>
    <p key="item5" >Element liste br.5</p>
</transition-group>

<transition-group name="list">

<p key="item1" >Element liste br.1</p>

<p key="item2" >Element liste br.2</p>

<p key="item3" >Element liste br.3</p>

<p key="item4" >Element liste br.4</p>

<p key="item5" >Element liste br.5</p>

</transition-group>

Primer

U ovome primeru je animirano nestajanje elementa, korišćenjem klasa koje generiše Vue.js: .remove-list-enter-active, .remove-list-leave-active, .remove-list-enter i .remove-list-leave-to

See the Pen Animacija liste sa “transition-group” – basic by Web programiranje (@chos) on CodePen.

Ovde je animirano samo nestajanje jednog elementa, ali NIJE animirano i zauzimanje upražnjenog mesta. Postoji mogućnost da se i to pomeranje ostatka liste animira, ali to je objašnjeno u sekciji “Animacija promene pozicije elemnata”

Atribut “tag”

Za razliku od komponente <transition> koja se ne renderuje u DOM-u, komponenta <transition-group> se renderuje. Podrazumevano ponašanje wrappera (“transiton-group” tag-a) je da bude renderovan kao <span> element.

transition-group je span tag

Na sreću ovo defaultno ponašanje je moguće promeniti. Da bi izbegli renderovanje “span” elementa, potrebno je da definišemo vrstu elementa koji želimo da bude. Ovo se postiže definisanjem vrednosti za “tag” atribut.

Primer

U ovome primeru se preko “tag” atributa definiše da će komponenta <transition-group> u DOM-u biti renderovana kao “ul” tag:

<transition-group name="list&quot tag="ul" ;>
   // lista elemenata
</transition-group>

<transition-group name="list&quot tag="ul" ;>

// lista elemenata

</transition-group>

Animacija promene pozicije elemnata

Pored “običnog” animiranja sa standardnim Vue.js klasama (…-enter, …-leave…), komponenta <transition-group> može da animira i promenu u položaja elementa (ubacivanje i izbacivanje elementa iz liste…). Ova funkcionalnost se dobija definisanjem svojstava za animaciju kroz novu CSS klasu, pod imenom …-move. Ovu CSS klasu u pozadini generiše Vue.js samo za ovu namenu, da bi se kroz nju definisala animacija elemenata liste koji menjaju iz nekog razloga svoje pozicije. Kao i kod drugih klasa koje generiše Vue.js i kod ove će se prefiks podudarati sa vrednosti atributa “name“.

.nameTransitionElemnta-move{
    ...         // npr. transition: all 1s;
}

.nameTransitionElemnta-move{

... // npr. transition: all 1s;

}

NAPOMENA:
Animacija definisana na ovaj način neće raditi ukoliko elementi imaju setovanu vrednost CSS svojstva display: inline

Ovo je sasvim dovoljno za animiranje kretanja elementa koji menja mesto u listi ili se ubacuje u listu, medjutim ne i za animaciju kretanja pri izbacivanju elementa sa liste. Razlog je što element koji nestaje zbog svoje animacije koja traje ne oslobadja mesto drugim elementima liste. Stoga dok god taj elemenat potpuno ne nestane animacija ne može biti izvršena.
Rešenje za ovo je da u momentu dok je aktivna klasa …-leave-active definišemo vrednost position svojstva kao “absolute”.

....-leave-active {
  transition: all 1s;
  position:absolute;
}

....-leave-active {

transition: all 1s;

position:absolute;

}

Primer

U ovome primeru elementi menjaju poziciju i to kretanje je animirano iskorišćavanjem CSS klase koju generiše Vue.js pod naziovom .flip-list-move:

See the Pen Animacija liste sa “transition-group” by Web programiranje (@chos) on CodePen.

Primer

U ovome primeru je iskorišćena klasa koju generiše Vue.js .remove-list-move, gde je kroz nju definisana animacija pomeranja elemenata (paralelno sa animacijom nestajanja elementa). Ovo pomeranje je omogućeno definisanjem position svojstva “absolute” odmah nakon što je animacija nestajanja započeta kroz klasu .remove-list-leave-active, jer je na taj način oslobadjen prostor gde se nalazi element koju nestaje i pre nego što potpuno nestane.

See the Pen Animacija liste sa “transition-group” – remove item by Web programiranje (@chos) on CodePen.

Tranzicija pri zameni elemenata sa Vue.js

Posted on 24/06/2018 at 20:22.Written by Dragoljub Živanović

Tranzicija pri zameni elemenata različitog tipa

Tranzicija koja se dešava pri zameni dva elementa različitog tipa je veoma jedanostavna, dovoljno je da se oba elementa obaviju sa transition elementom.

Primer

See the Pen Osnovna tranzicija izmedju elemenata by Web programiranje (@chos) on CodePen.

Transition Modes

vue

Pri tranziciji u prethodnom primeru se promena svojstva na oba elementa dešava istovremeno. Usled čega su oba elementa vidljiva za vreme animacije (što nije baš najlepše). Novi element koji tek treba da se prikaže je uvek pozicioniran ispod elementa koji nestaje. Neprirodno je to što taj elemenat dolazi na pravo mesto tek kada prvi element skroz nestane tj. kada se završi animacija (pa se tada primeti skok elementa).
Da bi se izbeglo ovakvo ružno ponašanje potrebno je da elemenat koji nestaje potpuno završi animaciju, pre nego što počne animacija elementa koji se pojavljuje. Vue.js ovo postiže definisanjem tzv. moda tranzicije.
Postoje dve mogućnosti za vrednost atributa “mode”:

out-in – trenutno vidljivi element prvi izvodi animaciju, pa tek po završetku te animacije započinje animacija novog elementa. Ovaj mod se koristi u većini slučajeva!
in-out – Prvo animaciju izvodi novi element, pa tek po završetku te animacije započinje animacija postojećeg elementa.

Stoga je dovoljno definisati vrednost atributa mode sa jednom od dve ponudjene vrednosti.

Primer

U ovome primeru je transiton elementu dodat atribut mode="out-in"

See the Pen Mod tranzicije izmedju elemenata by Web programiranje (@chos) on CodePen.

Tranzicija pri zameni elemenata istog tipa

Ukoliko se smenjuju dva elementa različitog tip (npr. “p” i “div”) tranzicija će se izvršiti, medjutim ako se smenjuju elementi istog tipa potrebno je dodati atribut “key” sa različitim vrednostima za svaki element da bi ih Vue.js razlikovao!

<transition>
  <button v-if="isEditing" key="save">
    Sačuvaj
  </button>
  <button v-else key="edit">
    Edituj
  </button>
</transition>

Sačuvaj

</button>

Edituj

</button>

</transition>

Zbog ovoga možemo izbaciti v-if i uraditi tranziciju izmedju dva stanja atributa “key”:

<transition>
  <button v-bind:key="isEditing">
    {{ isEditing ? 'Sačuvaj' : 'Edituj' }}
  </button>
</transition>

</button>

</transition>

Tranzicija izmedju komponenti

Tranzicija izmedju komponenti je čak jednostavnija od obične tranzicije izmedju istih elemenata jer ne zahteva atribut “key”:

HTML

<transition name="component-fade" mode="out-in">
  <component v-bind:is="view"></component>
</transition>

</transition>

JavaScript

new Vue({
  el: '#transition-components-demo',
  data: {
    view: 'v-a'
  },
  components: {
    'v-a': {
      template: '<div>Component A</div>'``
    },
    'v-b': {
      template: '<div>Component B</div>'
    }
  }
})

new Vue({

el: '#transition-components-demo',

data: {

view: 'v-a'

components: {

'v-a': {

'v-b': {

}

})

Osnove animacije sa Vue.js

Posted on 21/06/2018 at 11:09.Written by Dragoljub Živanović

Uvod

vue animacija

Vue.js ima mehanizme za jednostavno integrisanje CSS animacije nad HTML elementom. Vue.js omogućava CSS animaciju tako što automatski dodaje specifične klase HTML elementu u odredjenem trenutku animacije, nakon čega možemo preko njih da se definišemo CSS svojstva za animaciju.
Pored toga Vue.js omogućava animaciju sa JavaScript-om jer sa “transition hooks” (“custom events” koje “okida” Vue.js prema utvrdjenom tajmingu animacije) omogućava korišćenje JavaScript-a za direktnu manipulaciju DOM-om.
Takodje uz Vue.js postoji mogućnost da se jednostavno integrišu 3rd-party CSS biblioteke za animaciju (npr. Animate.css) ili 3rd-party JavaScript biblioteke za animaciju (npr. Velocity.js ili GreenSock).

Vue.js & CSS animacija

Da bi sa Vue.js kontrolisali animaciju (bilo CSS-om ili JavaScript-om) potrebno je da “obajvijemo” HTML elementat sa <transition> elementom kome definišemo atribut name radi targetiranja samog elementa.

<transition name="ime-elementa-tranzicije">
    //HTML element koji se animira
</transition>

//HTML element koji se animira

</transition>

NAPOMENA:
U okviru transition wrapper tag-a može biti SAMO JEDAN HTML element, ustvari može biti više elemenata ali je samo jedan može biti prikazan u jednom trentku (pri korišćenju v-if ili v-show).

Nakon implementacije “transition” elementa kao wrapper-a, Vue.js će automatski proveravati da li je na elementu primenjena CSS svojstva “transition” ili “animation”, a ako ih pronadje onda Vue.js dodaje a zatim i uklanja njegove specifične CSS klase u odgovarajućim vremenskom tajmingu. Animacija je podeljena na dva dela: “enter” i “leave”. Deo “enter” se dešava kada se komponenta prikazuje, dok deo “leave” predstavlja animaciju kada se element uklanja. Svaki od delova ima po tri klase tako da Vue.js tokom svake CSS animacije dodaje/uklanja sledećih 6 klasa. Svaka od klasa dobija prefiks prema nazivu tranzicije (name=”nazivElementaTranzicije”):

imeElementaTranzicije-enter
Ovo je početno stanje za unos CSS klasa se dodaje pre nego što je element umetnut. Ova klasa nestaje nakon prvog frame-a animacije.
imeElementaTranzicije-enter-active
Ova klasa se primenjuje se tokom cele faze ulaska (klasa se dodaje pre nego što je element umetnut, a uklanja kada se završi tranzicija / animacija). Ova klasa se koristiti za definisanje trajanja, funkcije animacije i odlaganja animacije.
imeElementaTranzicije-enter-to
Ova klasa se dodaje jedan frame nakon što je element umetnut (odmah nakon što je klasa “imeElementaTranzicije-enter” uklonjena), a uklanja se po završtetku animacije.

imeElementaTranzicije-leave
Ova klasa se dodaje kad se aktivira animacija, a uklanja se nakon prvog frame-a.
imeElementaTranzicije-leave-active
Ova klasa se primenjuje tokom čitave faze “leave”. Dodaje se odmah po aktiviranju animacije, a uklanja se nakon završetka animacije. U ovoj klasi se vrši definisanje vremenskog trajanja, funkcije animacije i odlaganja animacije.
imeElementaTranzicije-leave-to

Ova klasa se dodaje jedan frame nakon što je element umetnut (odmah nakon što je klasa “imeElementaTranzicije-leave” uklonjena), a uklanja se po završtetku animacije.

klase za tranziciju vue.js

Zaključak:

…-enter bi trebao da sadrži startni stajling elementa koji počinje da se pojavljuje
…-leave bi trebao da sadrži startni stajling elementa koji počinje da nestaje

…-enter-active & …-leave-active se koristi da definiše svojstva animacije (transition/animation)

…-enter-to bi trebao da sadrži krajnji stajling elementa koji se pojavio
…-leave-to bi trebao da sadrži krajnji stajling elementa koji je nestao

Primer

U ovome primeru se nakon klika izvršava postepeno nestajanje/pojavljivanje teksta koristeći tranziciju transition: opacity 5s;

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

Ono što je bitno za shvatanje animacije sa Vue.js, je ubacivanje a zatim i izbacivanje specifičnih klasa prema odgovarajućem tajmingu.

vue animacija dodavanje klasa

CSS svojstva “transition” i “animation” na istom elementu

Ukoliko iz nekog razloga na jednom elementu primenjena zajedno svojstva “transition” i “animation” (npr. CSS animaciju pokreće Vue.js, a hover efekat 3rd party biblioteka), i ta svojstva imaju različite dužine trajanja, potrebno je definisati glavno svojstvo (čija dužina trajanja se primenjuje). Ovo se postiže dodavanjem atributa “type”. Vrednost atributa “type” definiše koje CSS svojstvo je glavno (type=”animation” ili type=”transition”).

<transition name="ime-elementa-tranzicije" type="animation" >
    //HTML element koji se animira
</transition>

//HTML element koji se animira

</transition>

NAPOMENA:
Jedina razlika izmedju CSS svojstava “transition” i “animation” je što se klasa “…-enter” ne uklanja odmah nakon umetanja elemenata, već nakon što se završi animacija (kada se “okine” događaj “animationend”).

Inicijalna animacija pri učitavanju

Ukoliko želimo da se animacija izvede odmah pri učitavanju strane, potrebno je da se transition elementu doda atribut “appear”:

<transition appear>
  <!-- ... -->
</transition>

</transition>

Primer

U ovome primeru se aktivira animacija odmah po učitavanju:

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

Vue.js & JavaScript animacija

Za animaciju sa JavaScript-om su obezbedjene udice (eng. “hooks”) na koje možemo da se nakačimo:

before-enter
enter
after-enter
enter-cancelled
before-leave
leave
after-leave
leave-cancelled

Ove tzv. udice su ustvari “custom events” koje “okida” Vue.js element <transition></transition> prema utvrdjenom tajmingu vezanom za animacije. Po “okidanju” odgovarajućih dogadjaja se mogu pozvati pripremljene metode. Ove metode mogu se koristiti samostalno ili u saradnji sa CSS svojstvima transitions/animations:

HTML

<transition
        v-on:before-enter="beforeEnter"
        v-on:enter="enter"
        v-on:after-enter="afterEnter"
        v-on:enter-cancelled="enterCancelled"

        v-on:before-leave="beforeLeave"
        v-on:leave="leave"
        v-on:after-leave="afterLeave"
        v-on:leave-cancelled="leaveCancelled">
</transition>

<transition

v-on:before-enter="beforeEnter"

v-on:enter="enter"

v-on:after-enter="afterEnter"

v-on:enter-cancelled="enterCancelled"

v-on:before-leave="beforeLeave"

v-on:leave="leave"

v-on:after-leave="afterLeave"

v-on:leave-cancelled="leaveCancelled">

</transition>

JavaScript

methods: {
  beforeEnter: function (el) {
    // ...
  },
  enter: function (el, done) {
    // ...
    done()          // Ova callback funkcija je obavezna samo ako se koristi javascript bez CSS-a
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },
  beforeLeave: function (el) {
    // ...
  },
  leave: function (el, done) {
    // ...
    done()         // Ova callback funkcija je obavezna samo ako se koristi javascript bez CSS-a
  },
  afterLeave: function (el) {
    // ...
  },
  leaveCancelled: function (el) {  // Ova metoda se koristi samo sa v-show
    // ...
  }
}

methods: {

beforeEnter: function (el) {

// ...

enter: function (el, done) {

// ...

done() // Ova callback funkcija je obavezna samo ako se koristi javascript bez CSS-a

afterEnter: function (el) {

// ...

enterCancelled: function (el) {

// ...

beforeLeave: function (el) {

// ...

leave: function (el, done) {

// ...

done() // Ova callback funkcija je obavezna samo ako se koristi javascript bez CSS-a

afterLeave: function (el) {

// ...

leaveCancelled: function (el) { // Ova metoda se koristi samo sa v-show

// ...

}

NAPOMENA:
Calback funkcija “done()” je obavezna u slučaju da koristimo samo JavaScript bez CSS-a (ovo je bitno jer tada Vue.js ne zna kada je gotova animacija). Takodje je poželjno dodati v-bind:css=”false” čime govorimo Vue.js da nema CSS tranzicije i da ne troši vreme i resurse proveravajući.
U slučaju da se pored animacije sa JavaScript-om koristi i animacija sa CSS-om onda nije potrebna callback funkcija “done()” jer onda Vue.js zna kada je gotova animacija.

Primer

U ovome primeru je obradjena animacija samo sa JavaScript-om, bez CSS-a (treba napomenuti da ovo baš i nije praksa, jer se najčešće koristi kombinacija JavaScript i CSS animacije).

See the Pen Animacija samo sa JavaScript-om by Web programiranje (@chos) on CodePen.

Vue.jd & 3rd party bibilioteke za animaciju

Vue.js trasition sistem nudi mnogo jednostavnih načina za animiranje pojavljivanja (enter) i nestajanja (leaving) elemenata, medjutim Vue.js može da animira i brojeve i sve što može biti konvertovano u brojeve stim što je za to neophodna pomoć 3rd party biblioteka (npr. GSAP, Velocity.js…) .

Tako koristeći GSAP-ovu “TweenLite” biblioteku možemo da primenimo “easing” funkcije pri promeni stanja neke promenjive, a Vue.js će nam omogućiti brzu reaktivnost i primeniti je na DOM.

Primer

U ovome primeru watcher nam omogućava da u saradnji sa GSAP-ovim “TweenLite” animiramo promene bilo kog stanja numeričke promenjive.

See the Pen Animacija brojeva sa GSAP by Web programiranje (@chos) on CodePen.

Primer

U ovome primeru koristim jednostavnu animaciju koja podrazumeva translaciju elementa duž “x” ose iz početne pozicije udaljenu 280px od predefinisanog krajenjeg položaja. Za easy funkciju se koristi tip pod nazivom “bounce”.

See the Pen Animacija samo sa GSAP by Web programiranje (@chos) on CodePen.

NAPOMENA:
GSAP biblioteka nam omogućava da pozovemo callback funkciju u odgovarajućem trenutku animacije:
“onComplete”, “onUpdate”, “onStart” i “onRepeat”.

methods:{
    enter(el, done){
      TweenMax.to(el, 1, {x:280,  ease: Bounce.easeOut, onComplete:this.nekaCallbackFunkcija});
    },
    nekaCallbackFunkcija: function(){
      console.log("Pozvana je callback funkcija po okončanju animacije");
    }
  }

methods:{

enter(el, done){

TweenMax.to(el, 1, {x:280, ease: Bounce.easeOut, onComplete:this.nekaCallbackFunkcija});

nekaCallbackFunkcija: function(){

console.log("Pozvana je callback funkcija po okončanju animacije");

}

Primer

U ovome primeru se koristi GSAP metoda “staggerFrom” koja nam omogućava jednostavno definisanje animacije za više elemenata sa odgovarajućim odlaganjem (eng. delay) animacije za svaki element u kontejneru ponaosob.

See the Pen Vuejs and GSAP stagger by Web programiranje (@chos) on CodePen.

Filtriranje sa Vue.js

Posted on 08/06/2018 at 09:07.Written by Dragoljub Živanović

Uvod

Vue filter je u suštini funkcija koja uzima vrednost, obrađuje je, a zatim vraća obrađenu vrednost. Filteri nisu zamene za metode, computed properties ili watch svojstva, jer filteri ne transformišu podatke, već samo transformiše izlaz koji korisnik vidi.

Vue.js filteri

Filteri mogu da se nadovezuju jedan na drugi i kao sve funkcije mogu da prime argumente. Kada se koristi filter, njegov kontekst je postavljen na instancu koja se poziva na njega, stoga i ključna reč “this” ukazuje na nju.

Spisak sajtova koji nude pripremljene filtere:

Registrovanje filtera

Filteri mogu da se registruju globalno i lokalno.

Lokalno registrovanje

filters: {
  filterName(value) {
    return // thing to transform
  }
}

filters: {

filterName(value) {

return // thing to transform

}

Globalno registrovanje

Vue.filter('filterName', function(value) {
  return // thing to transform
});

Vue.filter('filterName', function(value) {

return // thing to transform

});

NAPOMENA:
Kod koji definiše filter globalno mora da bude napisan pre koda koji definiše instancu

Primer

U ovome primeru definišemo filter koji transformiše izlaz teksta tako da početak svake nove reči počinje velikim slovom.

Vue.filter('camel',function(str){
    return str.toLowerCase().replace(/^\w|\s\w/g, function (letter) {
        return letter.toUpperCase();
    })
})
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

Vue.filter('camel',function(str){

return str.toLowerCase().replace(/^\w|\s\w/g, function (letter) {

return letter.toUpperCase();

})

new Vue({

el: '#app',

components: { App }

})

Korišćenje filtera

Filteri mogu da se implementiraju na dva načina: mustache interpolations i v-bind expressions

a) Integracija sa interpolacijom

Filteri se integrišu kao izraz za interpolaciju tako što se nadovezuju izraz koji treba da transformišu sa specijalnim znakom “|” (eng. pipe):

{{ message | nazivFiltera }}

1	{{ message \| nazivFiltera }}

Filteri modu da se nadovezuju:

{{ message | filterA | filterB }}

1	{{ message \| filterA \| filterB }}

A pošto su filteri u stvari funkcije onda mogu i da prime argumente:

{{ message | filterA('arg1', arg2) }}

1	{{ message \| filterA('arg1', arg2) }}

Primer

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

b) Integracija sa v-bind

<div v-bind:id="rawId | nazivFiltera"></div>

1	<div v-bind:id="rawId \| nazivFiltera"></div>

Vue.js mixin

Posted on 02/06/2018 at 18:42.Written by Dragoljub Živanović

Šta je mixin?

vue mixin

Mixin-i su “reusable” delovi koda koji mogu da se višekratno iskoriste u bilo kojoj Vue komponenti ili instanci. Vue.js mixin je u stvari objekat koji može sadržati sva svojstva kao i options objekat instance/komponente: data, methods, computed…
“Mixin” se koriste za:

Kreiranje zajedničikh svojstva (metoda, data…), koje se koriste u različitim komponentama i tako omoguće poštovanje DRY (“Don’t Repeat Yourself”) principa.
Pri kreiranje plugina koje imaju potrebu da modifikuju postojeću Vue instancu, jer mogu jednostaavno da dodaju nove funkcionalnosti.

Domen mixin-a

Mixin se integriše u instancu (komponentu) tako što se u komponentu ugradi kopija koda napisanog u mixin-u. Ovo povlači zaključak da je kod koji je došao u komponetu iz mixina potpuno odvojen i nezavisan kako od samog mixina tako i od koda ugradjenog u ostale komponente.

Dinamičke komponente

Posted on 29/05/2018 at 10:58.Written by Dragoljub Živanović

Sintaksa za dinamičke komponente

Dinamičke komponente u Vue-u omogućavaju vam da navedete jedno mesto HTML-u kao placeholder za različite komponente, nakon čega user/aplikacija može dinamički birati koju želi komponentu da prikaže. Sintaksa dinamičkih komponenti veoma liči na sintaksu “slot” mehanizma, stim što u ovome slučaju je tzv. placeholder HTML elemenat <component></component>. Izbor željene komponente se vrši definišući vrednost specijalnog atributa v-bind:is="naziv-komponente"

<component v-bind:is="naziv-komponente"></component>

1	<component v-bind:is="naziv-komponente"></component>

Primer

U ovome primeru postoje 3 različite komponente koje trebaju da se “štampaju” na istom mestu u zavisnosti od želje korisnika. Korišćen je HTML tag <component></component> koji u zavisnosti od korisnikove akcije vraća odgovaraju’u komponentu.

Životni ciklus dinamičke komponente

dinamicke komponente

Životni vek jedne dinamičke komponente započinje dinamičkikm prebacivanjem na komponentu a završava se učitavanjem druge komponente na istom mestu.

Primer

U ovome primeru u crvenoj komponenti su definisane metode koje štampaju poruke u zavisnosti da li je komponenta uništena ili novo-kreirana. Dodatni dokaz ponovnog učitavanja komponente pri prebacivanju sa jedne na drugu komponentu, dobijamo kada svaki put nakon povratka u crvenu komponentu primetimo da je brojač resetovan.

Keep alive dinamičke komponente

Ukoliko želimo da promenimo default-no ponašenje dinamičkih komponenti i sprečimo uništavanje i ponovno kreiranje instance komponente nakon svakog prebacivanje, potrebno je da obavijemo component tag sa specifičnim HTML elementom <keep-alive>.

<keep-alive>
   <component v-bind:is="naziv-komponente"></component>
</keep-alive>

<keep-alive>

</keep-alive>

Kada obavijemo našu dinamičku komponentu sa “keep-alive” elementom, komponenta se više ne uništava, stoga nam više nije dostupna ni life-cycle udica (eng. hook) destroyed(). Medjutim nakon korišćenja <keep-alive> elementa postaju nam dostupne druge dve life-cycle udice: activated() i deactivated()

Primer

U ovome primeru se može primetiti da se vrednost brojača ne resetuje nakon promene komponente. Takodje se pri svakoj promeni komponente sa da aktivira” i “deaktivira” komponenta, što se može videti u konzoli.

Prosledjivanje sadržaja sa slot elementom

Posted on 23/05/2018 at 13:25.Written by Dragoljub Živanović

Uvod

vue slot

Jedan od načina je da se prosledi sadržaj iz parent komponete je da se ubaci izmedju custom tag-a koji predstavlja instancu komponente. Ovaj mehanizam se koristi kada imamo slične komponente koje se razlikuju samo po sadržaju, jer tako izbegavamo pravljenje dve odvojene komponente.
Child komponenta prihvata prosledjen sadržaj, a “slot” elemenat joj definiše mesto u komponenti gde treba da se ubaci prosledjeni sadržaj.

Primer

Neimenovani slot

Ovo je najednostavniji način da se iz root Vue instance (ili parent komponente) prosledi neki sadržaj child komponenti. Taj sadržaj se prosledjuje imedju HTML taga-ova koji predstavlja instancu child komponente. Već je pomenuto da će sadržaje biti iskorišćen pri renderovanju instance na mestu gde se nalazi <slot></slot> elemenat.

Root instanca:

<alert-box>
    <h3>Something bad happened.</h3>
</alert-box>

<alert-box>

<h3>Something bad happened.</h3>

</alert-box>

Komponenta

Komponenta prihvata prosledjeni sadržaj i prikazuje ga na mestu slot taga

Vue.component('alert-box', {
  template: `
    <div class="demo-alert-box">
      <slot></slot>
    </div>
  `
})

Vue.component('alert-box', {

</div>

})

Kada se komponenta bude renderovala na mesto slot taga će doći prosledjeni sadržaj.

NAPOMENA:
Stilizovanje umetnutog sadržaja mora biti stilizovano iz child komponente.

Komponenti može da se prosledi i dinamički sadržaj:

Primer

<alert-box>
    <h3>{{ poruka }}</h3>
</alert-box>

<script>
    new Vue() {
      el: 'app'
      data: {
        poruka: "Something bad happened."
      }
    }
</script>

<alert-box>

<h3>{{ poruka }}</h3>

</alert-box>

new Vue() {

el: 'app'

data: {

poruka: "Something bad happened."

}

</script>

A takva komponenta potpuno isto prihvata prosledjeni sadržaj i prikazuje ga na mestu slot taga. Stoga će na mestu HTML taga slot biti izrenderovan dinamički sadržaj, što je u ovom slučaju “<h3>Something bad happened.</h3>”

Imenovani slot

U slučaju da postoje više slotova, potrebno je svakom slot-u dodeliti naziv da bi se medjusobno razlikovali:

Root instanca

<content-box>
  <h1 slot="title">Naslov</h1>
  <div slot="content">
    <p>Lorem ipsum dolor sit amet, conarchitecto cumque nostrum provident, qui rem!</p>
  </div>
</content-box>

<content-box>

<h1 slot="title">Naslov</h1>

<p>Lorem ipsum dolor sit amet, conarchitecto cumque nostrum provident, qui rem!</p>

</div>

</content-box>

Komponenta

Komponenta prihvata prosledjeni sadržaj i prikazuje ga na mestu odgovarajućeg slot taga:

Vue.component('content-box', {
  template: `
    <div class="container">
      <slot name="title"></slot>
      <slot name="content"></slot>
    </div>
  `
})

Vue.component('content-box', {

</div>

})

Podrazumevani slot

Treba naglasiti ukoliko jedan od slotova nema definisano ime on će se ponašati kao tzv. default-ni slot koji obeležava mesto gde će biti prikazan sav prosledjen sadržaj koji nije specifično obeležen.

Root instanca

<content-box>
  <h1 slot="title">Naslov</h1>
  <div>
    <p>Lorem ipsum dolor sit amet, conarchitecto cumque nostrum provident, qui rem!</p>
  </div>
</content-box>

<content-box>

<h1 slot="title">Naslov</h1>

<div>

<p>Lorem ipsum dolor sit amet, conarchitecto cumque nostrum provident, qui rem!</p>

</div>

</content-box>

Komponenta

Imenovan slot “<slot name="title"></slot>” prihvata svoj sadržaj u tagu koji je obeležen sa atributom slot=”title”, dok neimenovani slot prihvata sav neobeleženi prosledjeni sadržaj:

Vue.component('content-box', {
  template: `
    <div class="container">
      <slot name="title"></slot>
      <slot></slot>
    </div>
  `
})

Vue.component('content-box', {

</div>

})