Linnusilm Vue: kuidas alustada Vue.js-ga

Haarake kaasa CSS-i visuaalse sõnaraamatu koopia. kõigi CSS-i omaduste diagrammid.

Foto Sam Bark saidil Unsplash

Olete alati soovinud hakata õppima koodeksit Vue raamistikus, kuid millegipärast pole teil lihtsalt aega hõivatud ajakavas.

Võib-olla tunnete end kõigist raamatukogudest ja raamidest ülekoormatud? Sellest linnu silma Vue (alustamise) õpetus võib aidata.

Sarnaselt React'iga jaotab Vue teie JavaScripti rakenduse mitmeks osaks:

  • rakenduse objekt
  • liikme meetodid ja omadused
  • ja tegelik vaade (siin asuvad teie HTML-elemendid).

Vue v-põhised HTML-atribuudid

Vue lisab elementidele palju kohandatud atribuute, mida te tavaliselt HTML-is ei näe, lisades neile eesliite v-.

Näiteks on olemas v-html, v-if, v-else ja paljud teised. Neil kõigil on oma konkreetne eesmärk: elementide renderdamine. Vaatame kiiresti.

Boole lülitid

Veel üks atribuut v-show on elementide ümberlülitamiseks nende nähtavuse oleku põhjal.

See on Vue'i rakenduse omaduste andmetes määratletud kui {boolean: true;}.

Seejärel saate oma HTML-is seda kasutada, et määrata, milliseid elemente näidata.

Tere!

Kui App.data.boolean on tõene, on element

nähtav.

Teie rakenduse loogika saab nüüd koodis

elemendi sisse või välja lülitada. Muudatus kuvatakse automaatselt.

Silmus

V-for direktiiv on mõeldud silmuste loomiseks HTML-i elementide loetlemiseks.

See tähendab, et saate manustada iteraatorid otse HTML-i elementidesse, et renderdada massiivi salvestatud andmete loendid oma Vue-rakenduse olekus. Te ei pea ikka ja jälle sama HTML-i elementi tippima.

Siin on klassikaline näide silmusesisese iteraatori kohta.

Esiteks valmistage ette andmed rakenduse objekti kohta:

las E = uus Vue ({
     el: '#L', // link id = "L" elemendile
   andmed: {
  üksused: [
      {teade: 'Üks'},
      {sõnum: 'Kaks'},
      {sõnum: 'Kolm'}]}
});

Nüüd oma HTML-i rakenduse peamises konteineris:

      
  • {{item.message}}

V-for-direktiiv on vormingus „üksuste jaoks toode”.

See tähendab, et loote oma {{... siin ...}} ahelasse uue muutuja nimega üksus. Atribuudid pärinevad rakenduse andmeobjektist endast.

See muudab teie üksuste JSON-objektide massiivi HTML-elemendiks!

See oleks sama, kui järgmise HTML-i käsitsi kirjutamine:

      
  • Üks
  •   
  • kaks
  •   
  • kolm

Ma ei astu üksikasjadesse iga v-põhise atribuudi taga ja selles õppetükis. Kuid nagu näete, võivad need olla üsna kasulikud.

Kuidas siis Vue-rakendusi sellega luua?

Ehituse rakendused

Kombineerides oma rakenduse oleku andmeid nende loomulike v-põhiste atribuutidega, loote seoseid oma loogika ja rakenduse vaate renderdamise vahel.

See lühendab teie JavaScripti rakendust, säästes ribalaiust (eriti suurtes rakendustes). Samuti aitab see teil asju palju kiiremini teha.

Allolevas ekraanipildis on rakenduste karkass, kuhu kõik teie sildid ja mallid renderdatakse.

See toimib palju nagu React. Vue kohtleb teie peamist rakendust

kogu rakenduse mahutina. See salvestab omadused ja meetodid rakenduse objektis (vt allpool).

Ekraanipildil näitab sinine joon seda, kuidas teie rakenduse andmed on seotud HTML-i elementidega, mis vaate muudavad.

Roheline joon seob teie meetodid sündmustega.

Pange tähele ülaltoodud pildi punast kontuuri. Vue'is peate siduma URL-id atribuudiga: href ja mitte atribuudiga href. Kui te seda ei tee, siis link ei tööta.

// Õige (pange tähele atribuuti enne href)
 {{url}} 
// Viga (URl ei käivitu)
 {{url}} 

Rakenduse andmed

Rakenduste ehitamisel Vue'is (või isegi muudes sarnastes raamistikes või raamatukogudes) mõtlete oma andmete jaoks tavaliselt ühele peamisele salvestuskohale. Reaktis võib see olla riigi omand. Vue'is salvestatakse see lihtsalt andmeobjekti.

Vue dokumentatsiooni enda kohaselt salvestatakse andmesalvestus - mida sageli nimetatakse tõe allikaks - töötlemata andmete atribuudis põhirakendusobjektil endal:

const sourceOfTruth = {}

const application = new Vue ({data: sourceOfTruth});

Lahe on see, et saate andmetesse väärtuse salvestada: atribuuti {...} ja lasta see automaatselt oma HTML-i elementides v-teksti, v-eel, v-korra (renderdada ainult üks kord) kaudu kättesaadavaks ja v-cloak (oodake, kuni leht on renderdamise lõpetanud ja Vue on ühendatud) ja paljud muud atribuudid.

Teisisõnu, atribuudid (primitiivsed väärtused, objektid ja meetodid) muutuvad kogu rakenduses kõikjal esinevaks ning neid saab kasutada kõigis lisavõimalustes, mida Vue raamistik tabelisse toob… kasutamiseks koos atribuutidega, mis algavad prefiksiga.

Ja ainult kõrvalmärkus. Kui väldite v-klose kasutamist, võite kogeda mõnda renderdamise esemeid. Näiteks CSS-i stiil hüppab ringi just teie rakenduse laadimise esimese sekundi jooksul.

Vue rakenduse objekt

Siin saate lähtestada oma andmed ja kirjutada oma rakenduse meetodid, millega asjad valmis saada.

Nagu näete, on teil rida omadusi ja meetodeid - täpselt nagu tavalises JavaScripti klassis.

Allpool on ekraanipilt, mis näitab teie peamist rakenduse Vue objekti. Siin saate tegelikult luua oma rakenduse loogika ja salvestada atribuute, URL-i stringe ja kohandatud meetodeid. See on nagu koodiloogika eraldamine vaatest.

Kui olete alles alustanud, on hea mõte enne otse koodile hüppamist linnulennult asjadest aru saada.

Kuna te ei kirjuta koodi lihtsalt Vuega