Vue iz ptičje perspektive: kako započeti s Vue.js

Uzmite svoju kopiju CSS vizualnog rječnika, uklj. dijagrami svih CSS svojstava.

Fotografija Sam Bark na Unsplash

Uvijek ste željeli početi učiti kodiranje u Vue okviru, ali nekako jednostavno niste imali vremena u svom užurbanom rasporedu.

Možda se osjećate preplavljeni svim knjižnicama i okvirima? Vodič za ptičje oči "(početak)" mogao bi pomoći.

Puno poput React-a, Vue razgrađuje vašu JavaScript aplikaciju na nekoliko dijelova:

  • objekt aplikacije
  • metode i svojstva članova
  • i stvarni prikaz (ovdje su vaši HTML elementi).

Vue-ovi atributi temeljeni na v

Vue dodaje puno prilagođenih atributa elementima koje obično ne vidite u standardnom HTML-u, prefiksirajući ih v-om.

Na primjer, postoje v-html, v-if, v-else i mnogi drugi. Svi oni imaju svoju specifičnu svrhu: elementi prikazivanja. Pogledajmo brzo

Booleove sklopke

Još jedan atribut v-show odnosi se na preklopljive elemente na temelju njihovog stanja vidljivosti.

To se navodi u podacima o svojstvima aplikacije Vue kao {boolean: true;}.

Zatim ga u svom HTML-u možete odrediti koji će se elementi prikazivati.

Pozdrav!

Kad god je App.data.boolean istinit, vidjet će se

element.

Vaša logika aplikacije sada može u vašem kodu "prebaciti"

element "uključeno" ili "isključiti". Promjena se automatski daje.

petlje

Direktiva v-for namijenjena je stvaranju petlji za popis HTML elemenata.

To znači da možete ugraditi iteratore izravno u HTML elemente da biste prikazali popise podataka pohranjenih u nizu u stanju vaše Vue aplikacije. Ne morate ponavljati isti HTML element.

Evo klasičnog primjera iteratora for-petlje.

Prvo pripremite podatke u aplikacijskom objektu:

neka je E = nova Vue ({
     el: '#L', // veza na element id = "L"
   podaci: {
  stavke: [
      {message: 'One'},
      {message: 'Two'},
      {message: 'Three'}]}
});

Sada u vašem glavnom spremniku HTML aplikacija:

      
  • {{item.message}}

Direktiva v-for je u obliku "za stavku u stavkama".

To znači da stvorite novu varijablu koja se zove u svojoj {{... ovdje ...}} petlji. Stavke svojstva potječu od samog objekta podataka o aplikaciji.

Time će se vaši predmeti JSON objekata pretvoriti u HTML elemente!

Bilo bi isto kao i ručno pisanje sljedećeg HTML-a:

      
  • Jedna   
  • Dvije   
  • Tri

Neću ulaziti u detalje iza svakog atributa temeljenog na v i što to čini u ovom udžbeniku. Ali kao što vidite, oni mogu biti vrlo korisni.

Pa kako zapravo graditi Vue aplikacije s ovim?

Aplikacije za izgradnju

Kombinirajući podatke o stanju aplikacije s ovim atributima na temelju v-a, stvarate veze između vaše logike i prikazivanja prikaza aplikacije.

To skraćuje vaš JavaScript program, štedeći propusnost (posebno na velikim aplikacijama). Također vam pomaže da stvari učinite puno brže.

Na snimci zaslona u nastavku nalazi se skela aplikacije na kojoj će se prikazati sve vaše oznake i predloške.

Ovo djeluje slično kao React. Vue vašu glavnu aplikaciju

tretira kao spremnik za cijelu aplikaciju. Pohranjuje svojstva i metode u aplikacijskom objektu (vidi dolje).

Na snimci zaslona plava linija pokazuje kako su podaci vaše aplikacije vezani za HTML elemente koji čine prikaz.

Zelena linija povezuje vaše metode sa događajima.

Primijetite crveni obris na slici iznad. U Vueu morate vezati URL-ove s: href, a ne atribut href. Ako to ne učinite, veza neće raditi.

// Ispravite (primjetite vodeće: prije atributa href)
 {{url}} 
// Pogreška (URl se neće pokrenuti)
 {{url}} 

Podaci o primjeni

Prilikom izrade aplikacija u Vueu (ili čak drugim sličnim okvirima ili knjižnicama) obično mislite na jedno primarno mjesto za pohranu podataka. U Reactu to bi mogla biti državna imovina. U Vueu se jednostavno pohranjuje u podatkovni objekt.

Prema samoj Vue dokumentaciji, pohrana podataka - koja se često naziva izvor istine - pohranjuje se u svojstvo neobrađenih podataka na samom glavnom aplikacijskom objektu:

const sourceOfTruth = {}

const aplikacija = nova Vue ({podaci: izvorOfTruth});

Super stvar u tome je što možete pohraniti vrijednost u svojstvo data: {...} i automatski je postati dostupna u vašim HTML elementima putem v-teksta, v-pre, v-jednom (prikazivanje samo jednom) i v-ogrtač (pričekajte da se stranica dovrši prikazivanje i Vue montira) i mnogi drugi atributi.

Drugim riječima, svojstva (primitivne vrijednosti, objekti i metode) postaju sveprisutna u cijeloj aplikaciji i mogu se koristiti u svim dodatnim značajkama koje Vue okvir dovodi u tablicu… koja će se koristiti zajedno s atributima koji počinju s v-prefiksom.

I samo sporedna nota. Ako izbjegavate upotrebu v-ogrtača, mogli biste osjetiti neke artefakte iznošenja. Na primjer, CSS stil skače uokolo u samo prvoj sekundi nakon učitavanja vaše aplikacije.

Vue Aplikacijski objekt

Ovdje ćete inicijalizirati svoje podatke i napisati metode aplikacije kojima ćete stvari ispunjavati.

Kao što vidite, imate niz svojstava i metoda - baš kao što biste imali u redovnoj JavaScript klasi.

Ispod je snimka zaslona koja prikazuje vaš glavni objekt aplikacije Vue. Ovdje zapravo gradite logiku svoje aplikacije i pohranjujete svojstva, nizove URL-ova i prilagođene metode. To je poput odvajanja logike koda od pogleda.

Kad tek započinjete, dobro je shvatiti stvari ptičje perspektive prije nego što skočite ravno u kod.

Budući da kod Vue ne pišete samo kôd u