Vue.js-esittely ihmisille, jotka tietävät juuri tarpeeksi jQuerya päästäkseen läpi

Vue.js -logo

Minulla on ollut rakkauden ja vihan suhde JavaScriptin kanssa vuosia.

Tunsin kielen suunnittelu- ja kehitysyhteisön suosikki piiskaamispojan jQueryn avulla. Kun aloit JavaScriptin oppimisen “suunnittelijana, joka koodaa”, työskentely jQueryn kanssa oli maaginen kokemus. Voisin tehdä modaalit fadeIn ja fadeOut. Kolmannen osapuolen kirjaston avulla voisin lisätä parallaksin vierityksen portfoliooni vain yhdellä toimintopuhelulla. Lähes kaikki mitä olin voinut haaveilla, oli kapseloitu yhteen, ~ 100 kt: n tiedostoon ...

Ja sitten Angular tuli ulos. Minulla ei ollut muuta vaihtoehtoa kuin tehdä koko salkku uudelleen. Ja sitten React tuli ulos. Minulla ei ollut muuta vaihtoehtoa kuin tehdä uudelleen koko portfolioni kirjaston kanssa. Ja sitten Vue.js ilmestyi. Minulla ei ollut muuta vaihtoehtoa kuin tehdä koko portfolioni uudelleen kirjaston kanssa ... Näet missä tämä on menossa.

Kaikki vitsit syrjään, olen nauttinut Java-palkkien hiomasta rakentamalla asioita täällä ja siellä näiden erilaisten kehysten ja kirjastojen avulla. Olen lukenut lukemattomia artikkeleita ja oppaita prosessissa, mutta yksikään ei ole takertunut minuun enemmän kuin Shu Uesugin teos ”React.js Johdanto ihmisille, jotka tietävät vain tarpeeksi jQuery By Get By”.

Shu vie lukijat - joiden oletetaan olevan jonkin verran taitavia JavaScript-perusteiden ja jQueryn kanssa - matkalle Reaktin maailmaan, kun he rakentavat Twitterin “säveltää twiitti-komponentti” -kloonin.

Tämä käsitteellinen kehys oli melko hyödyllinen minulle, koska joku oppii parhaiten tekemällä. Tosiaankin, aina kun uusi JavaScript-kirjasto ilmestyy, palaan takaisin tämän artikkelin esimerkkiin vesien testaamiseksi. Ja niin, haluaisin lainata tämän kehyksen astellessani kaikkia läpi viimeaikaisen kokemukseni Vue-oppimisesta.

Ennen kuin aloitat alla olevien vaiheiden, kehotan sinua lukemaan Shun artikkelin. Hän tekee upeaa työtä käydessäsi läpi kirjoittamasi jQuery-koodin joidenkin näiden ominaisuuksien toteuttamiseksi. Siksi, ja irtisanomisriskin vähentämiseksi, keskityn näyttämään sinulle Vue-puolueiden hyvät puolet.

Mitä me rakennamme

Suurin osa meistä piipittää (jotkut yleisemmin kuin toiset). Joten olemme todennäköisesti tuttuja käyttöliittymäkomponentista alla olevassa kuvakaappauksessa.

Twitterin “Compose Tweet” -ruutu

