See artikkel ootab keeletoimetamist. |
Vue.js (ka Vue) on vaba JavaScripti raamistik, millega luuakse kasutajaliideseid.[1]
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.
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.[2]
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.” [3] Vue lasti esimest korda välja 2014. aasta veebruaris.
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.
Ü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.[4]
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.[5] 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>
Vue pakub valikuvõimalusi, kuidas rakendada üleminekute efekte DOMist sisestades, uuendades või eemaldades. See sisaldab ka tööriistu selleks, et:
Kui ülemineku komponendiga ümbritsetud element sisestatakse või eemaldatakse, siis: