Vue.js se uglavnom fokusira na vizualizacijski dio aplikacije, koji se naziva i front-end razvoj. Vue.js iz dana u dan postaje sve popularniji jer ga je vrlo lako integrirati s 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 jednostraničkih aplikacija (SPA). Vue.js se obično naziva Vue i izgovara kao "view.js" ili "view".
Aplikacija za jednu stranicu ili SPA web je aplikacija ili web stranica koja korisnicima pruža vrlo glatko, osjetljivo i brzo iskustvo slično aplikaciji za stolna računala. Aplikacija na jednoj stranici sadrži izbornik, gumbe i blokove na jednoj stranici. Kada korisnik klikne na jednu od njih, ona dinamički prepisuje trenutnu stranicu umjesto da učitava cijele nove stranice s poslužitelja. To je razlog njegove brzine odziva.
Vue je u osnovi izgrađen za razvoj sučelja, tako da mora rukovati s mnogo HTML, JavaScript i CSS datoteka. Vue.js korisnicima olakšava proširenje HTML-a HTML atributima koji se nazivaju direktivama. Vue.js pruža ugrađene direktive i mnoge direktive defikorisnik za poboljšanje funkcionalnosti HTML aplikacija.
Ispod je popis najvažnijih značajki Vue.js:
Komponente Vue.js jedna su od važnih značajki ovog okvira. Koriste se za proširenje osnovnih HTML elemenata za enkapsulaciju višekratnog koda. U Vue.js aplikacijama možete stvoriti prilagođene elemente koji se mogu ponovno koristiti i koji se kasnije mogu ponovno koristiti u HTML-u.
Vue.js pruža predloške temeljene na HTML-u koji se mogu koristiti za povezivanje prikazanog DOM-a s podacima instance Vue. Svi Vue predlošci važeći su HTML koji se mogu analizirati preglednicima usklađenim sa specifikacijama i HTML parserima. Vue.js kompilira modele u funkcije renderiranja Virtual DOM-a. Vue renderira komponente u virtualnu DOM memoriju prije osvježavanja preglednika. Vue također može izračunati minimalni broj komponenti za ponovno renderiranje i primijeniti minimalnu količinu manipulacije DOM-om prilikom promjene stanja aplikacije.
Vue pruža sustav odziva koji koristi jednostavne JavaScript objekte i optimizira ponovno prikazivanje. U ovom procesu svaka komponenta prati svoje reaktivne ovisnosti, tako da sustav točno zna kada i koje komponente treba ponovno prikazati.
Navigacija stranicama 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ćuje korištenje različitih efekata prijelaza kada se elementi umetnu, ažuriraju ili uklone iz DOM-a.
Postoji nekoliko metoda za korištenje Vue.js. Možete ga instalirati odlaskom na njegovu službenu stranicu ili također možete početi koristiti datoteku Vue.js iz CDN biblioteke. Evo nekoliko načina za korištenje Vue.js u vašem projektu.
Ako želite koristiti oznaku <script> Vue.js izravno u svoju 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 za preuzimanje vue.js prema vašim potrebama.
Također možete koristiti datoteku Vue.js iz CDN-a u svojoj aplikaciji. Koristite poveznicu https://unpkg.com/vue@3/dist/vue.global.js unutar elementa <script>, kao ispod:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>Vue.js je jedna od najnovijih softverskih tehnologija koja se široko koristi za web razvoj i izgradnju Single Page Applications (SPA). Kao što možete pogoditi iz naziva, uglavnom se koristi za UI ili zaslonsku stranu projekta.
Pogledajmo prednosti korištenja Vue.js u vašem projektu:
Jedna od najvećih prednosti Vue.js je to što je vrlo 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 jednostavno preuzeti i koristiti u trenu.
Okvir Vue.js ima vrlo jednostavnu strukturu i vrlo ga je lako razumjeti. To je jedan od razloga popularnosti ovog okvira. Ako ste upoznati s HTML-om i JavaScriptom, možete jednostavno kodirati u Vue.js. Korisnici mogu jednostavno dodati Vue.js u svoj web projekt zbog njegove jednostavne strukture i razvijati aplikacije.
Vue.js ima mnogo komponenti za sve i može se vrlo brzo integrirati s postojećim aplikacijama. Možete ga integrirati s bilo kojom aplikacijom napisanom u JavaScriptu.
Fleksibilna priroda Vue.js također olakšava razumijevanje programerima React.js, Angular.js i bilo kojih drugih novih JavaScript okvira. Omogućuje veliku fleksibilnost korištenja virtualnih čvorova za pisanje HTML datoteka, JavaScript datoteka i čistih JavaScript datoteka.
Možete stvoriti prilagođene elemente koji se mogu ponovno koristiti u Vue.js aplikacijama.
Vue.js pruža vrlo jednostavnu, potpunu i detaljnu dokumentaciju, tako da ga programeri koji nemaju pojma o HTML-u i JavaScriptu mogu koristiti za programiranje.
Vue.js koristi virtualni DOM sličan drugim postojećim okvirima kao što su ReactJS, Ember itd. Virtualni DOM lagani je prikaz stabla izvornog HTML DOM-a u memoriji 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.
Framework dolazi sa sustavom koji nam omogućuje deklarativno renderiranje podataka u DOM pomoću jednostavne i jednostavne sintakse 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>Okvir Vue.js omogućuje nam da definire HTML atribute zvane direktive, koje se koriste za pružanje funkcionalnosti HTML aplikacijama.
Postoje dvije vrste direktiva u Vue.js:
Vue.js koristi dvostruke zagrade {{}} kao rezervirana mjesta za podatke, a Vue.js direktive su HTML atributi koji koriste v- prefiks.
Aplikacija Vue povezuje se s jednim DOM elementom i u potpunosti ga kontrolira. U gornjem primjeru, to je #app.
Uz Vue možemo smatrati HTML ulaznom točkom, a sve ostalo događa se unutar kreirane Vue instance.
Pogledajmo primjer gdje isprobavamo povezivanje elementa i atributa:
<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 atribut v-bind je direktiva. Direktive se koriste s prefiksom v kako bi se označilo da su to jedinstveni atributi koje pruža Vue i koriste se za primjenu posebnog responzivnog ponašanja na prikazani DOM.
Rezultat primjera je sljedeći
Ercole Palmeri
Pomorski sektor je prava globalna gospodarska sila, koja je krenula prema tržištu od 150 milijardi...
Prošlog ponedjeljka, Financial Times je najavio dogovor s OpenAI-jem. FT licencira svoje novinarstvo svjetske klase...
Milijuni ljudi plaćaju usluge strujanja, plaćajući mjesečne pretplate. Uvriježeno je mišljenje da ste…
Coveware by Veeam nastavit će pružati usluge odgovora na incidente cyber iznude. Coveware će ponuditi forenziku i mogućnosti sanacije...
