Hogyan lehet létrehozni egy alkalmazást a VUE.JS-vel

A JavaScript-ökoszisztéma több mint egy évtizede változik, az előlépő fejlesztőknek új technológiákat kellett nyomon követniük. Tesztelés után JavaScript keretrendszerek És könyvtárak több mint öt éve, megtaláltam azt, amit nekem működik: Vue.js.

Ebben a bemutatóban megmagyarázom a VUE alkalmazás alapszerkezetét. Ezenkívül részletesen meghatározom az alkatrészeket, és megérintem a fejlettebb funkciókat, mint például a mixins A blog elindítása Futás a saját egyszerű alkalmazáson.

További tanácsot szeretne? Minden útmutatónk van web hosting Szolgáltatások felhő tároló Opciók és a legjobb weboldal építője körül.

• A legjobb ingyenes blogoló platformok

A VUE.JS előnyei

A VUE.JS fő értékesítési pontja mennyire könnyű megtanulni, mivel sík HTML, CSS és JavaScript. A könyvtárat egy sor támogatja dokumentáció amely folyamatosan frissül. A könyvtár mérete kicsi a versenytársakhoz képest. Ezenkívül a CLI 3.0-t átírják, hogy jövőbeli bizonyíték legyen.

• Gyorsítsa fel a teljesítményt a VUE.JS-vel

Fogj neki

Ahhoz, hogy kövesse ezt a bemutatót, csak szüksége van egy internetkapcsolatra, mivel minden fejlesztés a kódszappában, a teljes funkciójú webkódszerkesztőben lesz. A kódra való hivatkozás megtalálható itt .

Alkalmazásunk olyan konfigurációs fájlokat tartalmaz, mint például csomag.json , egy index.html az alkalmazásunk és a Src Mappa, amely alkalmazásunk lényege. A mappa tartalmát a bemutató során meg kell magyarázni.

Alkatrészek az VUE-ben

A VUE képes komponenseket létrehozni. Ezek olyan egyedi elemek, amelyek újrafelhasználható kódot kapnak, és egy egyszerű gombbal változhatnak egy teljes körű oldalra. A komponens három fő szakaszból áll, & lt; sablon & gt; , & lt; script & gt; és & lt; style & gt; , amelyet tovább fognak vizsgálni.

App.Vue létrehozása

Elindítjuk az alkalmazásunkat egy App.Vue A gyökérünk fájlja. Ez az összetevő tartalmazza az összes jövőbeli alkatrészünket. Az első komponens nagyon egyszerű lesz, mivel nincs dinamikus adatai, de egyszerűen magában foglalja a korábban említett három szakaszot (sablon, szkript, stílus).

 & lt; sablon & gt;
& lt; div id = "app" & gt;
& lt; img osztály = "logó" src = "./ eszközök / logo.png" alt = "VUE JS hivatalos logó" / & gt;
& lt; / div & gt;
& lt; / sablon & gt;
& lt; script & gt;
Az alapértelmezett export {
Név: "alkalmazás",
Alkatrészek: {}
};
& lt; / script & gt;
& lt; style & gt;
#App {// normál css itt}
& lt; / style & gt; 

Cikk létrehozása.Vue

A blogalkalmazás létrehozásához cikkekre van szükségünk. Ez magában foglalja a hívott fájl létrehozását cikk.Vaj és tárolja azt egy összetevők mappába. Ez az összetevő összetettebb lesz, mivel magában foglalja az alapvető VUE funkciókat, amelyek lehetővé teszik, hogy dinamikus legyen.

Az első olyan funkció, amelyet bevezetünk, az úgynevezett irányelv, a kettős göndör zárójelek, amelyek a dinamikus tulajdonsággal rendelkező cím értékét helyettesítik az összetevőre. Ez egy adott token, amelyet a HTML-ben adunk hozzá, és az VUE könyvtár által használt, hogy módosítsa a DOM-et a HTML előállításához.

 & lt; sablon & gt;
& lt; div osztály = "cikk" & gt;
& lt; img src = "./../ Eszközök / logo.png" / & gt;
& lt; h1 & gt; {{cím}} & lt; / h1 & gt;
& lt; p & gt; {{érték}} & lt; / p & gt;
& lt; / div & gt;
& lt; / sablon & gt; 

Ahhoz, hogy a komponens dinamikus legyen, képesnek kell lennünk az adatok átadására. Ezt a tulajdonságok kijelölésével lehet elérni. Egy komponens is hozzáférhet saját privát példányváltozókhoz, amelyeket az adatok neveznek.

 & lt; script & gt;
