Vue.js Alkatrészek

Vue.A js egy progresszív javascript keretrendszer, amelyet UI-k (felhasználói interfészek) és SPA-k (egyoldalas alkalmazások) felépítésére használnak. Elkezdhetjük webalkalmazások építését a Vue-ban.js az alapvető HTML, CSS és Javascript ismeretekkel. Vue.A js a már meglévő szög- és reagálókeret legjobb tulajdonságainak ötvözésével épül fel. A fejlesztők szeretnek kódolni, és érzik a szabadságot és a kényelmet, miközben alkalmazásokat építenek a Vue-ban.js.

Ezt az alkatrész-alapú megközelítést alapvetően a ReactJS inspirálta és választotta ki. A kódot komponensek formájában írjuk, hogy importálhassuk és újra felhasználhassuk, ahol csak szükségünk van rá. Vue.A js egyetlen fájlból álló összetevőt kínál, ami lazán összekapcsolt és újrafelhasználható kódot jelent.

Vue.a js a legjobb komponens-alapú megközelítést kínálja, akármi, amire a fejlesztőnek szüksége van; egyetlenben megtalálja .vue fájl. A fejlesztők olyan kényelmesen és nyugodtan érzik magukat, amikor nem kell aggódniuk vagy gondoskodniuk az alkatrészek extra szerkezetéről.

Ebben a cikkben megnézzük az egy fájl összetevőt, amelynek a .vue kiterjesztés. Tehát nézzünk meg egy nagyon egyszerű Vue komponens példát, és értsük meg.

Ez egy nagyon egyszerű és alapvető példa a Vue komponensre. Amiben láthatjuk, hogy a kód három rétegre oszlik. Ez a háromrétegű szintaxis a Vue legjobb része.js. Elégíti az aggodalom elkülönülését, ugyanakkor egyetlen egyben van .vue fájl. Megvan a sablonunk (HTML), a logika a Javascriptben, és a stílusunk egy komponensen belül.

• Sablon
• Forgatókönyv
• Stílus

Sablon

Ebben a sabloncímkében megírjuk a HTML kódunkat. A változókat ebben is megköthetjük a Vue segítségével.js adatkötéses szintaxis, és ehhez hozzáadhatunk még néhány funkciót a Vue segítségével.js szintaxist adott a megfelelő funkciókhoz.

Forgatókönyv

Ez az a rész, ahová a Vue szintaxisait követve megírhatjuk az összetevő logikáját javascriptben.js. A komponens összes funkciója és logikája itt található. Például,

• További összetevők és csomagok importálása szükséges.
• Változó nyilatkozat
• Módszerek / funkciók
• Életciklusos horgok
• Számított tulajdonságok és figyelők
• Stb…

Stílus

Itt írjuk be a komponens stílusát CSS-be, vagy használhatunk bármelyik előprocesszort, amelyet használni szeretnénk.

Ez csak egy pillantás a Vue egyik komponensére.js. Vessünk egy pillantást az összetevők közötti használatra, szervezésre és adatfolyamra egy kicsit.

Komponensek importálása és használata

Az összetevő használatához először importálnunk kell az összetevőt. Egyébként hogyan lehet Vue.js tud róla? Egyszerűen importálhatunk egy összetevőt úgy, hogy hozzáadunk egy „Import” utasítást a szkriptcímke elejéhez, és deklaráljuk az összetevőt az „components” objektumban, a következő szintaxissal.

Az összetevő sikeres importálása után felhasználhatjuk az ilyen sablonban