Vue no putna lidojuma: kā sākt darbu ar Vue.js

Paņemiet līdzi CSS vizuālās vārdnīcas kopiju. visu CSS īpašību diagrammas.

Sems Bārka fotoattēls vietnē Unsplash

Jūs vienmēr esat vēlējies sākt mācīties kodēšanu Vue ietvarā, bet kaut kā jums vienkārši nav laika aizņemtajā grafikā.

Varbūt jūs jūtaties satriekts par visām bibliotēkām un ietvariem? Varētu palīdzēt šī putna acs Vue (darba sākšanas) apmācība.

Līdzīgi kā React, Vue sadala jūsu JavaScript lietojumu vairākās daļās:

  • lietojumprogrammas objekts
  • locekļu metodes un īpašības
  • un faktiskais skats (šeit atrodas HTML elementi).

Vue's HTML atribūti

Vue pievieno daudz pielāgotu atribūtu elementiem, kurus parasti neredzat HTML formātā, pirms tiem pievienojot v-.

Piemēram, ir v-html, v-if, v-else un daudzi citi. Viņiem visiem ir savs konkrētais mērķis: elementu atveidošana. Apskatīsim ātri

Būla slēdži

Vēl viens atribūts v-show ir paredzēts elementu pārslēgšanai, pamatojoties uz to redzamības stāvokli.

Tas Vue lietojumprogrammas rekvizītos ir norādīts kā {boolean: true;}.

Pēc tam savā HTML varat to izmantot, lai noteiktu, kurus elementus parādīt.

Labdien!

Kad App.data.boolean ir taisnība, elements

būs redzams.

Jūsu lietojumprogrammas loģika tagad var “ieslēgt”

elementu “ieslēgt” vai “izslēgt” jūsu kodā. Izmaiņas tiek automātiski atveidotas.

Cilpas

V-for direktīva ir paredzēta, lai izveidotu cilpas HTML elementu uzskaitīšanai.

Tas nozīmē, ka jūs varat iegult iteratorus tieši HTML elementos, lai renderētu datu sarakstus masīvā jūsu Vue programmas stāvoklī. Tas pats HTML elements nav jāievada atkal un atkal.

Šeit ir klasisks piemērs cilpas iteratoram.

Vispirms sagatavojiet datus lietojumprogrammas objektā:

ļaujiet E = jauna Vue ({
     el: '#L', // saite uz id = "L" elementu
   dati: {
  priekšmeti: [
      {Ziņojums: 'Viens'},
      {Ziņojums: 'Divas'},
      {Ziņojums: 'Trīs'}]}
});

Tagad galvenajā HTML lietojumprogrammas konteinerā:

      
  • {{item.message}}

V-for direktīva ir formātā “priekšmetam vienībās”.

Tas nozīmē, ka jūs izveidojat jaunu mainīgo, ko sauc par vienumu cilpā {{... šeit ...}}. Īpašuma vienumi nāk no paša lietojumprogrammas datu objekta.

Tas padarīs jūsu vienumus par JSON objektiem kā HTML elementiem.

Tas būtu tāds pats kā šāda HTML rakstīšana ar roku:

      
  • Viens
  •   
  • divi
  •   
  • trīs

Es neiedziļināšos detalizēti par katru atsevišķo v balstīto atribūtu un to, ko tas rada šajā apmācībā. Bet kā redzat, tie var būt diezgan noderīgi.

Tātad, kā jūs ar šo faktiski veidojat Vue lietojumprogrammas?

Celtniecības lietojumprogrammas

Apvienojot lietojumprogrammas stāvokļa datus ar šiem vietējiem v balstītajiem atribūtiem, jūs izveidojat asociācijas starp savu loģiku un lietojumprogrammas skata renderēšanu.

Tas saīsina jūsu JavaScript lietojumprogrammu, ietaupot joslas platumu (īpaši lielām lietotnēm). Tas arī palīdz jums paveikt lietas daudz ātrāk.

Zemāk redzamajā ekrānuzņēmumā lietojumprogrammu sastatnes atrodas uz visām jūsu atzīmēm un veidnēm.

Tas darbojas daudz kā React. Vue jūsu galveno lietojumprogrammu

uzskata par visas lietotnes konteineru. Tas glabā rekvizītus un metodes lietojumprogrammas objektā (skat. Zemāk).

Ekrānuzņēmumā zilā līnija norāda, kā lietojumprogrammas dati tiek piesaistīti HTML elementiem, kas nodrošina skatu.

Zaļā līnija saista jūsu metodes ar notikumiem.

Ievērojiet augšējā attēlā redzamo sarkano kontūru. Vue jums ir jāsaista URL ar: href, nevis atribūtu href. Ja jūs to nedarāt, saite nedarbosies.

// Pareizi (ievērojiet vadošo: pirms href atribūta)
 {{url}} 
// Kļūda (URl netiks palaista)
 {{url}} 

Lietojumprogrammas dati

Veidojot lietojumprogrammas Vue (vai pat citās līdzīgās shēmās vai bibliotēkās), jūs parasti domājat par vienu primāro datu glabāšanas vietu. Reaktī tas varētu būt valsts īpašums. Vue to vienkārši glabā datu objektā.

Saskaņā ar pašu Vue dokumentāciju, datu glabāšana - ko bieži dēvē par patiesības avotu - tiek saglabāta neapstrādātu datu īpašumā uz pašu galveno lietojuma objektu:

const sourceOfTruth = {}

const pieteikums = jauna Vue ({data: sourceOfTruth});

Forši, ka varat saglabāt vērtību datos: īpašums {...} un panākt, lai tas automātiski būtu pieejams jūsu HTML elementos, izmantojot v-text, v-pre, v-once (renderēt tikai vienu reizi) un v-apmetnis (pagaidiet, līdz lapa ir pabeigta, un Vue ir uzstādīta) un daudzi citi atribūti.

Citiem vārdiem sakot, rekvizīti (primitīvās vērtības, objekti un metodes) visā lietojumprogrammā kļūst visuresoši, un tos var izmantot visās papildu funkcijās, ko Vue ietvars satur tabulā…, lai tās izmantotu kopā ar atribūtiem, kas sākas ar prefiksu.

Un tikai blakus piezīme. Ja jūs izvairaties no v-apmetņa izmantošanas, iespējams, būs redzami daži izciršanas artefakti. Piemēram, CSS stils lēkā apkārt tikai lietotnes ielādes pirmajā sekundē.

Vue pieteikuma objekts

Šeit jūs inicializēsit savus datus un uzrakstīsit savas lietojumprogrammas metodes, kas ļauj paveikt lietas.

Kā redzat, jums ir virkne īpašību un metožu - tieši tāpat kā parastā JavaScript klasē.

Zemāk ir ekrānuzņēmums, kurā redzams jūsu galvenais Vue lietojumprogrammas objekts. Šajā vietā jūs faktiski veidojat savas lietojumprogrammas loģiku un glabājat rekvizītus, URL virknes un pielāgotas metodes. Tas ir tāpat kā koda loģikas atdalīšana no skata.

Kad jūs tikko sākat darbu, ieteicams pirms ķerties pie koda tieši pie putna lidojuma, lai uzzinātu lietas.

Tā kā ar Vue kodu nerakstāt tikai