Az alapértelmezett export {
Props: {
Cím: String,
Érték: {Type: String, Szükséges: True}
},
adatok () {
Visszatérés {Likes: 0, ShowingsNeketts: True};
}};
& lt; / script & gt; 

Ez a komponens csak alapvető stílusra van szüksége, hogy megfelelően jelenítse meg.

Az első cikkünk megjelenítéséhez három lépést kell tennie: tartalmazzuk a fájlt App.Vue , adja hozzá az VUE példányban, és hivatkozzon a sablonszakasz részeként:

& lt; sablon & gt;
& lt; div id = "app" & gt;
& lt; img osztály = "logó" src = "./ eszközök / logo.png" alt = "VUE JS hivatalos logó" / & gt;
& lt; articlecontainer / & gt;
& lt; / div & gt;
& lt; / sablon & gt;
& lt; script & gt;
import artiklecontainer a "./components/article";
Az alapértelmezett export {
Név: "alkalmazás",
Alkatrészek: {ArticLecontainer}};
& lt; / script & gt; 

Sajnos a kód futtatása hibát eredményez, mivel nem adtunk meg minden olyan tulajdonságot, amelyet a cikk összetevőjében beállítunk. A probléma megoldásához adathálózatot kell nyilvánítanunk, és új irányelvet kell használniuk V-Bind átadja az objektumot a cikkkomponenshez.

 & lt; sablon & gt;
