Vue.js-i sissejuhatus inimestele, kes tunnevad piisavalt jQueryt, et neist mööda saada

Ettevõtte Vue.js logo

Mul on JavaScriptiga olnud aastaid armastuse-vihkamise suhe.

Sain keele selgeks disaini- ja arenduskogukonna lemmik piitsupoisi jQuery abil. Näete, kui ma hakkasin JavaScripti õppima disainerina, kes kodeerib, oli jQueryga töötamine maagiline kogemus. Ma võiksin modaale muuta fadeIn ja fadeOut. Kolmanda osapoole raamatukoguga saaksin oma portfelli sirvimise kerimise lisada vaid ühe funktsioonikõnega. Peaaegu kõik, millest ma oleksin võinud unistada, oli kapseldatud ühte ~ 100 kB faili ...

Ja siis tuli välja Angular. Mul polnud muud valikut kui kogu oma portfell raamistikuga ümber teha. Ja siis tuli välja React. Mul polnud muud valikut kui kogu oma portfoolio koos raamatukoguga uuesti teha. Ja siis tuli välja Vue.js. Mul polnud muud valikut kui kogu oma portfoolio koos raamatukoguga uuesti teha ... Näete, kuhu see läheb.

Kui kõik naljad kõrvale jätta, siis on mulle tohutult meeldinud oma JavaScripti tükkide lihvimine, ehitades asju siin-seal nende erinevate raamistike ja raamatukogudega. Olen selle käigus lugenud lugematuid artikleid ja õpetusi, kuid ükski neist pole minu jaoks kinni jäänud kui Shu Uesugi kirjatükk “React.js Sissejuhatus inimestele, kes teavad, et teil on piisavalt jQuery tegemist.”

Shu viib lugejad - kellel JavaScripti põhialuste ja jQuery kasutamisega eeldatakse mingil tasemel oskusi - reisile läbi Reaketi maailma, kui nad ehitavad Twitteri komponendi „säutsu komponeerimine“ klooni.

See kontseptuaalne raamistik oli mulle üsna kasulik, sest keegi, kes õpib kõige paremini tehes. Tõepoolest, iga kord, kui ilmub uus JavaScripti teek, leian, et pöördun tagasi selle artikli näite juurde, et katsetada veekogusid. Niisiis, tahaksin selle kaadri laenata, kui tutvustaksin teid kõiki oma hiljutise kogemuse Vue õppimise kaudu.

Enne kui alustate järgmiste sammudega, soovitan teil tungivalt lugeda Shu artiklit. Ta teeb fantastilist tööd ja juhendab teid läbi jQuery koodi, mille võite kirjutada, et mõnda neist funktsioonidest rakendada. Seega ja koondamise ohu leevendamiseks keskendun teile Vue sisse- ja väljalülitamise võimaluste tutvustamisele.

Mida me ehitame

Enamik meist piiksub (mõned laiemalt kui teised). Nii et tõenäoliselt oleme kasutajaliidese komponendiga tuttavad alloleval ekraanipildil.

Twitteri lahter “Koosta Tweet”

