Vue.js se uglavnom fokusira na vizualizacijski dio aplikacije, koji se naziva i front-end razvoj. Vue.js postaje sve popularniji iz dana u dan jer se vrlo lako integriše sa drugim projektima i bibliotekama. Vrlo je jednostavan za instalaciju i korištenje.
Vue.js je progresivni JavaScript okvir open source koristi se za razvoj interaktivnih web korisničkih sučelja i aplikacija na jednoj stranici (SPA). Vue.js se obično naziva Vue i izgovara kao "view.js" ili "view".
Aplikacija za jednu stranicu ili SPA je web aplikacija ili web stranica koja korisnicima pruža vrlo glatko, brzo i brzo iskustvo slično desktop aplikaciji. Aplikacija za jednu stranicu sadrži meni, dugmad i blokove na jednoj stranici. Kada korisnik klikne na jednu od njih, on dinamički prepisuje trenutnu stranicu umjesto da učitava cijele nove stranice sa servera. To je razlog njegove brzine odziva.
Vue je u osnovi napravljen za razvoj frontenda, tako da mora da obrađuje mnogo HTML, JavaScript i CSS datoteka. Vue.js korisnicima olakšava proširenje HTML-a pomoću HTML atributa koji se nazivaju direktivama. Vue.js pruža ugrađene direktive i mnoge direktive defikorisnik da poboljša funkcionalnost HTML aplikacija.
Ispod je lista najvažnijih karakteristika Vue.js:
Vue.js komponente su jedna od važnih karakteristika ovog okvira. Koriste se za proširenje osnovnih HTML elemenata kako bi se inkapsulirao kod za višekratnu upotrebu. Možete kreirati prilagođene elemente za višekratnu upotrebu u Vue.js aplikacijama koji se kasnije mogu ponovo koristiti u HTML-u.
Vue.js pruža HTML-bazirane predloške koji se mogu koristiti za povezivanje prikazanog DOM-a sa podacima Vue instance. Svi Vue predlošci su važeći HTML koji se mogu raščlaniti pretraživačima usklađenim sa specifikacijama i HTML parserima. Vue.js kompajlira modele u funkcije virtualnog DOM renderiranja. Vue renderuje komponente u virtuelnu DOM memoriju pre osvežavanja pretraživača. Vue također može izračunati minimalni broj komponenti za ponovno prikazivanje i primijeniti minimalnu količinu DOM manipulacije prilikom promjene stanja aplikacije.
Vue pruža sistem odziva koji koristi jednostavne JavaScript objekte i optimizuje ponovno prikazivanje. U ovom procesu, svaka komponenta prati svoje reaktivne zavisnosti, tako da sistem tačno zna kada i koje komponente treba ponovo da prikaže.
Navigacija po stranici se vrši uz pomoć vue-routera. Možete koristiti službeno podržanu biblioteku vue-router za svoju aplikaciju na jednoj stranici.
Vue vam omogućava da koristite različite efekte prijelaza kada se elementi umetnu, ažuriraju ili uklone iz DOM-a.
Postoji nekoliko metoda za korištenje Vue.js. Možete ga instalirati tako što ćete otići na njegovu službenu stranicu ili možete početi koristiti datoteku Vue.js iz CDN biblioteke. Evo nekoliko načina da koristite Vue.js u svom projektu.
Ako želite da koristite oznaku <script> Vue.js direktno u vašu HTML datoteku, morate je preuzeti sa službene web stranice.
<html>
<head>
<script type = "text/javascript" src = "vue.min.js"></script>
</head>
<body>
</body>
</html> Idemo na službenu web stranicu Vue.js https://vuejs.org/v2/guide/installation.html da preuzmete vue.js prema vašim potrebama.
Također možete koristiti datoteku Vue.js iz CDN-a, u svojoj aplikaciji. Koristite link https://unpkg.com/vue@3/dist/vue.global.js unutar elementa <script>, ispod:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>Vue.js je jedna od najnovijih softverskih tehnologija koja se naširoko koristi za web razvoj i izgradnju aplikacija na jednoj stranici (SPA). Kao što možete pretpostaviti iz naziva, uglavnom se koristi za korisničko sučelje ili zaslonsku stranu projekta.
Pogledajmo prednosti korištenja Vue.js u vašem projektu:
Jedna od najvećih prednosti Vue.js-a je ta što je veoma male veličine. Uspjeh JavaScript okvira uvelike ovisi o njegovoj veličini, a ovaj uzbudljivi JavaScript dodatak ima samo 18-21 KB, tako da ga možete vrlo lako preuzeti i koristiti za kratko vrijeme.
Vue.js framework ima vrlo jednostavnu strukturu i vrlo je lak za razumijevanje. To je jedan od razloga popularnosti ovog okvira. Ako ste upoznati sa HTML-om i JavaScript-om, lako možete kodirati u Vue.js. Korisnici mogu lako dodati Vue.js svom web projektu zbog njegove jednostavne strukture i razvoja aplikacija.
Vue.js ima mnogo komponenti za sve i može se vrlo brzo integrirati sa postojećim aplikacijama. Možete ga integrirati sa bilo kojom aplikacijom napisanom u JavaScript-u.
Fleksibilna priroda Vue.js-a također olakšava razumijevanje programerima React.js, Angular.js i svih drugih novih JavaScript okvira. Pruža veliku fleksibilnost za korištenje virtuelnih čvorova za pisanje HTML datoteka, JavaScript datoteka i čistih JavaScript datoteka.
Možete kreirati prilagođene elemente koji se mogu ponovo koristiti u Vue.js aplikacijama.
Vue.js pruža vrlo jednostavnu, potpunu i detaljnu dokumentaciju, tako da programeri koji nemaju pojma o HTML-u i JavaScriptu mogu ga koristiti za programiranje.
Vue.js koristi virtualni DOM sličan drugim postojećim okvirima kao što su ReactJS, Ember, itd. Virtuelni DOM je lagana reprezentacija stabla u memoriji originalnog HTML DOM-a i ažurira se bez utjecaja na početni DOM.
Vue.js pruža dvosmjernu komunikaciju sa svojom arhitekturom Model View View Model (MVVM) koja pojednostavljuje rukovanje HTML blokovima.
Okvir dolazi sa sistemom koji nam omogućava da deklarativno prikažemo podatke u DOM koristeći jednostavnu i jasnu sintaksu modela.
Evo primjera:
<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>Vue.js framework nam to omogućava definire HTML atribute koji se nazivaju direktive, koji se koriste za pružanje funkcionalnosti HTML aplikacijama.
Postoje dvije vrste direktiva u Vue.js:
Vue.js koristi dvostruke zagrade {{}} kao čuvare mjesta za podatke, a Vue.js direktive su HTML atributi koji koriste v- prefiks.
Vue aplikacija se povezuje na jedan DOM element i u potpunosti ga kontrolira. U gornjem primjeru, to je #app.
Sa Vueom možemo smatrati HTML ulaznom tačkom, a sve ostalo se dešava unutar kreirane Vue instance.
Pogledajmo primjer gdje pokušavamo povezati elemente i atribute:
<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> U ovom slučaju, novi v-bind atribut je direktiva. Direktive se koriste sa prefiksom v- kako bi se naznačilo da su to jedinstveni atributi koje pruža Vue i koriste se za primjenu posebnog odzivnog ponašanja na renderirani DOM.
Rezultat primjera je sljedeći
Ercole Palmeri
Coveware od strane Veeam-a će nastaviti da pruža usluge odgovora na incidente u slučaju sajber iznude. Coveware će ponuditi mogućnosti forenzike i sanacije…
Prediktivno održavanje revolucionira sektor nafte i plina, s inovativnim i proaktivnim pristupom upravljanju postrojenjima.…
UK CMA izdao je upozorenje o ponašanju Big Tech-a na tržištu umjetne inteligencije. Tamo…
Uredba o „zelenim kućama“, koju je formulisala Evropska unija za poboljšanje energetske efikasnosti zgrada, završila je svoj zakonodavni proces sa…
