Madarak szeme Vue: hogyan kezdje el a Vue.js-t?

Ragadja meg a CSS Visual Dictionary példányát is. az összes CSS tulajdonság diagramja.

Fotó: Sam Bark az Unsplash-en

Mindig a Vue keretrendszerben akarta elkezdeni a kódolást, de valahogy nem volt ideje a forgalmas ütemtervében.

Lehet, hogy elárasztja az összes könyvtárat és keretet? Ez a madártávlatú Vue (kezdés) bemutató segíthet.

Akárcsak a React, a Vue több részre bontja a JavaScript alkalmazását:

  • az alkalmazás objektuma
  • tag módszer és tulajdonságai
  • és a tényleges nézet (itt vannak a HTML elemek).

A Vue v-alapú HTML-attribútumai

A Vue sok egyedi attribútumot ad hozzá az elemekhez, amelyeket általában nem lát a standard HTML-ben, az előtaggal a v- betűvel.

Például vannak v-html, v-if, v-else és még sokan mások. Mindegyiknek megvan a saját célja: az elemek renderelése. Vessen egy pillantást.

Boolean kapcsolók

Egy másik v-show attribútum az elemek váltására szolgál azok láthatósági állapota alapján.

Ezt a Vue alkalmazás tulajdonság adataiban {logikai: igaz;} -nak adják meg.

Ezután a HTML-ben felhasználhatja annak meghatározására, hogy mely elemeket jelenítse meg.

Helló!

Ha az App.data.boolean igaz, a

elem látható lesz.

Az alkalmazás logikája mostantól 'be- vagy kikapcsolhatja' a kódjában a

elemet. A változtatás automatikusan megjelenik.

hurok

A v-for irányelv hurkokat hoz létre a HTML elemek felsorolására.

Ez azt jelenti, hogy az iteratorokat közvetlenül HTML elemekbe ágyazhatja be, hogy a Vue alkalmazás állapotában tömbben tárolt adatok listáját megjelenítse. Nem kell újra és újra beírnia ugyanazt a HTML elemet.

Itt egy klasszikus példa egy hurok iteratorra.

Először készítse elő az alkalmazásobjektum adatait:

legyen E = új Vue ({
     el: '#L', // link az id = "L" elemhez
   adatok: {
  tételek: [
      {üzenet: 'One'},
      {üzenet: 'Két'},
      {üzenet: 'Három'}]}
});

Most a HTML-alkalmazás fő tárolójában:

      
  • {{item.message}}

A v-for irányelv „tételekhez tételekre” formátumban van.

Ez azt jelenti, hogy létrehoz egy új változót, az úgynevezett elemet a {{... itt ...}} hurokba. Az ingatlan elemek maga az alkalmazás adatobjektumából származnak.

Ezzel az elem tömbje JSON-objektumokat HTML elemekként jelenít meg!

Ugyanaz lenne, ha kézzel írnánk a következő HTML-t:

      
  • Egy   
  • Két   
  • Három

Nem fogok belemenni az egyes v-alapú attribútumok mögé és a bemutató részleteibe. De amint láthatja, ezek nagyon hasznosak lehetnek.

Szóval hogyan építheti fel ezzel a Vue-alkalmazásokat?

Építési alkalmazások

Az alkalmazás állapotának adatainak ezekkel a natív v-alapú attribútumokkal való kombinálásával asszociációkat hozhat létre a logika és az alkalmazás nézetének megjelenítése között.

Ez lerövidíti a JavaScript alkalmazást, sávszélességet takarítva meg (különösen nagy alkalmazások esetén). Segít abban is, hogy a dolgok sokkal gyorsabban megtörténjenek.

Az alábbi képernyőképen az alkalmazás állványa az, ahol az összes címke és sablon megjelenik.

Ez nagyban működik, mint a React. A Vue a fő alkalmazást

az egész alkalmazás tárolójaként kezeli. Tárolja a tulajdonságokat és a módszereket az alkalmazásobjektumban (lásd alább).

A képernyőképen a kék vonal jelzi, hogy az alkalmazás adatai hogyan kapcsolódnak a nézetet megjelenítő HTML elemekhez.

A zöld vonal összekapcsolja módszereit az eseményekkel.

Vegye figyelembe a fenti képen a piros körvonalat. A Vue-ban a URL-eket a következőkre kell kötnie: href, nem pedig a href attribútummal. Ha nem így van, akkor a link nem fog működni.

// Helyes (vegye figyelembe a vezető: href attribútum előtt)
 {{url}} 
// Hiba (az URl nem indul el)
 {{url}} 

Alkalmazási adatok

Amikor alkalmazásokat épít a Vue-ban (vagy akár más hasonló keretekbe vagy könyvtárakba), általában egy elsődleges adattároló helyre gondol. Re reagálva ez az állami tulajdon lehet. A Vue-ban azt egyszerűen az adatobjektum tárolja.

Maga a Vue dokumentációja szerint az adattárolást - amelyet gyakran igazságforrásnak is neveznek - a fő alkalmazásobjektum nyers adatainak tulajdonsága tárolja:

const sourceOfTruth = {}

const alkalmazás = új Vue ({data: sourceOfTruth});

A dolog az, hogy egy értéket tárolhat az adatokban: {...} tulajdonság, és automatikusan elérhetővé válik a HTML elemeiben a v-text, v-pre, v-once (csak egyszer teszi) és v-köpeny (várjon, amíg az oldal befejezi a megjelenítést és a Vue be van építve) és még sok más attribútum.

Más szavakkal: a tulajdonságok (primitív értékek, objektumok és módszerek) mindenütt jelen vannak az alkalmazásban, és felhasználhatók az összes extra szolgáltatásban, amelyet a Vue keret hoz a táblába… felhasználni a v-előtaggal kezdődő attribútumokkal együtt.

És csak egy mellékjegy. Ha elkerüli a v-köpeny használatát, előfordulhat, hogy megjelenítési tárgyak találhatók. Például a CSS stílus az alkalmazás betöltése első pillanatában ugrik körül.

Vue alkalmazás objektuma

Itt inicializálja adatait, és megírja az alkalmazás módszereit, amelyek elvégzik a dolgokat.

Mint láthatja, számos tulajdonsággal és módszerrel rendelkezik - ugyanúgy, mint egy szokásos JavaScript osztályban.

Az alábbiakban egy képernyőkép jelenik meg a Vue alkalmazás fő objektumáról. Itt állíthatja be valójában az alkalmazás logikáját, és tárolja a tulajdonságokat, az URL-címsort és az egyedi módszereket. Olyan, mint elválasztani a kódlogikát a nézetről.

Ha még csak kezdődik, érdemes megragadni a madártávlatot a dolgok előtt, mielőtt egyenesen a kódba ugrnának.

Mivel a Vue-vel nem csak a kódot írja be a