Usko tai älä, tämä käyttöliittymäkomponentti on loistava esimerkki siitä, kuinka Vue (ja Rehu, kuten Shu) voi parantaa elämääsi JavaScript / jQuery -kehittäjänä. Tämän komponentin elementit, joihin keskitymme tänään rakentamaan, ovat:

  • 3. Lisäsimme: Disabled -ominaisuuden painikkeeseemme. Etukäteen poistettu kaksoispiste tarkoittaa, että haluaisimme arvioida lainausmerkkien sisällön JavaScript-lausekkeena. Jos jättäisimme pois kaksoispisteen, sisältöä kohdellaan merkkijonona. Huomaa myös, että olemme lisänneet muutaman rivin CSS: ää, jotta käytöstä poistetulle painikkeelle saadaan erillinen visuaalinen muotoilu.

    <-painike: Disabled = "tweetIsEmpty"> Tweet / Button>
    ...
    painike [poistettu käytöstä] {
      kohdistin: ei sallittu;
      opasiteetti: 0,5;
    }

    4. Lisäsimme myös lasketun ominaisuuden ilmentymään nimeltä tweetIsEmpty. Huomaa, että tämä ominaisuus on tosiasiallisesti funktio, joka palauttaa boolean-arvon tietomallimme twiittimääritteen pituuden perusteella. Vue tekee tietomallin käytöstä helppoa sekä HTML-muodossa (kuten yllä) että itse ilmentymässä. Kaksisuuntaisen datan sitomisen taikuuden ansiosta tämä toiminto arvioidaan, kun twiitin arvo päivitetään. Kun toiminto arvioitu todeksi, painikemme poistetaan käytöstä ja päinvastoin.

    tweetIsEmpty: function () {
      palauta tämä.tweet.length === 0;
    }

    Tosin tämä tuntui savulta ja peileiltä, ​​kun aloitin aloittamisen Vuella. Ainoa minulle oli nähdä kirjaimellisesti, mitä tapahtui tietomallillemme konepellin alla, kun olin vuorovaikutuksessa komponentin kanssa. Koska pääsemme helposti HTML-tietomalliamme yllä mainitun kihara-aukon syntaksin kautta, voimme rakentaa nopean, visuaalisen palautteen silmukan. Pisteet!

    tweet : n arvo on: {{tweet}}

    tweetIsEmpty -arvo on: {{tweetIsEmpty}}

    Voit vapaasti toistaa tämän vaiheen, jos jotain matkan varrella oli hämmentävää (johtuen heikosta kirjoittamis- tai koodauskykystäni tai itse Vuesta). Lähetä twiitti tai jätä kommentti, jos sinulla on erityisiä kysymyksiä.

    Vaihe 3: Ota toinen ominaisuus käyttöön - näytä jäljellä olevien merkkien lukumäärä

    Ominaisuuden kuvaus: Kun käyttäjä kirjoittaa, näytä twiitissä jäljellä olevien merkkien lukumäärä (140: stä). Jos käyttäjä on kirjoittanut yli 140 merkkiä, poista sininen Tweet-painike käytöstä.

    Toistaiseksi olemme oppineet kaksisuuntaisesta tiedon sitomisesta ja laskennallisista ominaisuuksista, käsitteistä, jotka ovat Vue: n ytimessä. Se on onnekkaamme päivämme, koska voimme hyödyntää näitä käsitteitä seuraavan ominaisuutemme rakentamiseksi: näyttää käyttäjille, kuinka monta merkkiä (140: stä) jäljellä, ja poistaa painike käytöstä, jos tämä raja on pimennetty.

    Aion jälleen kerran tutkia sekä JavaScript- että HTML-muutokset, joita tämän ominaisuuden toteuttaminen edellyttää.

    Olemme JavaScript-tuotteissamme tehneet muutamia asioita.

    1. Siivousvälineenä luettelimme twiitin enimmäispituuden (140 merkkiä) vakiona, MAX_TWEET_LENGTH.
    const MAX_TWEET_LENGTH = 140;

    2. Lisäsimme toisen lasketun ominaisuuden, rakstitRemaining, joka palauttaa dynaamisesti eron 140 ja käyttäjän antaman twiitin pituuden välillä.

    characterRemaining: function () {
      palauta MAX_TWEET_LENGTH - tämä.tweet.pituus;
    }

    3. Nimeimme vanhan tweetIsEmpty-ominaisuuden tweetIsOutOfRangeksi ja päivitimme funktion logiikan vastaavasti. Huomaa, kuinka käytämme laskettuja merkkejäRapuominaisuus tämän arvon laskemiseksi. Hooray koodin uudelleenkäyttöön!

    tweetIsOutOfRange: function () {
      palauta this.charactersRemaining == MAX_TWEET_LENGTH
          || tämä.hahmotJäännös <0;
     }

    Asioiden HTML-puolella meidän on tehtävä vain muutama muutos, Vue: n kaksisuuntaisen tiedon sitomisen ansiosta.

       {{characterRemaining}}    Tweet

    Katso visuaalisille oppijoille taikuutta:

    Vaihe 4: Ota käyttöön kolmas ominaisuus: jäljellä olevien merkkien ehdollinen muotoilu

    Ominaisuuden kuvaus: Kirjoitettaessa twiittiä jäljellä olevien merkkien värin tulee muuttua tummanpunaiseksi, kun jäljellä on vain kaksikymmentä merkkiä, ja vaaleanpunaiseksi, kun jäljellä on kymmenen tai vähemmän.

    Elementin tyylin tai luokan käsitteleminen voi olla hankalaa jQueryn kanssa, ja Vue tarjoaa paljon puhtaamman tavan tehdä se. Vue-lähestymistapa tuntuu deklaratiivisemmalta, koska kuvailet kuinka haluat jonkin tyylin muuttuvan (esimerkiksi tietyn tilan perusteella) ja annat Vueen tehdä raskas nosto.

    Tämän ominaisuuden yhteydessä "jäljellä olevat merkit" -indikaattorissamme on kaksi sellaista tilaa ja jokaiselle vastaava CSS-luokka.

    1. Kun jäljellä on kymmenen - kaksikymmentä merkkiä, indikaattorilla tulisi olla tummanpunainen luokka
    2. Kun jäljellä on vähemmän kuin kymmenen merkkiä, indikaattorilla tulisi olla vaaleanpunainen luokka

    Tähän mennessä Vue-aivojesi pitäisi huutaa “TIETOTEKNISET OMINAISUUDET!” Joten velvoittakaamme nämä aivot ja suljetaan nämä ominaisuudet.

    underTwentyMark: function () {
      palauta tämä.merkkejäJäännös <= 20
        && this.charactersRemaining> 10;
      },
    underTenMark: function () {
      palauta tämä.merkkejäJäännös <= 10;
    }

    Meidän logiikkamme kanssa katsotaanpa yhtä tapaa, jolla Vue käsittelee ehdollista muotoilua: v-bind: luokadirektiiviä. Tämä direktiivi odottaa objektia, jonka avaimet ovat CSS-luokkia ja jonka arvot ovat vastaavat lasketut ominaisuudet.

    {'tummanpunainen': underTwentyMark, 'vaaleanpunainen': underTenMark}

    Lisäämällä direktiivin span-tunnisteeseen, joka sulkee ”jäljellä olevat merkit” -indikaattorimme, olemme valmiit ominaisuuksemme.

    
      {{ merkkiä jäljellä }}
    

    Konepellin alla ja kaksisuuntaisen tiedonsiirron ansiosta Vue käsittelee näiden luokkien lisäämistä ja poistamista määritettyjen laskettujen ominaisuuksien funktiona.

    Vaihe 5: Ota käyttöön neljäs ominaisuus: “Liitä valokuva” UX

    Ominaisuus Kuvaus: Salli käyttäjien liittää yksittäinen valokuva tweettiinsä tiedostovalintaikkunan kautta. Kun kuva on ladattu, näytä se tekstialueen alla ja anna käyttäjien poistaa liite napsauttamalla kuvaa

    Kohtuullinen varoitus: Tässä osiossa tapahtuu paljon. Kauneus on, että huolimatta siitä, että tämä ominaisuus lisää huomattavasti toiminnallisuutta, meidän ei tarvitse kirjoittaa niin paljon koodia. Joten aloittakaamme jakamalla vuorovaikutussuunnittelu vaiheisiin.

    1. Käyttäjä napsauttaa Lisää valokuva -painiketta
    2. Käyttäjä näkee tiedostonvalitsimen valintaikkunan ja voi valita yhden valokuvan lähetettäväksi
    3. Kun valokuva on valittu, tekstialueen alle ilmestyy ruutu, jossa valittu valokuva on sisällä
    4. Käyttäjä napsauttaa pyöreää X-painiketta kuvan poistamiseksi
    5. Käyttäjä näkee alkutilansa vaiheesta 1 alkaen

    Tähän saakka emme ole vielä tehneet mitään tapahtumien käsittelyä (kuunnella painikkeiden napsautuksia, syöttömuutoksia jne.). Kuten saatat odottaa, Vue on helppo käsitellä tällaisia ​​tapahtumia antamalla meille v-on -direktiivi (@ lyhyeksi). Ohittamalla menetelmä tämän direktiivin arvoksi, voimme kuunnella tehokkaasti DOM-tapahtumia ja suorittaa JavaScriptin, kun ne käynnistyvät.

    Ennen sukellusta ominaisuustyöhön, pikatulen harjoittelu.

    Tapahtumien käsittely on yhtä helppoa kuin @click-direktiivin lisääminen annettuun painikkeeseen ja vastaavan menetelmän lisääminen Vue-ilmentymän metodiavaimeen.

    <-painike @ click = "logNameToConsole"> Loki käyttäjän nimi 
    ...
    menetelmät: {
      logNameToConsole: function () {
        if (this.name! == 'Donald Trump') {
          console.log (this.name);
        } muuta {
          console.warn ('Anteeksi, en ymmärrä');
        }
      },
    }

    Takaisin ominaisuustyöhömme ... Tässä vaiheessa merkinnät ja JavaScript ovat muuttuneet seuraavilla tavoilla:

    1. Lisäsimme painikkeen @click-direktiivillä. Kun käyttäjä napsauttaa tätä painiketta, triggerFileUpload-menetelmä soitetaan.
     ... 

    Joten lisäämme JavaScript-tuotteeseemme menetelmäavaimen Vue-ilmentymään, jossa mainittu menetelmä on sisällä, samoin kuin valokuvasi dataominaisuuden.

    tiedot: {
     kuva: nolla
    },
    laskettu: {},
    menetelmät: {
      triggerFileUpload: function () {
        Tämän. $ refs.photoUpload.click (); // LOLWUT?
      },
    }

    2. HTML5-tiedostojen sisääntulo on tyypillisesti vaikeaa. Yksi kiertotapa sisältää tiedon syöttämisen DOM: iin ja sen piilottamisen CSS: llä. Tätä syöttöä on napsautettava, jotta selain voi avata alkuperäisen tiedostonvalitsimen. Kuinka se napsautetaan ja miten asiakas käsittelee käyttäjän lähettämät asiat, on eri asia.

    Olemme lisänneet merkintöihimme yhden tällaisen syötteen ja piilottaneet sen erityisellä piiloluokalla. Olemme myös lisänneet joitain muita kutsumisen arvoisia ominaisuuksia:

    • Ref-määritettä käytetään viittauksen rekisteröintiin annettuun DOM-elementtiin. Tämän viitteen perusteella voimme käyttää JavaScript-koodimme DOM-elementtiä tällä. $ Refs.photoUpload. Mikä tarkoittaa, että voimme ohjelmoidusti laukaista napsautustapahtuman () tämän elementin kohdalla, jolloin voidaan välttää yllä kuvattu haaste.
    • Syötteen napsauttaminen on yksi asia; käyttäjän lähettämän tiedoston käsittely on toinen asia. Onneksi Vue antaa meille mahdollisuuden liittää käsittelijä tulon muutostapahtumaan @change-direktiivin kautta. Menetelmään, jonka siirrymme tähän direktiiviin, otetaan käyttöön sen jälkeen, kun käyttäjä on valinnut tiedoston tiedostonvalitsimesta. Tämä menetelmä, handlePhotoUpload, on melko yksinkertainen
    handlePhotoUpload: toiminto (e) {
      var itse = tämä;
      var lukija = uusi FileReader ();
          
      lukija.lataus = toiminto (e) {
        // Aseta tämä perus 64-merkkijono datamallimme valokuva-avaimeen
        self.photo = (e.target.result);
      }
      // Lue lataustiedosto perus 64-merkkijonona
      reader.readAsDataURL (e.target.files [0]);
     }

    Hengitä syvään, koska olemme melkein valmis tämän ominaisuuden kanssa!

    Kun käyttäjä on ladannut valokuvan, meidän on näytettävä tekstialueen alla laatikko, jossa valittu valokuva on sisällä. Aivan kuten elementtien ehdollinen muotoilu on tuulen kanssa Vue-tapaan, niin on myös elementtien ehdollisen renderoinnin tai näytön esittäminen. Huomaa, että HTML-muotoon on lisätty seuraava merkintä tekstialueen alle.

           <-painike @ click = "removePhoto">       ...             

    Vue tarjoaa kourallisen mallipohjia (v-if, v-show, v-else jne.), Joiden avulla voit näyttää ja piilottaa sisältöä ehdollisesti. Kun JavaScript-lauseke, joka välitetään tälle direktiiville, arvioidaan totta, elementti renderoidaan ja päinvastoin.

    Lisäsimme tapauksessamme v-if-käskyn, joka arvioi lasketun ominaisuuden photoHasBeenUploaded.

    photoHasBeenUploaded: function () {
      palauta tämä.foto! == nolla;
    }

    Kun tämä toiminto arvioi totta - kun datamallimme valokuva-avain ei ole yhtä suuri kuin nolla - koko jako saadaan aikaan. Voilà!

    Ja tuon div-osan sisällä saadaan aikaan kaksi elementtiä:

    1. Liitetty kuva siirtämällä tietomallimme valokuva-avaimen sisältö Vue: n v-bind: src -direktiiviin
    2. Poista-painike, jossa on toinen esimerkki @ click-käsittelijästä. Tämä kutsuu toimintoa, joka ”poistaa” kuvan asettamalla tietomallimme valokuva-avaimen nollaksi.
    removePhoto: function () {
      tämä.foto = nolla;
    }

    Olemme melkein siellä.

    Vaihe 6: Korjaus, käyttäjä voi liittää ”valokuvat”

    Joten voimme käsitellä käyttäjää, jotka liittävät yhden kuvan Tweetiin, mutta entä jos hän haluaa ladata useita kuvia?

    Tähän mennessä sinun pitäisi ajatella jotain seuraavista: "Luulen, että ainoa merkittävä muutos tässä on kyky näyttää useita kuvia siinä ruudussa, joka ehdollisesti näkyy tekstialueen alla, kun otetaan huomioon, että olemme jo johtaneet tapahtumakäsittelijämme ..." Ja olet oikeassa! Katsokaamme vaiheet, jotka meidän on noudatettava

    1. Meidän on päivitettävä tietomalliamme vaihtamalla valokuva valokuviksi, uusi avain on joukko base64-merkkijonoja (ei yhtä base64-merkkijonoa)
    tiedot: {
      kuvat: []
    },

    2. Meidän on päivitettävä laskettu omaisuutemme photoHasBeenUploaded tarkistaaksemme uuden valokuvanäppäimen, joka on nyt taulukko, pituutta.

    photoHasBeenUploaded: function () {
      palauta tämä.valokuvat.pituus> 0;
    }

    3. Meidän on päivitettävä input @change -käsittelijämme siirtääksesi ladatut tiedostot ja työntämällä ne valokuva-avaimeemme.

    handlePhotoUpload: toiminto (e) {
      var itse = tämä;
      var tiedostot = e.target.files;
      varten (olkoon i = 0; i 
        lukija.onloadend = toiminto (evt) {
          self.photos.push (evt.target.result);
        }
        reader.readAsDataURL (tiedostot [i]);
      }
    },

    HTML-puolella meidän on kuitenkin aloitettava uudelle alueelle. JQuery-tiedonsiirto ja sisällön renderointi voi olla hankalaa.

    var-matriisi = [1, 2, 3, 4, 5];
    var newHTML = [];
    varten (var i = 0; i ' + taulukko [i] + '');
    }
    $ ( "Elementti "). Html (newHTML.join (""));

    Onneksi Vue tarjoaa abstraktin tästä menettelystä v-for -direktiivin avulla. Tämä direktiivi edellyttää, että annat lausekkeen (asia, hakemisto) muodossa collectionOfThings, jossa collectionOfThings on lähdematriisi, asia on alias iteratoitavalle taulukkoelementille ja indeksi on hyvin, kyseisen elementin indeksi .

    Prototyyppinen esimerkki voi näyttää tältä:

    Missä meillä oli ennen käyttäjän lataaman valokuvan yksittäistä kuvaelementtiä, meillä on nyt N kuvotunnistetta, joka vastaa valokuvien lähderyhmän pituutta.

    Meille onneksi merkinnämme ei tarvitse muuttua liian dramaattisesti, koska mallin rakenne on edelleen sama.

    
      <-painike @ click = "removePhoto (index)">
        ...
      
      
    

    Yksi muutos, joka meidän on tehtävä, pyörii removePhoto-menetelmän ympärillä, joka ennen asetti datamallimme yksittäisen valokuvakkeen nollaksi. Nyt, koska meillä on N valokuvien lukumäärää, meidän on siirrettävä elementin hakemisto removePhoto-menetelmälle ja vedettävä elementti taulukosta.

    removePhoto: toiminto (hakemisto) {
      this.photos.splice (hakemisto, 1);
    }

    Vaihe 7: Animaatio + lisähyvitys

    Twitterin käyttöliittymässä Compose Tweet -komponentti aukeaa muodossa. Suuressa finaalissamme haluaisin soveltaa kaikkia tähän mennessä opittuja Vue-tekniikoita ja esitellä vielä yhden: siirtymät.

    Siirtymäkauden elinkaari

    Varovaisuuden sana, siirtymävaiheet ovat laaja aihe Vue-maassa. Aiomme tutkia ja toteuttaa ohut osa tästä toiminnallisuudesta, nimittäin integroida kolmannen osapuolen animaatiokirjasto, Velocity JS, Vuean.

    Lyhyesti sanottuna Vue tarjoaa siirtymäkomponentin, jonka avulla voit lisätä sisäänsä / poistua -animaatioita sisältämälle elementille, mikäli elementti on asetettu näyttämään ehdollisesti esimerkiksi v-if- tai v-show -direktiivin avulla.

    
        
               

    Esimerkissämme olemme liittäneet kaksi menetelmää, jotka vastaavat kahta siirtymäkauden tapahtumaa: v-on: kirjoita sisään ja v-on: lähetä. Olemme siis lisänneet nämä menetelmämääritelmät Vue-ilmentymäämme, lykkäämällä Velocity JS -sovellusta haalistamaan modaaliaan sisään ja ulos.

    menetelmät: {
      modalEnter: toiminto (el, valmis) {
        Nopeus (el, 'fadeIn', {kesto: 300, valmis: valmis, näyttö: 'flex'})
      },
      modalLeave: toiminto (el, valmis) {
        Nopeus (el, 'fadeOut', {kesto: 300, valmis: valmis})
      }
    }

    Kuten edellä mainittiin, siirtyminen välähtää, kun sisällä oleva elementti on ehdollisesti asetettu näyttämään. Joten, siirtymäkomponentin sisäiseen div-osaan olemme lisänneet v-if-ilmoituksen, jonka arvo on boolean modalShowing. Päivitämme ilmentymän datamalli vastaavasti.

    tiedot: {
      modalShowing: vääriä
    }

    Nyt kun haluamme näyttää modaalin, kaikki mitä meidän on tehtävä on asettaa tämä boolen arvo totta!

    <-painike @ click = "showModal"> Kirjoita sävellys 

    Ja kirjoita menetelmä vastaamaan.

    hideModal: function () {
      this.modalShowing = false;
    },
    showModal: function () {
      this.modalShowing = totta;
    },

    Joillakin CSS-huijauksilla olemme myös liittäneet napsautustapahtumien käsittelijän taustaan, jotta käyttäjät voivat piilottaa modaalin. Pisteet!

    johtopäätös

    No, toivottavasti se ei ollut kovin tuskallinen (ja että opit jotain tai kaksi matkan varrella). Tarkastelimme vain pientä raitaa mitä Vue tarjoaa, vaikka nämä käsitteet, kuten edellä mainittiin, ovat ratkaisevan tärkeitä Vue-potentiaalin vapauttamiseksi.

    Myönnän, että on epäreilua verrata Vue: ta jQueryyn. Ne ovat eri aikojen tuotteita, joissa on aivan erilaisia ​​käyttötapoja. Toivon kuitenkin, että niille, jotka ovat kamppailleet tiensä oppia DOM-manipulaatiota ja tapahtumien käsittelyä jQueryn kautta, nämä käsitteet ovat raikasta ilmaa, jota voit käyttää työnkulkuun.