Vue.js on mikro JavaScript-kehys sivustosi uudelleenkäytettävien ja reaktiivisten komponenttien luomiseen.
Etupuolen kehykset vaihtelevat suuresti sekä koosta että laajuudesta, missä Vue.js erottuu, on sen minimaalinen muotoilu ja keskittyy sopeutumiskykyyn. Sinulla on mahdollisuus rakentaa koko sivustosi käyttämällä Vue.js: tä, vain tekemällä sivustosi yksittäinen elementti reaktiiviseksi tai mikä tahansa väliin. Tämän vuoksi se on hyvin lähestyttävissä matalan oppimiskäyrän kanssa.
Tässä artikkelissa tarkastellaan Vue.js: n ydinkomponentteja ja miten asennetaan ja aloitetaan, mutta katsotaan ensin, milloin haluat käyttää etupään kehystä kuten Vue.js ja miksi .
Etupuolen kehykset, kuten useimmat kehykset, tulevat abstrakteisiin yhteisiin tehtäviin, yhteiseen nimittäjään, joka löytyy projektien välillä. Vue.js nimenomaan tulee abstrakti HTML-komponenttien luomisprosessi, jota päivitetään dynaamisesti JavaScriptin kautta.
Muutamat vinkkejä, joita Vue.js ratkaisee puolestasi, luo dynaamisen HTML: n, sitovat HTML-elementtitoimenpiteet tietojasi pitämiseen ja kontekstiin ja seuraa, milloin HTML: n täytyy automaattisesti uudelleen muodostaa.
Oletetaan esimerkiksi, että sinulla on sivu, jossa on dynaaminen nimiluettelo. Sinulla voi olla kirjoitettu koodi, joka näyttää tältä:
Kun muodostat HTML-käsin - sen lisäksi, että koodi on vaikea hallita suuremmissa esimerkeissä - ei ole todellista yhteyttä datan ja tuotetun HTML: n välillä. Jos nimien joukko muuttuu, sinun on oltava tietoinen siitä ja tehtävä uudelleen luettelo. Kaikki tämä on myös vain dynaamisen tiedon näyttämistä varten, jos haluat lisätä tapahtumakäsittelijöitä, kuten napsautuksen käsittelijää, jotta voit säästää laajuutta, pidät koodin lisäämistä edelleen ja edelleen:
Vue.js: n avulla erotat HTML: n malliksi, joka kuvaa mitä tuottaa annettujen tietojen perusteella ja Vue.js tekee sen automaattisesti.
Sama esimerkki Vue.js: stä näyttäisi seuraavanlaiselta:
JavaScript-koodin HTML-elementtien erottaminen JavaScript-koodin logiikasta on täysin erotettu, mikä tekee kaiken itsenäiseksi ja paljon hallittavammaksi. Saamme hieman edessämme itsestämme, ottakaamme taas askelta takaisin ja katsomme, kuinka Vue.jsin ydin saavuttaa tämän ...
Vue.js: n ytimessä määrität HTML: n ja tietyn datan välisen korrelaation, ja aina kun tiedot muuttavat, HTML päivitetään. Näin tämä toimii, kun instantioidaan Vue.js-komponentti, jonka annat jonkin tietyn tiedon JavaScript-objektin muodossa, tätä kohdetta muutetaan sitten sen ominaisuuksien korvaamiseksi jäljitettävissä getter- ja setter-menetelmillä.
Vue.js analysoi tietosisällön HTML-konstruoinnin aikana ja näkee, mitä tietoja käytit järjestyksessä erilaisten HTML-elementtien tuomiseksi sisälle. Tämän avulla se seuraa tietoobjektille tehtyjä muutoksia ja tietää tarkalleen mitä päivittää ja milloin.
Tällaisen tiukan sidoksen tietojen ja näkymän välillä yksinkertaistaa etupään sovellusten kehitystä ja minimoi väärien esitysten aiheuttamat virheet. Tämä huolenaiheiden erottaminen mahdollistaa sen, että voit keskittyä sovelluksen logiikkaan tarvitsematta käsitellä näkymän päivittämistä.
Vue.js-asennus on yhtä helppoa kuin kirjaston mukana:
Nyt, kuten mainitsin, Vue.js -sovellus koostuu tietosisällöstä ja HTML-mallista, johon tiedot upotetaan. Joten ensimmäisessä sovelluksessamme nähdäksesi Vue.js toiminnassa voit lisätä body :
Ensin määritellään a div joka on HTML-mallimme Vue.js-sovelluksellemme. Sisällä käytämme kaksoissuljetuksia tietojen interpolaation HTML.
Varsinaisen Vue.js-sovelluksen sisällä yksinkertaisesti määritämme tiedot ja yhdistämme div koska sovelluksen elementti on sekä mallinnus että mallinnus. Seuraavaksi lisäämään lisäennustetta lisäämme laskenta-muuttujaa sovelluksissamme kerran sekunnissa.
Kaikki tämä on luoda Vue.js-sovellus, avaamalla tämä selaimellasi, näet sivun automaattisesti päivittyy aina, kun päivitämme datakiinteistön.
Nyt useimmissa sovelluksissa, joissa DOM reagoi muuttuviin tietoihin, on vain puolet tarinasta, tarvitset myös tapa päivittää tietoja, Vue.js huolehtii tästä tapahtumien ja menetelmien avulla. Menetelmät ovat tallennettuja toimintoja, jotka suoritetaan Vue.js-sovelluksen yhteydessä.
Päivitämme laskentatapaamme lisäämällä kykyä käynnistää ja pysäyttää ajastin sen sijaan, että se yksinkertaisesti käynnistäisi:
HTML-mallissa lisäsimme napin laskurin käynnistämiseen ja lopettamiseen. Tarvitsemme sen, että painikkeen teksti on dynaaminen ja tarvitsemme tapahtumakäsittelijän, kun nappia napsautetaan.
Jos haluat ilmoittaa tapahtuman Vue.js: ssä elementissä, etusijaa minkä tahansa standardin HTML DOM -tapahtuman nimen kanssa v-on: , joten mouseover tapahtuma muuttuu v-on:mouseover tai keyup tapahtuma muuttuu v-on:keyup . Esimerkissämme käytämme v-on:click attribuutti käsitellä click tapahtuma.
Jotain, mitä olette huomannut, on se, että painikkeen tekstissä kutsumme menetelmää vastakohtana tallennetun omaisuuden viittaamiseen. Monissa tilanteissa tallennetut tiedot eivät välttämättä ole siinä muodossa kuin haluat näyttää sen sivulta. Täällä voidaan käyttää menetelmiä tietojen käsittelyyn, ja kaikki ominaisuuksista saatava reaktiivisuus koskee menetelmiä käytettäessä, jos taustalla olevat tiedot muuttavat mallin, päivitetään sen mukaisesti.
Vue.js-sovelluksessa meillä on nyt uusi ominaisuus, jolla on ajastimen muuttuja ja joitain menetelmiä. toggle method which is bound to the button's click event checks whether or not the menetelmä, joka on sidottu painikkeen napsautustilanteeseen, tarkistaa onko timer ominaisuus on asetettu, ajastimen käynnistys tai lopetus ja vastaavasti counterAction menetelmää käytetään painikkeen oikean toiminnan näyttämiseen uudelleen perustuen ajastimen muuttujaan.
Koska vaihtamismenetelmä muuttaa ajastimen ominaisuutta, ja Vue.js -mallin vastaustoimintamenetelmä - käyttää ajastimen ominaisuutta, minkä tahansa ajan vaihtamista kutsutaan malliksi, tuo painikkeen teksti uudelleen.
On syytä huomata, että vaikka meillä ei ole aloitusarvoa ajastimen ominaisuudelle, se on vielä ilmoitettava, kun luot Vue.js-sovelluksen. Jos et julista omaisuutta alusta alkaen, ominaisuus ei ole reaktiivinen eikä aiheuta HTML-muotoa uudelleen, kun sitä muutetaan.
Esimerkissämme näkymä päivittyy kerran sekunnin ajaksi ajastimen ollessa käynnissä, ja niinpä kerran sekunnin aikana myös counterAction- menetelmä on kutsuttu, kun nappia redrawn . Vue.js: n avulla voimme optimoida tämän välimuistilla menetelmän tuloksen ja vain muistuttaa menetelmää, jos menetelmässä nimenomaan käytetyt taustatiedot muuttuvat. Tämä on myös hyödyllistä, jos käytät samaa laskennallista ominaisuutta useissa paikoissa sivulle sen sijaan, että käsittelet arvoa useita kertoja, tallentamalla välimuistiin tallennustilaa, voit vähentää paljon yleiskustannuksia.
Päivitämme esimerkin sisällyttämään välimuistutetut ominaisuudet:
Tärkein ero tallennuksen lisäksi on se, että menetelmät alle computed viitataan ominaisuuksina toisin kuin menetelmät, joten HTML-mallissa jouduttiin poistamaan vastakappaleet counterActionista .