Miten luoda sovellus Vue.js

Javascript ekosysteemi on muuttunut yli vuosikymmenen ajan, eli etupäätekijöiden kehittäjät ovat joutuneet seuraamaan uusia teknologioita. Testauksen jälkeen JavaScript-kehykset Ja kirjastot yli viiden vuoden ajan, olen löytänyt sen, joka toimii minulle: vuue.js.

Tässä opetusohjelmassa selitän VUE-sovelluksen perusrakennetta. Lisäksi aion määritellä komponentit yksityiskohtaisesti ja koskettaa lisäominaisuuksia, kuten Mixins osoittamaan Miten aloittaa blogin Käynnissä omalla yksinkertaisella sovelluksellasi.

Haluatko enemmän neuvoja? Meillä on ohjeet kaikesta sivujen ylläpito palvelut pilvivarasto vaihtoehdot ja paras Verkkosivuston rakentaja noin.

• Parhaat ilmaiset blogging-alustat

Vue.js-edut

Vue.jsin tärkein myyntipiste on kuinka helppoa on oppia, koska se on kirjoitettu tavallisessa HTML, CSS ja JavaScript. Kirjastoa tukee joukko dokumentointi joka päivitetään jatkuvasti. Kirjaston koko on pieni verrattuna kilpailijoihin. Lisäksi sen CLI 3.0 on kirjoitettu uudelleen tulevaisuuden todisteeksi.

• Nopeuttaa suorituskykyä Vue.js

Aloittaa

Voit seurata tätä opetusohjelmaa tarvitaan vain Internet-yhteyden, sillä kaikki kehitystyöt tapahtuvat koodesandboxissa, täyden ominaisuuden Web-koodin editori. Linkki koodiin löytyy tässä .

Sovelluksemme sisältävät kokoonpanotiedostot, kuten paketti.json , index.html Sivu, joka on sovelluksemme ja a Src Kansio, joka on sovelluksen ydin. Tämän kansion sisältöä selostetaan koko opetusohjelmassa.

Vue-komponentit

Vue tarjoaa kyvyn luoda komponentteja. Nämä ovat mukautettuja elementtejä, joita käytetään uudelleenkäytettävän koodin kapselointiin ja voi vaihdella yksinkertaisesta painikkeesta koko esillä olevaan sivulle. Komponentti koostuu kolmesta pääosasta, & lt; template & gt; , & lt; skripti & gt; ja & lt; tyyli & gt; , jota tutkitaan edelleen.

Luo app.vue

Aiomme aloittaa sovelluksen luomalla App.vue Tiedosto, joka on juuremme. Tämä komponentti liittää kaikki tulevat osat. Ensimmäinen komponentti on hyvin yksinkertainen, sillä sillä ei ole dynaamisia tietoja, vaan se sisältää yksinkertaisesti mainitut kolme osaa (malli, skripti, tyyli).

 & lt; template & gt;
& lt; div id = "sovellus" & gt;
& lt; img class = "logo" src = "./ varat / logo.png" Alt = "Vue JS virallinen logo" / & gt;
& lt; / div & gt;
& lt; / template & gt;
& lt; skripti & gt;
Vie oletus {
Nimi: "APP",
Komponentit: {}
};
& lt; / script & gt;
& lt; tyyli & gt;
#App {// Normaali CSS täällä}
& lt; / tyyli & gt; 

Luo artikkeli.vu

Voit luoda blogisovelluksemme, tarvitsemme artikkeleita. Tämä edellyttää tiedoston luomista artikkeli ja tallentaa se komponenttien kansioon. Tämä komponentti on monimutkaisempi, koska se sisältää joitain perusvuosi-ominaisuuksia, joiden avulla se voi olla dynaamista.

Ensimmäinen ominaisuus, jonka aiomme ottaa käyttöön, kutsutaan direktiiviksi, kaksinkertaiset kiharat, jotka korvaavat otsikon arvon dynaamisella ominaisuudella, joka kulkee komponenttiin. Tämä on erityinen merkki, joka lisätään HTML: n sisällä ja VUE-kirjasto käyttää DOM: n muokkaamiseksi HTML: n tuottamiseksi.

 & lt; template & gt;
& lt; div luokka = "artikkeli" & gt;
& lt; img src = "./../ omaisuus / logo.png" / & gt;
& lt; h1 & gt; {{otsikko}} & lt; / h1 & gt;
& lt; p & gt; {{arvo}} & lt; / p & gt;
& lt; / div & gt;
& lt; / template & gt; 

Jos komponentti on dynaaminen, meidän on voitava siirtää tietoja siihen. Tämä voidaan saavuttaa julistamalla ominaisuuksia. Komponentilla on myös oma yksityisen tapaus muuttujaksi nimeltään.

 & lt; skripti & gt;
