Vue.js

Vue.js (ka Vue) on arvutiteaduses vaba JavaScripti raamistik kasutajaliideste loomiseks. 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ärgiks on organiseeritult lihtsustada veebiarendust. Projekti eesmärgiks on muuta veebi kasutajaliidese arendus kättesaadavamaks, üritatakse olla paindlikum ja seega ka arendajale lihtsamalt omandatav.
Tunnuseks on järk-järgult kasutusulevõ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 loodi Evan You poolt pärast töötamist Googles, kus ta kasutas AngluarJS-i mitmetes projektides. Hiljem on ta selle kohta öelnud nii: “Ma mõtlesin, et mis oleks kui ma eraldaks selle osa, mis mulle Angluari juures väga meeldib ja ehitaksin midagi kergekaalulist”. Vue lasti esimest korda välja 2014. aasta veebruaris.

Omadused

Mallid

Vue kasutab HTML-i põhist malli süntaksit, mis lubab deklaratiivselt siduda renderdatud DOM-i aluseks olevate Vue objektide andmetega. Kõik Vue mallid põhinevad valiidsel HTML-il, 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 rakendus olek muutub.

Reageerivus

Üks Vue kõige olulisem omadus on märkamatult reageeriv süsteem. Mudelid on lihtsalt JavaScripti objektid. Kui neid muudetakse, siis vaade uueneb. See muudab olekute haldamise väga lihtsaks ja intuitiivseks. Vuel on optimiseeritud 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 üheks olulisemaks Vue omaduseks. 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 valiku võimalusi kuidas rakendada üleminekute efekte kui asju sisestatakse, uuendatakse või eemaldatakse DOMist. See sisaldab ka tööriistu selleks, et:

• automaatselt rakendada klasse CSS-i üleminekuteks ja animatsioonideks
• integreerida kolmanda osapoole CSS-i animatsiooniteeke nagu näiteks Animate.css
• 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 üleminekuid või animatsioone. Kui on, siis CSS ü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 üleminekut/animatsiooni ei leita ja mitte ühtegi JavaScripti haaki pole tagatud, siis DOM operatsioonid sisestamiseks ja/või eemaldamiseks täidetakse kohe.