Vue.js uvod za ljude koji poznaju samo dovoljno jQuery-a

Logotip za Vue.js

Godinama sam imao JavaScript - mržnju.

Jezik sam upoznao na način najdražeg dječaka iz zajednice dizajna i razvoja, jQuery. Vidite, u vrijeme kada sam počeo učiti JavaScript, kao "dizajner koji šifrira", rad s jQueryem bio je čarobno iskustvo. Mogao bih učiniti modalima fadeIn i fadeOut. Pomoću biblioteke treće strane mogao bih dodati pomicanje paralaksa svom portfelju samo jednim pozivom funkcije. Gotovo sve o čemu sam mogao sanjati bilo je inkapsulirano u jednu, ~ 100kb datoteku ...

A onda je izašao Angular. Nisam imao izbora nego čitav svoj portfelj prepraviti okvirom. A onda je izašao React. Nisam imao izbora nego obnoviti cijeli portfelj s knjižnicom. A onda je izašao Vue.js. Nisam imao izbora nego obnoviti cijeli portfelj s knjižnicom ... Vidite kuda to ide.

Na stranu šale, vrlo sam uživao u tome što sam ispravio svoje JavaScript isječke kroz izgradnju tu i tamo stvari s tim različitim okvirima i knjižnicama. Pročitao sam bezbroj članaka i udžbenika u tom procesu, ali nijedan se nije držao za mene više od djela Shu Uesugija, "Uvod u React.js za ljude koji znaju samo dovoljno jQueryja za prolaz."

Shu vodi čitatelje - za koje se pretpostavlja da imaju određenu razinu znanja s JavaScript osnovama i jQueryjem - na putovanju kroz svijet React-a dok grade klon Twitterove komponente „compose tweet“.

Ovaj idejni okvir mi je bio od velike pomoći kao nekome tko najbolje uči radeći. Zapravo, svaki put kada izađe nova JavaScript biblioteka, vraća se primjer ovog članka za testiranje voda. I tako, želio bih posuditi ovaj okvir dok vas sve iskažem kroz svoje nedavno iskustvo učenja Vue.

Prije nego što započnete korake u nastavku, toplo vas savjetujem da pročitate Shuov članak. Obavlja fantastičan posao provodeći vas putem jQuery koda koji biste mogli napisati kako biste implementirali neke od ovih značajki. Stoga, kako bih umanjio rizik od viška, usredotočit ću se na prikazivanje Vue-ovih dodataka.

Što mi gradimo

Većina nas cvrkut (neki više plodan od drugih). Stoga smo vjerojatno upoznati s komponentom korisničkog sučelja na slici ispod.

Okvir

