Vie s ptičje perspektive: kako začeti z Vue.js

Zgrabite svojo kopijo CSS Visual Dictionary, vključno diagrami vseh lastnosti CSS.

Fotografiral Sam Bark na Unsplash

Od nekdaj ste se želeli začeti učiti kodirati v okviru Vue, a nekako nimate časa v svojem natrpanem urniku.

Se morda počutite preobremenjeni nad vsemi knjižnicami in okviri? Vadnica za ptice z očmi Vue (začetek) lahko pomaga.

Podobno kot React, Vue vašo JavaScript aplikacijo razdeli na več delov:

  • objekt aplikacije
  • članske metode in lastnosti
  • in dejanski pogled (tu so vaši elementi HTML).

Vue-ove atribute HTML

Vue dodaja številne atribute po meri elementom, ki jih običajno ne vidite v standardnem HTML-ju, tako da jih dodate v-.

Na primer, obstajajo v-html, v-if, v-else in mnogi drugi. Vsi imajo svoj poseben namen: upodabljajoče elemente. Oglejmo si na hitro

Boolova stikala

Drug atribut v-show je za preklop elementov glede na njihovo vidnost.

To je v podatkih o lastnostih aplikacije Vue določeno kot {boolean: true;}.

Nato ga lahko v svojem HTML-ju določite, katere elemente želite prikazati.

Pozdravljeni!

Kadar koli je App.data.boolean resničen, bo viden element

.

Vaša logika aplikacije lahko zdaj v svoji kodi "vklopi" ali "izklopi" element

. Sprememba je samodejno upodobljena.

Looping

Direktiva v-for je ustvarjanje zank za seznam elementov HTML.

To pomeni, da lahko iteratorje vdelate neposredno v elemente HTML, če želite prikazati sezname podatkov, shranjenih v matriki, v stanju vaše aplikacije Vue. Ni vam treba znova in znova vnašati istega elementa HTML.

Tu je klasičen primer iteratorja for-zanke.

Najprej pripravite podatke v vašem aplikacijskem objektu:

naj bo E = nova Vue ({
     el: '#L', // povezava do elementa id = "L"
   podatki: {
  izdelki: [
      {sporočilo: 'Ena'},
      {sporočilo: 'Dva'},
      {sporočilo: 'Tri'}]}
});

Zdaj v svojem glavnem vsebniku aplikacij HTML:

      
  • {{item.message}}

Direktiva v-for je v obliki "za element v izdelkih".

To pomeni, da ustvarite novo spremenljivko, imenovano element v zanki {{... tukaj ...}}. Elementi lastnosti izvirajo iz samega podatkovnega predmeta aplikacije.

S tem bodo predmeti JSON predmetov postali elementi HTML!

To bi bilo enako kot pisanje naslednjega HTML-ja:

      
  • Eno
  •   
  • Dva
  •   
  • Tri

Ne bom se spuščal v podrobnosti, ki so za vsakim posameznim v-atributom, in kaj počne v tej vadnici. A kot vidite, so lahko zelo koristni.

Kako torej s tem dejansko gradite Vue aplikacije?

Gradbene aplikacije

S kombiniranjem podatkov o stanju aplikacije s temi lastnimi atributi v osnovi ustvarite povezave med svojo logiko in prikazom v aplikaciji.

To skrajša vašo aplikacijo JavaScript in prihrani pasovno širino (zlasti pri velikih aplikacijah). Pomaga tudi, da boste stvari naredili veliko hitreje.

Na spodnjem posnetku zaslona je programski oder, kjer bodo upodobljene vse vaše oznake in predloge.

To deluje kot React. Vue obravnava vašo glavno aplikacijo

kot vsebnik za celotno aplikacijo. V objekt aplikacije shranjuje lastnosti in metode (glej spodaj).

Na posnetku zaslona modra črta prikazuje, kako so podatki vaše aplikacije vezani na elemente HTML, ki predstavljajo pogled.

Zelena črta povezuje vaše metode z dogodki.

Na zgornji sliki opazite rdeč obris. V Vue morate povezati URL-je z: href in ne s atributom href. Če tega ne storite, povezava ne bo delovala.

// Pravilno (opazite vodilno: pred atributom href)
 {{url}} 
// Napaka (URl se ne bo začel)
 {{url}} 

aplikacijski podatki

Pri gradnji aplikacij v Vueju (ali celo v drugih podobnih okvirih ali knjižnicah) običajno pomislite na eno primarno mesto za shranjevanje podatkov. V Reactu je to lahko državna last. V Vueu je preprosto shranjen v podatkovnem objektu.

Po sami dokumentaciji Vue je shranjevanje podatkov - ki ga pogosto imenujemo vir resnice - shranjeno v lastnosti surovih podatkov na samem glavnem aplikacijskem objektu:

const sourceOfTruth = {}

const aplikacija = nova Vue ({podatki: sourceOfTruth});

Kul pri tem je, da lahko vrednost shranite v lastnost data: {...} in jo samodejno postane na voljo v vaših elementih HTML prek v-besedila, v-pre, v-Once (upodabljajte samo enkrat) in v-plašč (počakajte, da se stran konča z upodabljanjem in je nameščen Vue) in številni drugi atributi.

Z drugimi besedami, lastnosti (primitivne vrednosti, predmeti in metode) postanejo vseprisotne v celotni aplikaciji in jih je mogoče uporabiti v vseh dodatnih funkcijah, ki jih okvir Vue prinaša v tabelo ... in jih uporabljamo skupaj s atributi, ki se začnejo z v-predpono.

In samo stransko noto. Če se izognete uporabi v-ogrinjala, lahko pride do nekaterih umetniških umetnin. Na primer, slog CSS skače naokoli v prvi sekundi po nalaganju vaše aplikacije.

Objekt Vue Application

Tu boste inicializirali svoje podatke in zapisali načine aplikacije, s katerimi boste opravili svoje delo.

Kot vidite, imate vrsto lastnosti in metod - tako kot bi jih imeli v običajnem razredu JavaScript.

Spodaj je posnetek zaslona, ​​ki prikazuje vaš glavni predmet aplikacije Vue. Tukaj dejansko gradite logiko svoje aplikacije in shranjujete lastnosti, nize URL-jev in metode po meri. Kot ločevanje logike kode od pogleda.

Ko šele začnete, je dobro, da se seznanite s ptičjimi očmi stvari, preden skočite naravnost v kodo.

Ker v Vue oznake ne samo napišete v