Vie oletus {
rekvisiitta: {
Otsikko: merkkijono,
Arvo: {Tyyppi: merkkijono, pakollinen: True}
},
tiedot () {
Paluu {tykkää: 0, näytökset: totta};
}};
& lt; / script & gt; 

Tämä komponentti tarvitsee vain jonkin verran perustyyliä oikein.

Ensimmäisen artikkelin näyttäminen meidän on otettava kolme vaihetta: sisällytä tiedosto sisään App.vue , lisää se VUE-esimerkissä ja katso se osana mallipohjaa:

& lt; template & gt;
& lt; div id = "sovellus" & gt;
& lt; img class = "logo" src = "./ varat / logo.png" Alt = "Vue JS virallinen logo" / & gt;
& lt; articlecontainer / & gt;
& lt; / div & gt;
& lt; / template & gt;
& lt; skripti & gt;
Tuo Articlecontainer "./components/article";
Vie oletus {
Nimi: "APP",
Komponentit: {articlecontainer}};
& lt; / script & gt; 

Valitettavasti tämän koodin suorittaminen tuottaa virheen, koska emme ole antaneet kaikki ominaisuudet, jotka on asetettu artikkelikomponentissa vaaditaan. Kysymysten korjaamiseksi meidän on ilmoitettava tietokohde ja käyttää uutta direktiiviä V-sitoutuminen siirtää esine artikkelikomponenttiin.

 & lt; template & gt;
...
& lt; articlecontainer v-bind = "post" / & gt; ...
& lt; / template & gt;
& lt; skripti & gt;
...
Nimi: "APP",
Tiedot: Toiminto () {
  palaa {post: {
    Otsikko: "Ensimmäinen viesti",
    Arvo: "Lorem Ipsum Dolor Sit Amet, ...",
    IMG: "./ASSET /LOGO.PNG"}
  };
}, ...
& lt; / script & gt; 

Laskennalliset ominaisuudet

Voit tehdä komponenttisi monimutkaisemmaksi, esitämme uuden VUE API: n ominaisuuden laskettu . Tätä kutsutaan tavallisesti "laskettuina ominaisuuksiksi", koska sen arvo muunnetaan kiinteistöksi. Jotta voit osoittaa, miten lasketut ominaisuudet toimivat, voimme parantaa komponenttimme tukemaan katkelmanäkymää ja täydellistä artikkelin näkymää.

 & lt; template & gt;
& lt; div luokka = "artikkeli" & gt;
& lt; img src = "./../ omaisuus / logo.png" / & gt;
& lt; h1 & gt; {{otsikko}} & lt; / h1 & gt;
& lt; p v-if = "showingsnippets" & gt; {{snippets}} & lt; / p & gt;
& lt; p v-muu & gt; {{arvo}} & lt; / p & gt;
& lt; button v-on: click = "Toggleclecle" & gt; {{buttonxt}} & lt; / button & gt;
& lt; button v-on: click = "Likes ++;" & gt; tykkää: {{like}} & lt; / button & gt;
& lt; / div & gt;
& lt; / template & gt;
& lt; skripti & gt;
Vie oletus {
rekvisiitta: {
Otsikko: merkkijono,
Arvo: {Tyyppi: merkkijono, pakollinen: True},
SnippetsLength: {Tyyppi: Numero, vaaditaan: FALSE, oletus: 20}
},
tiedot () {
Paluu {tykkää: 0, näytökset: totta};
},
laskettu: {
katkelmia () {
const fullarticle = tämä.Valitse;
const ArticleSnippets = Fullarticle.substring (0, tämä. SnippetsLength);
palata `$ {ArticleNippets} ...`;},
buttonsext () {
Palauta tämä.ShowingSnippets? "Näytä koko artikkeli": "Näytä katkelut";}
},
Menetelmät: {
Toggleartle () {
tämä.showingsnippets =! Tämä.showingsnippets; }
}};
& lt; / script & gt; 

Tämä esimerkki tarjoaa uuden direktiivin V-IF ja v-on , joka näyttää automaattisesti tai piilottaa komponentteja käyttämällä yksityistä muuttujaa kutsutaan Showingsnippets . Katkelman arvo lasketaan lennolle ja muuttuu, jos jokin ominaisuuksista se käyttää ( SnippetsLength , täydentää ) muutokset.

Maincomponent.vu

Seuraavassa vaiheessa on uusi komponentti, joka tulee olemaan hakemuksen keho, jota käytetään emuloimaan API-puhelu ja esitellä meidät uuteen direktiiviin V-FOR . VUE API tarjoaa pääsyn kattavaan luetteloon koukkujen lataamiseen ja laukaisuun oikeaan aikaan (kotelometallamme). Nämä ovat tämän opetusohjelman soveltamisalasta, mutta yksityiskohdat löytyvät tässä .

 & lt; template & gt;