Uskuge või mitte, see kasutajaliidese komponent on suurepärane näide sellest, kuidas Vue (ja reaalajas vastavalt Shu-le) võiks teie elu JavaScripti / jQuery arendajana parandada. Selle komponendi elemendid, millele me täna keskendume, on järgmised:

  • 3. Lisasime nupule atribuudi: keelatud. Keelatud koolon eelneb, et sooviksime hinnapakkumiste sisu JavaScripti avaldisena hinnata. Kui jätaksime koolonita välja, käsitletaks sisu stringina. Pange tähele ka seda, et oleme lisanud paar rida CSS-i, et keelata nupul selge visuaalne stiil.

     piiksuma 
    ...
    nupp [keelatud] {
      kursor: pole lubatud;
      läbipaistmatus: .5;
    }

    4. Lisasime oma eksemplarile ka arvutatud omaduse tweetIsEmpty. Pange tähele, et see atribuut on tegelikult funktsioon, mis tagastab tõeväärtuse, mis põhineb meie andmemudeli säutsu atribuudi pikkusel. Vue muudab teie andmemudelile juurdepääsu nii HTML-is (nagu ülalpool näidatud) kui ka eksemplaris enda jaoks lihtsaks. Tänu kahesuunalise andmete sidumise võlule hinnatakse seda funktsiooni, kui säutsu väärtust värskendatakse. Kui funktsioon tõeseks osutub, on meie nupp keelatud ja vastupidi.

    tweetIsEmpty: function () {
      tagastage see.tweet.length === 0;
    }

    Tõsi, see tundus nagu suits ja peeglid, kui ma Vuega esimest korda alustasin. Mis aitas mind, oli sõna otseses mõttes nägemine, mis juhtus meie andmemudeliga kapoti all, kui ma komponendiga suheldsin. Kuna me saame oma HTML-i andmemudelile hõlpsalt juurde pääseda ülalnimetatud lokkis trakside süntaksi kaudu, saame luua kiire visuaalse tagasiside ahela. Skoor!

    säutsu väärtus on: {{tweet}}

    tweetIsEmpty väärtus on: {{tweetIsEmpty}}

    Korrake seda sammu, kui midagi tee ääres oli segane (kas minu kehva kirjutamis- või kodeerimisoskuse või Vue enda tõttu). Kui teil on mingeid konkreetseid küsimusi, saatke säuts või jätke kommentaar.

    3. samm: rakendage teine ​​funktsioon - näidake allesjäänud märkide arvu

    Funktsiooni kirjeldus: kui kasutaja tipib, näidake säutsu allesjäänud tähemärkide arvu (140-st). Kui kasutaja on sisestanud rohkem kui 140 tähemärki, keelake sinine nuppu Tweet.

    Siiani oleme õppinud andmete kahesuunalist sidumist ja arvutatud omadusi - kontseptsioone, mis on Vue keskmes. See on meie õnnelik päev, sest saame kasutada neid kontseptsioone oma järgmise funktsiooni ehitamiseks: näidata kasutajatele, mitu tähemärki (140-st) alles jääb, ja nupu keelamist, kui see piir varjutatakse.

    Veelkord tutvun teid selle funktsiooni rakendamiseks vajalike JavaScripti ja HTML muudatustega.

    Oleme oma JavaScriptis teinud mõned toimingud.

    1. Majapidamismeetmena loetlesime säutsu maksimaalse pikkuse (140 tähemärki) konstantsena, MAX_TWEET_LENGTH.
    const MAX_TWEET_LENGTH = 140;

    2. Lisasime veel ühe arvutatud atribuudi, rakstidRemaining, mis tagastab dünaamiliselt erinevuse 140 ja kasutaja sisestatud säutsu pikkuse vahel.

    tegelaskujudJälevad: funktsioon () {
      tagastama MAX_TWEET_LENGTH - see.tweet.length;
    }

    3. Me nimetasime vana tweetIsEmpty atribuudiks tweetIsOutOfRange ja värskendasime vastavalt funktsiooni loogikat. Pange tähele, kuidas me selle väärtuse saamiseks arvutatud tähemärkiRaasumine kasutame. Hooray koodi taaskasutamiseks!

    tweetIsOutOfRange: function () {
      tagastage see. märkide jäämine == MAX_TWEET_LENGTH
          || see.märgidJääle <0;
     }

    Asjade HTML-i osas peame tegema vaid mõned muudatused tänu Vue kahesuunalise andmete sidumise võimalusele.

       {{characterRemaining}}    piiksatus

    Sealse visuaalse õppija jaoks jälgige maagiat:

    4. samm: rakendage kolmas funktsioon: indikaatori „Järelejäänud märgid” tingimuslik stiil

    Funktsiooni kirjeldus: Tweet koostamisel peaks indikaatori „järelejäänud tähemärgid” värv muutuma tumepunaseks, kui alles on ainult kakskümmend tähemärki, ja helepunaseks, kui alles on kümme või vähem.

    Elemendi stiili või klassi manipuleerimine võib olla jQuery abil tülikas ja Vue pakub selleks palju puhtamat viisi. Vue lähenemisviis tundub deklaratiivsem, kuna kirjeldate, kuidas soovite, et millegi stiil muutuks (põhineb näiteks antud olekul) ja laseksite Vuel raskeid tõsteid teha.

    Selle funktsiooni kontekstis on indikaatoril „järelejäänud märgid” kaks sellist olekut ja kummalegi vastav CSS-klass.

    1. Kui järele jääb kümme kuni kakskümmend tähemärki, peaks indikaatoril olema tumepunane klass
    2. Kui järele jääb vähem kui kümme tähemärki, peaks indikaatoril olema helepunane klass

    Nüüdseks peaks teie Vue aju karjuma “ARVUTI OMADUSED!” Niisiis, lubagem sellele ajule ja pangem need omadused kinni.

    underTwentyMark: function () {
      tagastage see tähemärgidJäämata <= 20
        && this.charactersRemaining> 10;
      },
    underTenMark: function () {
      tagastage see tähemärgidJääle <= 10;
    }

    Kui meie loogika on paigas, siis heidame pilgu ühele viisile, kuidas Vue käsitab tingimuslikku stiili: v-bind: klassidirektiiv. See direktiiv eeldab objekti, mille võtmed on CSS-klassid ja mille väärtused on vastavad arvutatud omadused.

    {'tumepunane': underTwentyMark, 'helepunane': underTenMark}

    Kui lisasime direktiivi märgistikku, mis ümbritseb meie märgist järelejäänud märki, oleme lõpetanud oma funktsiooni.

    
      {{characterRemaining}}
    

    Kapoti all ja tänu kahesuunalisele andmete sidumisele tegeleb Vue nende klasside lisamise ja eemaldamisega vastavalt määratud arvutatud omadustele.

    5. samm: rakendage neljas funktsioon: „Manustage foto” UX

    Funktsiooni kirjeldus: lubage kasutajatel faili valija dialoogi kaudu ühe pildi oma säutsu juurde lisada. Kui foto on üles laaditud, näidake seda tekstiala all ja laske kasutajatel manuse manustamiseks pildil klõpsates kustutada

    Aus hoiatus: selles jaotises toimub palju. Ilu seisneb selles, et vaatamata sellele funktsioonile, mis lisab märkimisväärset funktsionaalsust, ei pea me nii palju koodi kirjutama. Alustame siis sellega, et jagame interaktsiooni kujunduse osadeks.

    1. Kasutaja klõpsab nupul „Lisa foto”
    2. Kasutaja näeb failivalija dialoogi ja saab valida ühe üleslaaditava foto
    3. Foto valimisel ilmub tekstireala alla kast, mille sees on valitud foto
    4. Kasutaja klõpsab foto eemaldamiseks ümmargusel X-nupul
    5. Kasutaja näeb algseisundit alates 1. sammust

    Selle hetkeni pole me veel sündmuste käsitlemist (nuppude klõpsude kuulamine, sisestusmuudatuste jms kuulamine) teinud. Nagu arvata võis, muudab Vue selliste sündmuste haldamise lihtsaks, andes meile v-on direktiivi (@ lühidalt). Selle meetodi väärtuseks tunnistades võime tõhusalt kuulata DOM-i sündmusi ja käivitada JavaScripti, kui need käivitatakse.

    Enne sukeldumist meie mängudesse, mõned kiired tuled.

    Ürituste käsitlemine on sama lihtne kui lisada nupule @click käsk ja lisada vastav meetod meie Vue eksemplari meetodiklahvile.

     Logi kasutaja nimi sisse / nupp>
    ...
    meetodid: {
      logNameToConsole: function () {
        if (this.name! == 'Donald Trump') {
          console.log (see.nimi);
        } veel {
          console.warn ('Vabandust, ma ei saa aru');
        }
      },
    }

    Tagasi meie funktsioonide juurde ... Selles etapis on meie märgistus ja JavaScript muutunud järgmistel viisidel:

    1. Lisasime nupu @clic käskkirjaga. Kui kasutaja sellel nupul klõpsab, kutsutakse meetod triggerFileUpload.
     ... 

    Lisage siis oma JavaScripti meie meetodil Vue meie eksemplari võti koos nimetatud meetodiga ja meie foto andmeatribuut.

    andmed: {
     foto: null
    },
    arvutatud: {},
    meetodid: {
      triggerFileUpload: function () {
        see. $ refs.photoUpload.click (); // LOLWUT?
      },
    }

    2. HTML5-failisisendite stiilimine on kurikuulsalt keeruline. Üks lahendus seisneb sisendi sisestamises DOM-i ja selle varjamises CSS-iga. Natiivse failivalija avamiseks peab selle sisendi klõpsama. See, kuidas klõpsamiseks klõpsatakse ja kuidas klient käitub sellega, mida kasutaja üles laadib, on hoopis teine ​​küsimus.

    Oleme oma märgistusse lisanud ühe sellise sisendi ja peitnud selle spetsiaalse peiduklassiga. Oleme lisanud veel mõned atribuudid, mida tasub välja kutsuda:

    • Atribuuti ref kasutatakse antud DOM elemendi viite registreerimiseks. Selle viite korral saame selle JavaScripti koodi DOM-elemendiga juurde pääseda. $ Refs.photoUpload. Mis tähendab, et saame sellel elemendil programmiliselt käivitada kliki () sündmuse, hoides sellega mööda eespool kirjeldatud väljakutsest.
    • Sisendil klõpsamine on üks asi; kasutaja üleslaaditud faili käsitlemine on veel üks asi. Õnneks võimaldab Vue meil manustada käitlejat sisendi muutmise sündmusele @change direktiivi kaudu. Sellele direktiivile edastatud meetodile rakendatakse siis, kui kasutaja valib faili valijast faili. See meetod, käsuPhotoUpload, on üsna lihtne
    handlePhotoUpload: funktsioon (e) {
      var ise = see;
      var lugeja = uus FileReader ();
          
      lugeja.laadimine = funktsioon (e) {
        // Seadke see 64-põhine string meie andmemudeli fotovõtmele
        self.photo = (e.target.result);
      }
      // Loe üleslaadimisfail 64 põhistringina
      lugeja.readAsDataURL (e.target.files [0]);
     }

    Hinga sügavalt sisse, sest selle funktsiooniga oleme peaaegu valmis!

    Kui kasutaja on foto üles laadinud, peame tekstireala all näitama kasti, mille sees on valitud foto. Nii nagu elementide tinglik kujundus on imeline Vuega, on ka elementide tinglik renderdamine või kuvamine. Pange tähele, et meie HTML-i oleme tekstirea alla lisanud järgmised märgistused.

                  ...             

    Vue pakub käputäis malli abilisi (v-if, v-show, v-else jne), mis aitavad teil sisu tingimuslikult näidata ja peita. Kui sellele direktiivile edastatud JavaScripti avaldus tõeks osutub, siis element renderdatakse ja vastupidi.

    Meie puhul lisasime v-if-lause, mis hindab arvutatud omadust photoHasBeenUploaded.

    photoHasBeenUploaded: function () {
      return this.photo! == null;
    }

    Kui see funktsioon tõeks osutub - kui meie andmemudeli fotonupp pole võrdne nulliga -, siis jagatakse kogu jaotus. Voilà!

    Ja selles osas jagame kaks elementi:

    1. Lisatud pilt, edastades meie andmemudeli fotovõtme sisu Vue'i v-bind: src direktiivile
    2. Kustutusnupp, millel on veel üks näide @ klõpsamise käitlejast, see konkreetne nupp kutsub üles funktsiooni, mis foto „eemaldab”, seades meie andmemudeli fotoklahvi nulliks.
    removePhoto: function () {
      this.photo = null;
    }

    Oleme peaaegu kohal.

    6. samm: parandus, kasutaja saab lisada fotod

    Nii saame tõhusalt hakkama kasutajaga, kes lisab ühe foto Tweet-le, kuid mis siis, kui ta soovib palju fotosid üles laadida?

    Nüüdseks peaksite mõtlema millelegi järgmiselt: “Ma arvan, et siin on ainus oluline muudatus - võime näidata mitu pilti selles kastis, mis ilmub tinglikult tekstireala alla, arvestades, et oleme juba oma sündmuste käitlejad üles seadnud…” Ja Sul on õigus! Heidame pilgu sammudele, mida peame järgima

    1. Peame värskendama oma andmemudelit, muutes foto fotodeks, uus võti on base64 stringide massiiv (mitte üks base64 string)
    andmed: {
      fotod: []
    },

    2. Peame värskendama arvutatud vara fototHasBeenUploaded, et kontrollida meie uue fotovõtme pikkust, mis on nüüd massiiv.

    photoHasBeenUploaded: function () {
      tagasta see fotod.pikkus> 0;
    }

    3. Peame värskendama oma sisend @change käitlejat, et üleslaaditud failid ümber lükata ja lükata need meie fotonupule.

    handlePhotoUpload: funktsioon (e) {
      var ise = see;
      var failid = e.target.files;
      jaoks (las i = 0; i 
        reader.onloadend = funktsioon (evt) {
          self.photos.push (evt.target.result);
        }
        reader.readAsDataURL (failid [i]);
      }
    },

    HTML-i küljel peame aga asuma uuele territooriumile. Andmete üle jäljendamine ja sisu esitamine jQuery abil võib olla tülikas.

    var-massiiv = [1, 2, 3, 4, 5];
    var newHTML = [];
    jaoks (var i = 0; i ' + massiiv [i] + '');
    }
    $ (". element"). html (newHTML.join (""));

    Õnneks pakub Vue selle menetluse jaoks abstraktsiooni v-for-direktiivi kaudu. See direktiiv eeldab, et pakute avaldist (asi, indeks) kujul collectionOfThings, kus collectionOfThings on lähtemassiiv, asi on massiivielemendi alias, mida korratakse, ja indeks on ka selle elemendi indeks .

    Prototüüpne näide võib välja näha selline:

    Kui enne oli meil kasutaja üleslaaditud foto jaoks eraldi kujunduselement, siis nüüd on meil N-kujundussilti, mis vastab fotoallika massiivi pikkusele.

    Meie õnneks ei pea meie hinnalisand liiga drastiliselt muutuma, kuna kujunduse üldine struktuur on endiselt sama.

    
      
        ...
      
      
    

    Üks muudatus, mis meil tuleb teha, keerleb eemaldamismeetodi ümber, mis enne seadis meie andmemudeli ainsuse fotovõtme nulliks. Kuna meil on N fotot, peame edastama elemendi indeksi eemaldamisprogrammi removePhoto ja tõmbama selle elemendi massiivist välja.

    removePhoto: funktsioon (register) {
      this.photos.splice (register, 1);
    }

    7. samm: animatsioon + lisakrediit

    Twitteri kasutajaliideses avaneb moodus „Koosta Tweet”. Meie suurejoonelise finaali jaoks tahaksin rakendada kõiki seni õpitud Vue tehnikaid ja tutvustada veel ühte: üleminekuid.

    Ülemineku elutsükkel

    Ettevaatlikult öeldes, üleminekud on Vue maal tohutu teema. Uurime ja rakendame selle funktsiooni väikese osa, nimelt integreerides kolmanda osapoole animatsiooniteegi Velocity JS Vue-ga.

    Lühidalt: Vue pakub üleminekukomponenti, mis võimaldab teil lisada sisalduva elemendi jaoks sisestus- / lahkumisanimatsioone, eeldusel et element on seatud tinglikult kuvamiseks näiteks v-if või v-show direktiivi kaudu.

    <üleminek
      nimi = "ümbersuunamine"
      v-on: sisestage = "modalEnter"
      v-on: jäta = "modalLeave">
        
               

    Meie näites oleme lisanud kaks meetodit, mis vastavad kahele ülemineku elutsükli sündmusele: v-on: sisenege ja v-on: lahkuge. Seega oleme need meetodimääratlused oma Vue astmesse lisanud, lükates Velocity JS-i meie modaali sisse- ja väljapoole kallutamiseks.

    meetodid: {
      modalEnter: funktsioon (el, valmis) {
        Kiirus (el, 'fadeIn', {kestus: 300, täielik: valmis, ekraan: 'flex'})
      },
      modalLeave: funktsioon (el, valmis) {
        Kiirus (el, 'fadeOut', {kestus: 300, täielik: valmis})
      }
    }

    Nagu eespool mainitud, süttib üleminek, kui selles sisalduv element on tinglikult kuvamiseks seatud. Niisiis, meie üleminekukomponendi sisemisele div-le oleme lisanud v-if deklaratsiooni, mille väärtus on boolean modalShowing. Uuendage vastavalt ka meie eksemplari andmemudel.

    andmed: {
      modalShowing: vale
    }

    Kui me tahame modaali näidata, peame vaid seadma selle tõeväärtuse tõeseks!

     Koosta Tweet 

    Ja kirjutage sobiv meetod.

    hideModal: function () {
      this.modalShowing = vale;
    },
    showModal: function () {
      this.modalShowing = tõene;
    },

    Mõne CSS-i trikiga oleme taustal kinnitanud ka klikkide sündmuste käitleja, et kasutajad saaksid modaali peita. Skoor!

    Järeldus

    Noh, ma loodan, et see polnud liiga valus (ja et õppisite tee ääres midagi või kaks). Vaatasime vaid väikest tükki Vue pakutavast, kuigi, nagu eespool mainitud, on need mõisted Vue potentsiaali vallandamisel üliolulised.

    Tunnistan, et on ebaõiglane võrrelda Vue'i jQueryga. Need on erineva aja tooted, mille kasutusjuhtumid on üsna erinevad. Neile, kes on teinud oma tee JOMuery kaudu DOM-i manipuleerimise ja sündmuste käsitlemise õppimiseks, loodan, et need mõisted on värske õhu hingetõmme, mida saate oma töövoogu rakendada.