Lintuperspektiivi Vue: miten pääset alkuun Vue.js: n kanssa

Tartu CSS Visual Dictionary -kopion mukana. kaikkien CSS-ominaisuuksien kaaviot.

Kuva: Sam Bark on Unsplash

Olet aina halunnut aloittaa oppimisen koodaamaan Vue-kehyksessä, mutta jotenkin sinulla ei ole aikaa kiireisessä aikataulussa.

Ehkä sinusta tuntuu, että kaikki kirjastot ja kehykset ovat hukkua? Tämän linnun silmän vue (aloittaminen) -opetus saattaa auttaa.

Aivan kuten React, Vue hajottaa JavaScript-sovelluksesi moniin osiin:

  • sovellusobjekti
  • jäsenmenetelmät ja ominaisuudet
  • ja todellinen näkymä (tässä HTML-elementtisi ovat).

Vue: n v-pohjaiset HTML-määritteet

Vue lisää paljon mukautettuja määritteitä elementteihin, joita et yleensä näe vakio HTML: ssä, liittämällä ne v-näppäimellä.

Esimerkiksi, on v-html, v-if, v-else ja monet muut. Kaikilla niillä on erityinen tarkoitus: elementtien renderointi. Katsotaanpa nopeasti.

Boolen kytkimet

Toinen ominaisuus v-show on tarkoitettu elementtien vaihtamiseen niiden näkyvyystilan perusteella.

Tämä määritetään Vue-sovelluksen ominaisuustiedoissa nimellä {boolean: true;}.

Sitten voit käyttää HTML-koodissasi sitä, mitkä elementit näytetään.

Hei!

Aina kun App.data.boolean on totta,

-elementti on näkyvissä.

Sovelluslogiikkasi voi nyt "kytkeä" koodiin

elementin "päälle" tai "pois". Muutos tehdään automaattisesti.

looping

V-for -direktiivi on silmukoiden luominen HTML-elementtien luetteloimiseksi.

Tämä tarkoittaa, että voit upottaa iteraattorit suoraan HTML-elementteihin, jotta voit luoda luetteloita taulukkoon tallennetuista tiedoista Vue-sovelluksen tilassa. Sinun ei tarvitse kirjoittaa samaa HTML-elementtiä yhä uudelleen.

Tässä on klassinen esimerkki silmukan iteraattorista.

Valmistele ensin sovellusobjektisi tiedot:

anna E = uusi Vue ({
     el: '#L', // linkki id = "L" -elementtiin
   tiedot: {
  tuotteet: [
      {viesti: 'Yksi'},
      {viesti: 'Kaksi'},
      {viesti: 'Kolme'}]}
});

Nyt HTML-sovelluksen pääsäiliössä:

      
  • {{item.message}}

V-for -direktiivi on esineitä varten tuotteille -muodossa.

Tämä tarkoittaa, että luot uuden muuttujan nimeltä alkio {{… täällä…}} -silmukkaasi. Ominaisuuserät tulevat itse sovellustietokohteesta.

Tämä tekee kohteistasi JSON-kohteita HTML-elementteinä!

Se olisi sama kuin käsin kirjoittamalla seuraava HTML:

      
  • Yksi   
  • kaksi   
  • kolme

En käsittele yksityiskohtia jokaisen yksittäisen v-pohjaisen ominaisuuden takana ja mitä se tekee tässä opetusohjelmassa. Mutta kuten huomaat, ne voivat olla varsin hyödyllisiä.

Joten miten itse rakentaa Vue-sovelluksia tällä?

Rakennussovellukset

Yhdistämällä sovellustilatietosi näihin natiiviin v-pohjaisiin määritteisiin luodaan assosiaatioita logiikan ja sovellusnäkymän renderoinnin välillä.

Tämä lyhentää JavaScript-sovellustasi ja säästää kaistanleveyttä (etenkin suurissa sovelluksissa). Se auttaa myös tekemään asiat paljon nopeammin.

Alla olevassa kuvakaappauksessa sovellusteline on paikka, johon kaikki tunnisteesi ja mallisi haetaan.

Tämä toimii paljon kuten React. Vue käsittelee pääsovellusta

koko sovelluksen säiliönä. Se tallentaa ominaisuudet ja menetelmät sovellusobjektiin (katso alla).

Kuvakaappauksessa sininen viiva ilmaisee, kuinka sovellustietosi sidotaan HTML-elementteihin, jotka tekevät näkymän.

Vihreä linja linkittää menetelmänne tapahtumiin.

Huomaa yllä olevan kuvan punainen ääriviiva. Vue-sovelluksessa sinun on sitova URL-osoitteet: href: llä eikä href-määriteellä. Jos et tee niin, linkki ei toimi.

// Oikea (huomioi johtava: ennen href-määrite)
 {{url}} 
// Virhe (URl ei käynnisty)
 {{url}} 

sovelluksen tiedot

Kun rakennat sovelluksia Vuessä (tai jopa muissa vastaavissa kehyksissä tai kirjastoissa), ajattelet yleensä yhtä ensisijaista tallennuspaikkaa tiedoillesi. Reaktorissa se voi olla valtion omaisuus. Vue-tilassa se yksinkertaisesti tallennetaan dataobjektiin.

Itse Vue-asiakirjojen mukaan tietojen tallennus - jota usein kutsutaan totuuden lähteeksi - tallennetaan itse pääsovellusobjektin raa'an tiedon ominaisuuteen:

const sourceOfTruth = {}

const-sovellus = uusi Vue ({data: sourceOfTruth});

Upea asia tässä on, että voit tallentaa arvon tietoihin: {...} ominaisuuteen ja saada se automaattisesti saataville HTML-elementeissäsi v-tekstin, v-pre, v-kerran (renderoi vain kerran) kautta ja v-viitta (odota, kunnes sivu on valmistettu ja Vue on asennettu) ja monet muut määritteet.

Toisin sanoen ominaisuuksista (primitiiviset arvot, objektit ja menetelmät) tulee läsnä koko sovelluksen ajan, ja niitä voidaan käyttää kaikissa lisäominaisuuksissa, joita Vue-kehys tuo taulukkoon… käytettäväksi yhdessä attribuuttien kanssa, jotka alkavat v-etuliitteellä.

Ja vain sivuhuomautus. Jos vältät v-cloakin käyttöä, saatat kohdata joitain renderointiesineitä. Esimerkiksi CSS-tyyli hyppää ympäri juuri sovelluksen lataamisen ensimmäisen sekunnin sisällä.

Vue-sovellusobjekti

Täältä voit alustaa tietosi ja kirjoittaa sovellusmenetelmät, joiden avulla asiat saadaan aikaan.

Kuten huomaat, sinulla on sarja ominaisuuksia ja menetelmiä - aivan kuten tavallisessa JavaScript-luokassa.

Alla on kuvakaappaus, joka näyttää tärkeän Vue-sovellusobjektin. Täällä voit itse rakentaa sovelluksesi logiikan ja tallentaa ominaisuuksia, URL-osoitteiden merkkijonoja ja mukautettuja menetelmiä. Se on kuin erottaa koodilogiikka näkymästä.

Kun olet vasta aloittamassa, on hyvä idea saada käsitys lintujen silmäkuvasta asioista ennen kuin hyppää suoraan koodiin.

Koska et vain kirjoita koodia