A Vue.js elsősorban az alkalmazás vizualizációs részére összpontosít, amelyet front-end fejlesztésnek is neveznek. A Vue.js napról napra egyre népszerűbb, mert nagyon könnyen integrálható más projektekkel és könyvtárakkal. Telepítése és használata nagyon egyszerű.
A Vue.js egy progresszív JavaScript-keretrendszer nyílt forráskódú interaktív webes felhasználói felületek és egyoldalas alkalmazások (SPA-k) fejlesztésére használják. A Vue.js-t általában Vue-nek nevezik, és "view.js"-nek vagy "view"-nak ejtik.
Az egyoldalas alkalmazás vagy SPA egy olyan webalkalmazás vagy webhely, amely az asztali alkalmazásokhoz hasonló, nagyon gördülékeny, érzékeny és gyors felhasználói élményt biztosít. Az egyoldalas alkalmazás menüt, gombokat és blokkokat tartalmaz egyetlen oldalon. Amikor a felhasználó rákattint valamelyikre, dinamikusan átírja az aktuális oldalt, ahelyett, hogy teljesen új oldalakat töltene be a szerverről. Ez az oka annak reakciósebességének.
A Vue alapvetően frontend fejlesztésre készült, így sok HTML, JavaScript és CSS fájlt kell kezelnie. A Vue.js megkönnyíti a felhasználók számára a HTML kiterjesztését direktíváknak nevezett HTML-attribútumokkal. A Vue.js beépített direktívákat és számos direktívát biztosít definite a felhasználó által a HTML alkalmazások funkcionalitásának javítása érdekében.
Az alábbiakban a Vue.js legfontosabb funkcióinak listája található:
A Vue.js összetevői ennek a keretrendszernek az egyik fontos jellemzői. Az alapvető HTML-elemek kiterjesztésére használják, hogy újrafelhasználható kódot kapjanak. A Vue.js alkalmazásokban újrafelhasználható egyéni elemeket hozhat létre, amelyek később újra felhasználhatók HTML-ben.
A Vue.js HTML-alapú sablonokat biztosít, amelyek segítségével a renderelt DOM a Vue-példányadatokhoz társítható. Minden Vue-sablon érvényes HTML, amelyet az előírásoknak megfelelő böngészők és HTML-elemzők elemezhetnek. A Vue.js virtuális DOM-renderelő függvényekké fordítja a modelleket. A Vue a böngésző frissítése előtt az összetevőket virtuális DOM-memóriába jeleníti meg. A Vue azt is ki tudja számítani az újrarenderelendő összetevők minimális számát, és a minimális DOM-manipulációt alkalmazza az alkalmazás állapotának megváltoztatásakor.
A Vue olyan reagálóképességi rendszert biztosít, amely egyszerű JavaScript-objektumokat használ, és optimalizálja az újramegjelenítést. Ebben a folyamatban minden komponens nyomon követi reaktív függőségeit, így a rendszer pontosan tudja, mikor és mely összetevőket kell újra renderelni.
Az oldalnavigáció a vue-router segítségével történik. Egyoldalas alkalmazásához használhatja a hivatalosan támogatott vue-router könyvtárat.
A Vue lehetővé teszi különböző átmeneti effektusok használatát, amikor elemeket beszúrnak, frissítenek vagy eltávolítanak a DOM-ból.
Számos módszer létezik a Vue.js használatára. Telepítheti a hivatalos webhelyén, vagy elkezdheti használni a Vue.js fájlt a CDN-könyvtárból is. Íme néhány módszer a Vue.js használatára a projektben.
Ha szeretné használni a címkét <script> a Vue.js fájlt közvetlenül a HTML-fájlba, le kell töltenie a hivatalos webhelyről.
<html>
<head>
<script type = "text/javascript" src = "vue.min.js"></script>
</head>
<body>
</body>
</html> Menjünk a Vue.js hivatalos webhelyére https://vuejs.org/v2/guide/installation.html a vue.js letöltéséhez az igényeinek megfelelően.
Használhatja a CDN Vue.js fájlját is az alkalmazásában. Használja a https://unpkg.com/vue@3/dist/vue.global.js hivatkozást az elemen belül <script>, az alábbi:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>A Vue.js az egyik legújabb szoftvertechnológia, amelyet széles körben használnak webfejlesztéshez és egyoldalas alkalmazások (SPA) létrehozásához. Ahogy a névből sejthető, leginkább a projekt felhasználói felületére vagy megjelenítési oldalára használják.
Nézzük meg a Vue.js projektben való használatának előnyeit:
A Vue.js egyik legnagyobb előnye, hogy nagyon kis méretű. A JavaScript keretrendszer sikere nagyban függ a méretétől, és ez az izgalmas JavaScript plugin mindössze 18-21 KB, így nagyon egyszerűen, pillanatok alatt letölthető és használható.
A Vue.js keretrendszer nagyon egyszerű felépítésű és nagyon könnyen érthető. Ez az egyik oka a keret népszerűségének. Ha ismeri a HTML-t és a JavaScriptet, könnyen kódolhat a Vue.js-ben. A felhasználók egyszerűen hozzáadhatják a Vue.js-t webprojektjükhöz, és alkalmazásokat fejleszthetnek.
A Vue.js mindenhez sok összetevőt tartalmaz, és nagyon gyorsan integrálható a meglévő alkalmazásokkal. Integrálhatja bármely JavaScript-ben írt alkalmazással.
A Vue.js rugalmas természete megkönnyíti a React.js, az Angular.js és bármely más új JavaScript-keretrendszer fejlesztői számára a megértést. Nagy rugalmasságot biztosít a virtuális csomópontok használatában HTML-fájlok, JavaScript-fájlok és tiszta JavaScript-fájlok írásához.
Létrehozhat egyéni elemeket, amelyek újra felhasználhatók a Vue.js alkalmazásokban.
A Vue.js nagyon egyszerű, teljes és részletes dokumentációt biztosít, így azok a fejlesztők, akiknek kevés fogalmuk van a HTML-ről és a JavaScriptről, használhatják programozáshoz.
A Vue.js virtuális DOM-ot használ, hasonlóan más meglévő keretrendszerekhez, mint a ReactJS, Ember stb. A virtuális DOM az eredeti HTML DOM egyszerű, memórián belüli faábrázolása, amely a kezdeti DOM befolyásolása nélkül frissül.
A Vue.js kétirányú kommunikációt biztosít a Model View View Model (MVVM) architektúrájával, amely leegyszerűsíti a HTML blokkok kezelését.
A keretrendszerhez tartozik egy olyan rendszer, amely lehetővé teszi számunkra, hogy deklaratív módon rendereljük az adatokat a DOM-ba, egyszerű és egyértelmű modellszintaxis használatával.
Íme egy példa:
<body>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'This is a simple Vue.js Declarative Rendering example!'
}
})
</script>
</body>A Vue.js keretrendszer lehetővé teszi számunkra definire HTML-attribútumok, úgynevezett direktívák, amelyek a HTML-alkalmazások funkcionalitásának biztosítására szolgálnak.
A Vue.js-ben kétféle direktíva létezik:
A Vue.js dupla kapcsos zárójelet {{}} használ az adatok helyőrzőjeként, a Vue.js direktívák pedig v-előtagot használó HTML-attribútumok.
A Vue alkalmazás egyetlen DOM-elemhez csatlakozik, és teljes mértékben vezérli azt. A fenti példában ez az #app.
A Vue-val a HTML-t tekinthetjük belépési pontnak, minden más pedig a létrehozott Vue példányon belül történik.
Lássunk egy példát, ahol megpróbáljuk elem- és attribútum-kötést:
<html>
<head>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app-2">
<span v-bind:title="message">
Hover mouse over me for a few seconds
and see a dynamically bound title which I have set!
</span>
</div>
<script>
var app2 = new Vue({
el: '#app-2',
data: {
message: 'You loaded this page on ' + new Date().toLocaleString()
}
})
</script>
</body>
</html> Ebben az esetben az új v-bind attribútum a direktíva. Az irányelveket v-előtaggal használják annak jelzésére, hogy ezek a Vue által biztosított egyedi attribútumok, és speciális reagáló viselkedést alkalmaznak a megjelenített DOM-ra.
A példa eredménye a következő
Ercole Palmeri
A finom motoros készségek színezéssel történő fejlesztése felkészíti a gyerekeket olyan összetettebb készségekre, mint az írás. Kiszínezni…
A haditengerészeti szektor igazi világgazdasági hatalom, amely egy 150 milliárdos piac felé navigált...
Múlt hétfőn a Financial Times bejelentette, hogy megállapodást köt az OpenAI-val. Az FT engedélyezi világszínvonalú újságírását…
Emberek milliói fizetnek a streaming szolgáltatásokért, havi előfizetési díjat fizetve. Általános vélemény, hogy Ön…