Vjerovali ili ne, ova komponenta korisničkog sučelja odličan je primjer kako Vue (i React, po Shu) može poboljšati vaš život kao JavaScript / jQuery programer. Elementi ove komponente koju ćemo danas usredotočiti na izgradnju jesu:

  • 3. Na gumb smo dodali atribut: disabled. Dvotočka koja prethodi onemogućeno označava da bismo sadržaj unutar citata trebali ocijeniti kao JavaScript izraz. Ako bismo propustili debelo crijevo, sadržaj bi se tretirao kao niz. Također ćete primijetiti da smo dodali nekoliko redaka CSS-a kako bi gumb s invaliditetom imao prepoznatljiv vizualni stil.

     Tweet 
    ...
    gumb [onemogućeno] {
      pokazivač: nije dopušteno;
      neprozirnost: .5;
    }

    4. Također smo dodali izračunati entitet na našoj instanci koji se zove tweetIsEmpty. Imajte na umu da je ovo svojstvo zapravo funkcija koja vraća logičku vrijednost na temelju duljine tweet atributa našeg podatkovnog modela. Vue pojednostavljuje pristup vašem modelu podataka i u HTML-u (kao što je prikazano gore) i u samoj instanci. Zahvaljujući magiji dvosmjernog povezivanja podataka, ova se funkcija ocjenjuje kada se ažurira vrijednost tvita. Kad se funkcija ocijeni kao istinita, naš je gumb onemogućen i obrnuto.

    tweetIsEmpty: function () {
      vrati ovaj.tweet.length === 0;
    }

    Doduše, to se osjećalo poput dima i ogledala kad sam prvi put započeo s Vueom. Ono što mi je pomoglo bilo je da doslovno vidim što se događa s našim modelom podataka ispod haube dok sam komunicirao s komponentom. Budući da našem modelu podataka lako možemo pristupiti u našem HTML-u putem gore spomenute sinteze kovrčavih zagrade, možemo izgraditi brzu, vizualnu petlju povratnih informacija. Postići!

    Vrijednost tweet je: {{tweet}}

    Vrijednost tweetIsEmpty je: {{tweetIsEmpty}}

    Slobodno ponovite ovaj korak ako vas bilo što usput zbunjuje (bilo zbog slabih mogućnosti pisanja ili kodiranja, bilo zbog samog Vuea). Pošaljite tweet ili ostavite komentar ako imate bilo kakvih pitanja.

    Treći korak: provedite drugu značajku - prikažite broj preostalih znakova

    Opis značajke: Kao korisničke vrste, pokažite broj preostalih znakova (od 140) u tweetu. Ako je korisnik upisao više od 140 znakova, isključite plavi gumb Tweet.

    Do sada smo naučili o dvosmjernim vezama podataka i izračunavanju svojstava, konceptima koji su u samoj jezgri Vuea. Naš je sretan dan, jer možemo upotrijebiti te koncepte da izgradimo sljedeću značajku: korisnicima pokazati koliko preostalih znakova (od 140) i onemogućiti gumb ako pomakne ovo ograničenje.

    Još jednom, ispričat ću vas kroz JavaScript i HTML promjene potrebne za implementaciju ove značajke.

    U našem JavaScript-u učinili smo nekoliko stvari.

    1. Kao mjera domaćinstva nabrojali smo maksimalnu duljinu tvita (140 znakova) kao konstantu, MAX_TWEET_LENGTH.
    const MAX_TWEET_LENGTH = 140;

    2. Dodali smo još jedno izračunato svojstvo, characterRemaining, koje dinamički vraća razliku između 140 i duljine tweet-a koji je uneo korisnik.

    preostali znakovi: funkcija () {
      povratak MAX_TWEET_LENGTH - this.tweet.length;
    }

    3. Stari naziv tweetIsEmpty preimenovali smo u tweetIsOutOfRange i u skladu s tim ažurirali logiku funkcije. Imajte na umu kako koristimo svojstvo izračunatih znakovaRemaining za dobivanje ove vrijednosti. Ura za ponovnu upotrebu koda!

    tweetIsOutOfRange: function () {
      vrati ovo.svojstvaOstali == MAX_TWEET_LENGTH
          || ovaj znak obilježja ostatak <0;
     }

    S aspekta HTML-a stvari, moramo izvršiti samo nekoliko promjena, zahvaljujući moći Vueovog dvosmjernog povezivanja podataka.

       {{znakoviOstalo}}    Tweet

    Za vizualne učenike vani pogledajte magiju:

    Korak 4: implementirati treću značajku: Uvjetno oblikovanje pokazatelja "Preostali znakovi"

    Opis značajke: Kada sastavljate Tweet, boja indikatora "preostali znakovi" trebala bi se promijeniti u tamno crvenu kad ostane samo dvadeset znakova i svijetlo crvenu kada ostane deset ili manje znakova.

    Manipuliranje stilom ili klasom elemenata može biti nezgrapno s jQueryjem, a Vue nudi mnogo čistiji način. Vueov pristup se čini deklarativnijim jer opisujete kako želite da se nešto promijeni u stilu (koji se temelji, na primjer, na određenom stanju), i dopuštate Vueu da diže teške korake.

    U kontekstu ove značajke, naš pokazatelj "preostali znakovi" ima dva takva stanja i odgovarajuću CSS klasu za svako.

    1. Kad ostane između deset i dvadeset znakova, indikator bi trebao imati klasu tamnocrvene boje
    2. Kad ostane manje od deset znakova, indikator bi trebao imati klasu svjetlo crvene boje

    Do sad bi vaš mozak Vue trebao vikati „RAČUNALNE SVOJINE!“ Dakle, dopustite nam da ovaj mozak obvezujemo i povežemo ta svojstva.

    underTwentyMark: function () {
      vratite ovo.svojstvaOstalo <= 20
        && this.charactersOstalo> 10;
      }
    underTenMark: function () {
      vrati ovo.svojstvaOstalo <= 10;
    }

    S obzirom na našu logiku, pogledajmo jedan od načina na koji Vue obrađuje uvjetni stil: direktivu v-bind: class. Ova direktiva očekuje objekt čiji su ključevi CSS klase i čije su vrijednosti odgovarajuća izračunata svojstva.

    {'tamnocrvena': underTwentyMark, 'svijetlo-crvena': underTenMark}

    Dodavanjem direktive na span oznaku koja zatvara naš pokazatelj "preostali znakovi", dovršili smo svoju značajku.

    
      {{znakoviOstalo}}
    

    Pod haubom i zahvaljujući dvosmjernom povezivanju podataka, Vue će upravljati dodavanjem i uklanjanjem ovih klasa u funkciji određenih izračunatih svojstava.

    Korak 5: implementirajte četvrtu značajku: "Priloži fotografiju" UX

    Opis značajke: Dopustite korisnicima da dodaju jednu fotografiju na njihov tweet putem dijaloškog programa za odabir datoteka. Kad je fotografija prenesena, pokažite je ispod textarea i dopustite korisnicima da obrišu privitak klikom na sliku

    Pravo upozorenje: u ovom je odjeljku puno toga. Ljepota je u tome što, unatoč tome što ova značajka dodaje značajnu funkcionalnost, nećemo morati pisati toliko koda. Dakle, započnimo s raščlanjivanjem dizajna interakcije na korake.

    1. Korisnik klikne gumb "Dodaj fotografiju"
    2. Korisnik vidi dijalog za odabir datoteke i može odabrati jednu fotografiju koju će prenijeti
    3. Nakon odabira fotografije, ispod textarea se pojavljuje okvir s odabranom fotografijom iznutra
    4. Korisnik klikne kružnim gumbom X za uklanjanje fotografije
    5. Korisnik vidi početno stanje od koraka 1

    Do sada još uvijek nismo obavili nijedan događaj (slušanje klikova gumba, promjene unosa itd.). Kao što možete očekivati, Vue olakšava upravljanje takvim događajima pružajući nam v-on direktivu (ukratko @). Prolazeći metodu kao vrijednost ove direktive, možemo učinkovito preslušati DOM događaje i pokrenuti JavaScript kada se aktiviraju.

    Prije nego što se udubite u naš dugometražni rad, neka brza vatra.

    Rukovanje događajima je jednostavno kao dodavanje direktive @click zadanom gumbu i dodavanje odgovarajuće metode ključu metoda na našoj Vue instanci.

    
    ...
    metode: {
      logNameToConsole: function () {
        ako (ovo ime! == 'Donald Trump') {
          console.log (this.name);
        } else {
          console.warn ('Oprosti, ne razumijem');
        }
      }
    }

    Natrag na naš rad na značajkama ... U ovom koraku su se naša oznaka i JavaScript promijenili na sljedeće načine:

    1. Dodali smo gumb s @click direktivom. Kad korisnik klikne ovaj gumb, nazvat će se metoda ExecuFileUpload.
     ... 

    Dakle, u našem JavaScriptu dodajmo metode ključa za našu primjerak Vue s navedenom metodom iznutra, kao i atribut podataka za našu fotografiju.

    podaci: {
     foto: null
    }
    izračunao: {},
    metode: {
      ggerFileUpload: function () {
        . To $ refs.photoUpload.click (); // LOLWUT?
      }
    }

    2. notorno je teško stilizirati unose u HTML5 datoteke. Jedan zaobilazni postupak uključuje stavljanje unosa u DOM i skrivanje s CSS-om. Da bi preglednik mogao otvoriti alat za biranje izvornih datoteka, na taj se ulaz mora kliknuti. Drugačije je pitanje kako se klikne i kako klijent rukuje s onim što korisnik učita.

    U naš markup dodali smo jedan takav ulaz i sakrili ga s posebnom klasom skrivanja. Također smo dodali još nekoliko atributa koje vrijedi nazvati:

    • Atribut ref koristi se za registriranje reference na dati element DOM. S obzirom na ovu referencu, možemo pristupiti DOM elementu u našem JavaScript kodu s ovim. $ Refs.photoUpload. Što znači da na ovom elementu možemo programsko pokrenuti događaj klik () i zaobići gore opisani izazov.
    • Klikom na ulaz jedna je stvar; rukovanje datotekom koju korisnik upiše je drugo. Srećom, Vue nam omogućava da priključimo rukovatelj događaju promjene ulaza putem direktive @change. Način prelaska na ovu direktivu prikazivat će se nakon što korisnik odabere datoteku iz programa za odabir datoteka. Ta je metoda, handlePhotoUpload, prilično jednostavna
    handlePhotoUpload: funkcija (e) {
      var self = ovo;
      var čitač = novi FileReader ();
          
      reader.onload = funkcija (e) {
        // Podesite taj osnovni niz 64 na tipku "fotografija" našeg podatkovnog modela
        self.photo = (e.target.result);
      }
      // Pročitajte datoteku za prijenos kao osnovni 64 niz
      reader.readAsDataURL (e.target.files [0]);
     }

    Duboko udahnite jer smo s ovom značajkom gotovo gotovi!

    Nakon što je korisnik učitao fotografiju, trebamo pokazati okvir ispod textarea s odabranom fotografijom. Kao što je uvjetno oblikovanje elemenata povjetarac s Vueom, tako je i uvjetno prikazivanje ili prikaz elemenata. Primijetit ćete da smo u naš HTML dodali sljedeće oznake ispod textarea.

                  ...             

    Vue nudi nekoliko pomoćnika predloška (v-if, v-show, v-else itd.) Koji će vam pomoći da uvjetno prikažete i sakrijete sadržaj. Kad se izraz JavaScript prenesen ovoj direktivi procijeni na istinit, element se ispoljava i obrnuto.

    U našem slučaju dodali smo v-if izjavu koja procjenjuje izračunatu fotografiju svojstvaHasBeenUploaded.

    photoHasBeenUploaded: function () {
      vrati ovo.foto! == null;
    }

    Kad se ta funkcija ocijeni istinitom - kada foto ključ našeg modela podataka nije jednak nuli - dobiva se cjelokupan div. Evo ga!

    I unutar tog diva stvaramo dva elementa:

    1. Slika u prilogu prosljeđujejući sadržaj foto ključa našeg modela podataka podacima Vue-ove v-bind: src direktive
    2. Gumb za brisanje sadrži drugi primjer alata za obradu @ klika, a ovaj se poziva na funkciju koja "uklanja" fotografiju postavljanjem na tipku fotografije našeg modela podataka na nulu.
    ukloniFoto: funkcija () {
      this.photo = null;
    }

    Skoro smo tamo.

    Korak 6: Ispravljanje, korisnik može priložiti "fotografije"

    Dakle, možemo efikasno postupati s time da korisnik pričvrsti jednu fotografiju na Tweetu, ali što ako bi željela prenijeti mnogo fotografija?

    Do sad biste trebali razmišljati o nekom efektu: "Pretpostavljam da je jedina bitna promjena ovdje mogućnost prikazivanja više slika u tom okviru koji se uvjetno pojavljuje ispod textarea, s obzirom da smo već spojili naše dostavljače ..." I u pravu si! Pogledajmo korake koje trebamo slijediti

    1. Moramo ažurirati naš podatkovni model mijenjanjem fotografije u fotografije, pri čemu je novi ključ niz baznih niza (nije niti jedan base64 string)
    podaci: {
      fotografije: []
    }

    2. Moramo ažurirati našu izračunatu fotografiju svojstvaHasBeenUploaded da provjerimo duljinu našeg novog ključa za fotografije, koji je sada niz.

    photoHasBeenUploaded: function () {
      vrati ovo.photos.length> 0;
    }

    3. Moramo ažurirati svoj input @change handler da bismo prešli preko prenesenih datoteka i pritisnuli ih na našu tipku za fotografije.

    handlePhotoUpload: funkcija (e) {
      var self = ovo;
      var datoteke = e.target.files;
      za (neka je i = 0; i 
        reader.onloadend = funkcija (evt) {
          self.photos.push (evt.target.result);
        }
        reader.readAsDataURL (datoteke [i]);
      }
    }

    S HTML-a, međutim, moramo se upustiti u novi teritorij. Prekontroliranje podataka i prikaz sadržaja uz jQuery može biti nezgodno.

    var array = [1, 2, 3, 4, 5];
    var newHTML = [];
    za (var i = 0; i ' + niz [i] + '');
    }
    $ ( "Element ") HTML (newHTML.join ("")).

    Srećom, Vue nudi apstrakciju nad ovim postupkom pomoću v-for direktive. Ovom se direktivom očekuje da pružite izraz u obliku (stvar, indeks) u collectionOfThings, gdje je collectionOfThings izvorni niz, stvar je alias za matrirani element matrice, a indeks je, pa, indeks tog elementa ,

    Prototipni primjer može izgledati ovako:

    Tamo gdje smo prije imali pojedinačni figurni element za fotografiju koju je korisnik učitao, sada ćemo imati N oznaka figura koje odgovaraju duljini polja izvora fotografija.

    Srećom po nas, naša se marketa ne mora previše drastično mijenjati jer je cjelokupna struktura dizajna i dalje ista.

    
      
        ...
      
      
    

    Jedna promjena koju trebamo izvršiti odnosi se na metodu removePhoto koja je prije, posebnu tipku fotografije na našem modelu podataka postavila na nulu. Sada, budući da imamo N broj fotografija, moramo proslijediti indeks elementa metodi removePhoto i izvući taj element iz polja.

    removePhoto: funkcija (indeks) {
      this.photos.splice (indeks, 1);
    }

    7. korak: Animacija + dodatni kredit

    U Twitter-ovom korisničkom sučelju, komponenta "Compose Tweet" otvara se u modalitetu. Za naše veliko finale, želio bih primijeniti sve tehnike Vue koje smo do sada naučili i uvesti još jednu: prijelaze.

    Životni ciklus tranzicije

    Riječi opreza, prijelazi su ogromna tema u zemlji Vue. Istražit ćemo i implementirati tanki dio ove funkcionalnosti, naime integrirajući biblioteku animacija treće strane, Velocity JS, s Vueom.

    Ukratko, Vue pruža komponentu prijelaza koja vam omogućuje dodavanje animacija za ulazak / izlazak za element koji se nalazi unutar, pod uvjetom da je element uvjetno prikazan putem, na primjer, v-if ili v-show direktive.

    'prijelaz
      name = "modal-prijelaz"
      v na: ući = "modalEnter"
      v na: ostaviti = "modalLeave">
        
               

    U našem primjeru dodali smo dvije metode koje korespondiraju s dva događaja u životnom ciklusu tranzicije: v-on: ulaz i v-on: dopust. Stoga smo dodali ove definicije metoda našem primjeru Vue, odloživši brzini JS da izblijedješi naš modal ulaze i izlaze.

    metode: {
      modalEnter: funkcija (el, urađeno) {
        Velocity (el, 'fadeIn', {trajanje: 300, dovršeno: završeno, prikaz: 'flex'})
      }
      modalLeave: funkcija (el, urađeno) {
        Velocity (el, 'fadeOut', {trajanje: 300, dovršeno: završeno})
      }
    }

    Kao što je gore spomenuto, prijelaz će aktivirati kada se element sadržan unutar uvjetno postavi za prikaz. Dakle, na unutarnji div naše tranzicijske komponente dodali smo v-if deklaraciju čija je vrijednost boolean modalShowing. Ažurirajte model podataka našeg primjerka u skladu s tim.

    podaci: {
      modalShow: lažno
    }

    Sada, kada želimo pokazati modalnu, sve što moramo učiniti je postaviti taj logičan na istinit!

    I napisati metodu za podudaranje.

    hidModal: function () {
      this.modalShowing = lažno;
    }
    showModal: function () {
      this.modalShowing = istina;
    }

    Uz neke CSS trikove, na pozadinu smo dodali i alat za obradu događaja klika, tako da korisnici mogu sakriti modal. Postići!

    Zaključak

    Pa, nadam se da to nije bilo previše bolno (i da ste naučili stvar ili dvije na putu). Pogledali smo samo mali dio onoga što Vue može ponuditi, iako su, kao što je već spomenuto, ovi koncepti ključni za otključavanje potencijala Vuea.

    Priznajem, nepošteno je uspoređivati ​​Vue s jQueryjem. To su proizvodi različitog vremena, s posve različitim slučajevima upotrebe. Međutim, za one koji su se borili na putu da nauče DOM manipulaciju i rukovanje događajima putem jQuery-a, nadam se da su ti koncepti dah svježeg zraka koji možete primijeniti u svom procesu rada.