& lt; div id = "maincontent" & gt;
& lt; articlecontainer v-for = "(kohde, indeksi) viestit": KEY = "Index" V-BIND = "kohde" / & gt;
& lt; / div & gt;
& lt; / template & gt;
& lt; skripti & gt;
Tuo ArticleContainer "./article.vue";
Tuo fakeposts from "../data/posts.js";
Vie oletus {
Tiedot: Toiminto () {
Paluu {viestit: []};
},
Menetelmät: {
fakeapicall () {
// Täällä emme emuloitamme mahdollisuuden ladata arvo API: llä
tämä.posts = fakeposts;}
},
Komponentit: {articlecontainer},
asennettu () {
tämä.fakeapicall ();}
};
& lt; / script & gt; 

Rakentaa sekoitus

Toinen voimakas piirre Vue.js ovat sekoittimet. Nämä ovat uudelleenkäytettäviä JS-menetelmiä, jotka laajentavat tietyn komponentin ominaisuuksia. Mixinsillä on pääsy useimpiin VUE-API: hen (ominaisuudet, tiedot, menetelmät). Ne tallennetaan yleensä a sekoitus Kansio, joka on luotu SRC-hakemistossa ja, kuten sekoittimet ovat puhtaasti JS, tallennettu a .js Laajennus.

Aluksi tämän ominaisuuden voima ei ehkä ole ilmeinen. Kuitenkin, kun tutustut VUE: iin ja sen API: hen, sekoittimet alkavat muokata ja tukea sovellustasi. Olen nähnyt tämän ominaisuuden, jota käytetään määrittämään syötteen validointi, kansainvälistyminen ja tuotteen toimivuus, kuten tiedoston lataus.

Tärkein ero normaalin komponentin ja sekoittimen välillä on se, että jälkimmäinen voidaan sisällyttää ja levittää mihin tahansa osaan. Voit esimerkiksi lisätä tiedoston lataussekoituksen painikkeeseen tai kuvaan ja niillä kaikilla on pääsy uuteen toimintoon.

Aiomme rakentaa esteettömyyden sekoituksen. Tämä antaa a togglecontrast Menetelmä, jota voidaan soveltaa mihin tahansa osaan.

 Vienti oletus {
rekvisiitta: {
LighttextColour: {Tyyppi: merkkijono, oletus: "# 252525"},
HighbackgroundColour: {Tyyppi: merkkijono, oletus: "#fff"},
DarktextColour: {Tyyppi: merkkijono, oletus: "#fff"},
DarkBackgroundColour: {Tyyppi: merkkijono, oletus: "# 252525"}
},
tiedot () {
palaa {islight: totta};
},
Menetelmät: {
ToggleHighcontrast () {
tämä.Sight =! Tämä.vight;
jos (tämä.islight) {
tämä. $ el.style.backgroundcolor = this.lightbackgroundcolour;
tämä. $ el.style.color = this.lighttextcolour;
} muu {
tämä. $ el.style.backgroundcolor = this.darkbackgroundcolour;
tämä. $ el.style.color = this.darktextcolour; }
}}
}; 

Nyt koodimme on määritelty, voimme sisällyttää sen mihin tahansa osaan ja käyttää sen menetelmiä ja ominaisuuksia ikään kuin ne on määritelty varsinaisessa komponentissa. Miekit voivat olla ominaisuuksia, joiden avulla ne voivat tarjota sen heti, kun ne sisältyvät komponenttiin tai ne saattavat tarvita joitakin toimia, jotta voimme toimia (esim. Tiettyä menetelmää).

Tämän ominaisuuden hyödyntämiseksi meidän on tehtävä seuraava muutos koodeksissamme:

 & lt; template & gt;
& lt; div luokka = "artikkeli" & gt;
...
& lt; button v-on: click = "ToggleHighcontrast" & gt; Vaihda korkea kontrasti & lt; / button & gt;
& lt; / div & gt;
& lt; / template & gt;

& lt; skripti & gt;
Tuo esteettömyys "../mixins/accessibility.js";
...
Miekit: [Esteettömyys]
};
& lt; / script & gt; 

Voimme nyt vaihtaa yksittäisen komponentin kontrastin uuden määritellyn painikkeen avulla. On tärkeää ymmärtää, että vaikka ylimääräisiä ominaisuuksia ei ole määritelty, artikkelikomponentti todella voi hyväksyä LighttextColour , DarktextColour , Hightbackgroundcolour ja Darkbackgroundcolour . Nämä määritellään esteettömyyden sekoittimessa.

Pieni prototyyppi on nyt täysin työskennellyt ja sitä voidaan käyttää viitteenä tuleville hankkeille.

Tämä artikkeli julkaistiin alun perin 316 netto , maailman myydyin aikakauslehti web-suunnittelijoille ja kehittäjille. Osta numero 316 täällä tai Tilaa täältä .

Aiheeseen liittyvät artikkelit:

• 9 parhaista JavaScript-kehyksistä
• Paljastui: uusimmat JavaScript-trendit
• Miten rakentaa bloggauspaikka Gatsbyn kanssa