...
& lt; articlecontainer v-bind = "Post" / & gt; ...
& lt; / sablon & gt;
& lt; script & gt;
...
Név: "alkalmazás",
Adatok: Funkció () {
  Visszatérés {Post: {{
    Cím: "Első hozzászólásom",
    Érték: "Lorem Ipsum Dolor Sit Amet, ....",
    img: "./assets/logo.png"}
  };
}, ...
& lt; / script & gt; 

Számított tulajdonságok

Ahhoz, hogy összetettebbé tegyük a komplexumot, bemutatjuk a VUE API új funkcióját számított . Ezt általában "számított tulajdonságoknak" nevezik, mivel értékét valódi tulajdonsággá alakítják át. Annak érdekében, hogy megmutassuk, hogy a számított tulajdonságok működjünk, növeljük komponenseinket, hogy támogassuk a töredékek megtekintését és a teljes cikk nézetét.

 & lt; sablon & gt;
& lt; div osztály = "cikk" & gt;
& lt; img src = "./../ Eszközök / logo.png" / & gt;
& lt; h1 & gt; {{cím}} & lt; / h1 & gt;
& lt; p v-if = "ShowingsNipsets" & gt; {{Snippets}} & lt; / p & gt;
& lt; p v-mly & gt; {{érték}} & lt; / p & gt;
& lt; gomb v-on: kattintson a = "Togglearticle" & gt; {{buttonontext}} & lt; / gomb és gt;
& lt; gomb v-on: kattintson a = "tetszik ++;" & gt; szereti: {{{{}}} & lt; / button & gt;
& lt; / div & gt;
& lt; / sablon & gt;
& lt; script & gt;
Az alapértelmezett export {
Props: {
Cím: String,
Érték: {Type: String, Szükséges: True},
Snippetslengnth: {type: szám, kötelező: hamis, alapértelmezett: 20}
},
adatok () {
Visszatérés {Likes: 0, ShowingsNeketts: True};
},
számított: {
töredékek () {
const fullarticle = ez.Value;
CONSTRECTICESTETS ​​= Fullarticle.Substring (0, ez. Snippetslengnth);
Visszatérés `$ {cikkekjegyzetek} ...`;},
buttontext () {
Visszatérés ez.ShowingsNipsets? "Teljes cikk megjelenítése": "Snippets Show";}
},
Módszerek: {
toginglearticle () {
Ez.ShowingsNips =! Ez.ShowingsNiptets; }
}};
& lt; / script & gt; 

Ez a példa új irányelvet nyújt V-, ha és V-on , amely automatikusan megjeleníti vagy elrejti az alkatrészeket, egy privát változó segítségével ShowingsNeketts . A töredékek értékét a repülés során kiszámítják, és megváltoztatják, ha az általa használt tulajdonságok bármelyike ​​( tönkretesz , fullarticle ) változtatások.

MainComponent.Vue

A következő lépés egy új komponenst magában foglal, amely az alkalmazásunk teste lesz, amelyet egy API-hívás emulálására használnak és bevezetünk egy új irányelvnek V-for . A VUE API hozzáférést biztosít a horgok átfogó listájához a megfelelő időben történő betöltéséhez és kiváltásához (esetünkben). Ezek ki vannak zárva ennek a bemutatónak, de a részletek megtalálhatók itt .

 & lt; sablon & gt;
& lt; div id = "maincontent" & gt;
& lt; articlecontainer v-for = "(elem, index) a bejegyzésekben": Key = "index" V-BIND = "elem" / & gt;
& lt; / div & gt;
& lt; / sablon & gt;
& lt; script & gt;
import articlecontainer a "./article.vue";
FakePosts importálása "../data/posts.js";
Az alapértelmezett export {
Adatok: Funkció () {
Visszatérés {hozzászólások: []};
},
Módszerek: {
fakeapicall () {
// itt emuláljuk az érték betöltését egy API-val
this.posts = hamisposts;}
},
Alkatrészek: {ArticLecontainer},
felszerelt() {
ez.fakeapicall ();}
};
& lt; / script & gt; 

Építsen egy keverőt

A VUE.JS másik erőteljes jellemzője a mixins. Ezek újrafelhasználható JS módszerek, amelyek kiterjesztik az adott komponens jellemzőit. A mixins hozzáférést biztosít a legtöbb az API (tulajdonságok, adatok, módszerek). Általában a keverék mappa, amelyet az SRC könyvtárban hoz létre, és mivel a mixins tisztán JS, a .js kiterjesztés.

Először a funkció ereje lehet nyilvánvaló. Azonban, ahogy ismeri az VUE-t és az API-t, a Mixins elkezd alakítani és támogatni az alkalmazást. Láttam ezt a funkciót, amely meghatározza a bemeneti érvényesítést, a nemzetköziesedést és a termékfunkciókat, például a fájl feltöltését.

A normál komponens és a mixin közötti fő különbség az, hogy az utóbbit bármely komponensre lehet bevinni és alkalmazni. Például hozzáadhat egy fájlt feltöltési mixint egy gombra vagy képre, és mindegyikük hozzáférhet az új funkcióhoz.

Megakadályozhatjuk a mixint. Ez biztosítja a togglecontrast az összetevő bármelyikére alkalmazható módszer.

 Az alapértelmezett export {
Props: {
LightTextColour: {type: String, alapértelmezett: "# 252525"},
LightbackgroundColour: {type: String, alapértelmezett: "#FFF"},
DarktextColour: {type: String, alapértelmezett: "#FFF"},
DarkbackBroundColour: {type: string, alapértelmezett: "# 252525"}
},
adatok () {
Visszatérés {Islight: True};
},
Módszerek: {
toglehighcontrast () {
this.Inlight =! Ez.felől.
ha (ezt a fény) {
ez. $ el.style.backgroundcolor = ez.LightbackgroundColour;
Ez. $ el.style.color = ez.LightTextColour;
} más {
Ez. $ el.style.backgroundcolor = this.darkbackbroundColour;
Ez. $ el.style.color = this.darktextcolour; }
}}
}; 

Most a kódunk definiálható, bármilyen alkatrészben is magában foglalhatjuk, és felhasználhatja módszereit és tulajdonságait, mintha azokat a tényleges komponensben határozták meg. A mixins lehet tulajdonságok, amelyek lehetővé teszik számukra, hogy felajánlják, amint szerepelnek az összetevőbe, vagy szükségük lehet néhány intézkedésre, hogy hatályba lépjen (pl.

Ennek a szolgáltatásnak a teljes kihasználása érdekében a kódexünkön belül a következő módosítást kell tennünk:

 & lt; sablon & gt;
& lt; div osztály = "cikk" & gt;
...
& lt; gomb v-on: kattintson a = "toglehighcontrast" & gt; kapcsoló nagy kontraszt & lt; / button & gt;
& lt; / div & gt;
& lt; / sablon & gt;

& lt; script & gt;
A "../mixins/accessibility.js" hozzáférhetőség importálása;
...
Mixins: [Accessibility]
};
& lt; / script & gt; 

Most az új definiált gomb segítségével átválthatjuk az egyes komponens kontrasztját. Fontos megérteni, hogy még ha nincsenek extra tulajdonságok, a cikk összetevője valójában képes elfogadni lightexcolour , darktextcolour , LightbackgroundColour és darkbackgroundcolour . Ezeket az Accessibility Mixinn belül határozzák meg.

A kis prototípusunk most teljesen működik, és hivatkozásként használható a jövőbeni projektekre.

Ezt a cikket eredetileg a 316. \ t háló , A világ legjobban értékesítő magazinja webes tervezőknek és fejlesztőknek. Vásároljon ki kérdezést 316 itt vagy Iratkozzon fel itt .

Kapcsolódó cikkek:

• 9 a legjobb JavaScript keretrendszerek közül
• Kiderült: A legújabb JavaScript-trendek
• Hogyan építsünk egy blogolási helyet a Gatsby-vel