Vue.js

Wikipediasta
Siirry navigaatioon Siirry hakuun

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.

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. [1]

Osa ominaisuuksista

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.[1]

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>

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.

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

[muokkaa | muokkaa wikitekstiä]

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

[muokkaa | muokkaa wikitekstiä]

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ä.

  1. a b Introduction | Vue.js vuejs.org. Viitattu 22.10.2023.