Vue.js

Vue.js on avoimen lähdekoodin JavaScript-ohjelmistokehys sekä ekosysteemi, joka kattaa yleisimmät frontend-ohjelmistotuotannon vaatimat ominaisuudet. Vuen tärkeimpiä ominaisuuksia on sen kyky sopeutua moniin eri käyttötarkoituksiin web-komponenttien integroimisesta kokonaisten sivujen renderöintiin.

Yleiskuva

Vuella on kaksi pääominaisuutta, joiden ympärille ohjelmistokehys rakentuu: Deklaratiivinen renderöinti sekä reaktiivisuus. Deklaratiivinen renderöinti jatkaa perinteistä HTML:ää tuomalla kehyksen, jonka syntaksi mahdollistaa deklaratiivisesti kuvailemaan HTML tulosteita. Tämä myös mahdollistaa HTML tulosteiden muuttumisen, JavaScript-tiedoston tilan mukaan.

Reaktiivisuus tarkoittaa kehyksen jatkuvasti seuraavan JavaScript-tiedoston tilaa. Kehys reagoi näihin muutoksiin, jolloin se päivittää automaattisesti DOM:in.

Ominaisuudet

Osa ominaisuuksista

Komponentit

Vue.js projektien selkärankana toimivat komponentit. Komponentit sijoitetaan omiin .vue-päätteisiin tiedostoihinsa, jotka jatkavat HTML-tiedostoformaattia. Vuen komponenttipohjaisen rakenteen avulla sovellus voidaan jakaa toiminnallisiin osiin, joiden avulla koodia voi käyttää uudelleen. Tämä helpottaa koodin organisointia ja ylläpidettävyyttä. Tällöin HTML:än kehys-, CSS:än tyylit-, ja JavaScriptin toiminnallisuustiedot saadaan sidottua komponenttiin, ja samaan tiedostoon.

Alla esimerkki yksinkertaisesta komponentista, jossa nappia painaessa teksti päivittyy. Lopputuloksena meillä on komponentti, jonka lihavoitettu teksti kertoo meille, kuinka monta kertaa nappia on painettu.

<script setup> //script-avainsanan alle sijoitetaan komponentin toiminnallisuus
import { ref } from 'vue'
const count = ref(0) //ref luo reaktiivisen muuttujan.
//Jos muuttujaa muutetaan, renderöidään komponentti uudestaan
</script>

Template-avainsanan alle sijoitat HTML tyylisesti komponenttisi rakenteen.
    - @click on kuuntelee elementtiä. Jos käyttäjä klikkaa nappia, aktivoidaan metodi.

<template> 
  <button @click="count++">Count is: {{ count }}</button>
</template>

Style-avainsanan alle taas sijoitetaan tyyliin liittyvät ominaisuudet.
    - Tässä tapauksessa kaikkiin button-elementtien teksti lihavoidaan.

<style scoped> 
button {
  font-weight: bold;
}
</style>

Suorituskyky

Vue.js on suunniteltu erittäin suorituskykyiseksi. Vue käyttää virtuaalista DOM-teknologiaa, mikä auttaa minimoimaan todellisen DOM:in päivityksien määrän. Tämä johtaa parempaan suorituskykyyn.

Templaatit

Vue käyttää (Vue Template Syntax) templaattikieltä käyttöliittymän määrittämiseen. Templaateissa määritellään, miten käyttöliittymä reagoi sovelluksen tilan muutoksiin ja kuinka data näytetään käyttäjälle.

Kaksisuuntainen datan sidonta

Vue.js käyttää kaksisuuntaista datan sidontaa, joka mahdollistaa reaktiivisen datan sitomisen käyttöliittymään. Tämä tarkoittaa sitä, että datan muuttuessa myös käyttöliittymä päivittyy automaattisesti. Tämä toimii myös päinvastoin.

Reaktiivisuus

Vue.js sisältää reaktiivisuusjärjestelmän, joka käyttää JavaScript-objekteja ja uudelleenrenderöintiä. Jokainen komponentti pitää kirjaa reaktiivisista riippuvuuksistaan renderöinnin aikana. Tämä johtaa siihen, että järjestelmä aina tietää, milloin sen on renderöitävä uudelleen ja mitä pitää renderöidä.