Vue.js

Vue.js (ka Vue) on vaba JavaScripti raamistik, millega luuakse kasutajaliideseid.

Integreerimine projektidesse, mis kasutavad teisi JavaScripti teeke, on lihtsustatud Vuega, sest see on disainitud olema järk-järgult kasutuselevõetav. Vue toimib ka veebirakenduse raamistikuna, võimaldades luua arenenud üheleheküljelisi rakendusi.

Ülevaade

Vue.js on JavaScripti kasutajaliidese raamistik, mille eesmärk on organiseeritult lihtsustada veebiarendust. Projekti abil on veebi kasutajaliidese arendus kättesaadavam ja paindlikum ning seega ka arendajale lihtsamalt omandatav.
Tunnuseks on järk-järgult kasutuselevõetav arhitektuur. Põhiteek on fokuseeritud deklaratiivsele renderdamisele ja komponentide kompositsioonile ja saab manustada olemasolevatesse lehtedesse. Arenenud omadused nagu suunamine, olekute haldamine ja rakenduse lähtekoodist loomise autoriseerimine, mida on vaja keerukate rakenduste loomiseks, on saadaval ametlikult hallatavates teekides ja pakettides.

Ajalugu

Vue lõi Evan You pärast töötamist Google'is, kus ta kasutas AngularJSi mitmetes projektides. Hiljem on ta selle kohta öelnud nii: “Ma mõtlesin, et mis oleks, kui ma eraldan selle osa, mis mulle Angulari juures väga meeldib, ja ehitan midagi kergekaalulist.” Vue lasti esimest korda välja 2014. aasta veebruaris.

Omadused

Mallid

Vue kasutab HTMLi-põhist malli süntaksit, mis lubab deklaratiivselt siduda renderdatud DOM-i Vue objektide andmetega. Kõik Vue mallid põhinevad valiidsel HTMLil, mida saab parsida HTMLi parseritega. Vue kompileerib mallid virtuaalseteks DOM-i rendendusfunktsioonideks. Kombineerituna reageeriva süsteemiga suudab Vue arvutada minimaalse arvu komponente uuesti renderdamiseks ja rakendada minimaalse arvu DOM-i manipuleerimisi, kui rakenduse olek muutub.

Reageerivus

Üks Vue kõige olulisem omadus on märkamatult reageeriv süsteem. Mudelid on lihtsalt JavaScripti objektid, neid muutes vaade uueneb. See muudab olekute haldamise väga lihtsaks ja intuitiivseks. Vuel on optimeeritud uuesti renderdamine juba olemas, seega seda ise ei pea lisama. Iga komponent jälgib reageerivaid sõltuvaid elemente renderdamisel, et süsteem teaks täpselt, millal uuesti renderdada ja milliseid komponente peab uuesti renderdama.

Komponendid

Komponendid on samuti Vue oluline omadus. Suures rakenduses on oluline jagada rakendus väikesteks, iseseisvateks ja uuesti kasutatavateks komponentideks, et muuta arendus hallatavamaks.
Komponent Vues on põhiliselt Vue objekt eeldefineeritud omadustega. Allpool olev koodilõik sisaldab näidet Vue komponendist. Komponent esitab nuppu ja prindib ekraanile nupule klikitud kordade arvu:

<div id="tuto">
	<buttonclicked v-bind:initial_count="0"></buttonclicked>
</div>
<script>
Vue.component('buttonclicked', {
  props: ["initial_count"],
  data: function() {return {"count": 0} } ,
  template: '<button v-on:click="onclick">Clicked {{ count }} times</button>',
  methods: {
    "onclick": function() {
        this.count = this.count + 1;
    }
  },
  mounted: function() {
    this.count = this.initial_count;
  }
});

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

Üleminekud

Vue pakub valikuvõimalusi, kuidas rakendada üleminekute efekte DOMist sisestades, uuendades või eemaldades. See sisaldab ka tööriistu selleks, et:

• automaatselt rakendada klasse CSS-i üleminekuteks ja animatsioonideks;
• integreerida kolmanda poole CSS-i animatsiooniteeke nagu näiteks Animate.css-i;
• kasutada JavaScripti, et otse manipuleerida DOM-i üleminekutel;
• integreerida kolmanda osapoole JavaScripti animatsiooniteeke nagu näiteks Velocity.js.

Kui ülemineku komponendiga ümbritsetud element sisestatakse või eemaldatakse, siis:

1. Vue saab automaatselt aru, kas sihtelemendil on CSS-i üleminekuid või animatsioone ning kui on, siis CSS-i ülemineku klassid lisatakse/eemaldatakse õigetel hetkedel;
2. kui ülemineku komponendil olid küljes JavaScripti haak, siis need haagid kutsutakse õigel ajal välja;
3. kui mitte ühtegi CSS-i üleminekut/animatsiooni ei leita ja mitte ühtegi JavaScripti haaki pole tagatud, siis DOM-i sisestamis- ja/või eemaldamisoperatsioonid täidetakse kohe.