Vue.js fokuserer hovedsakelig på visualiseringsdelen av applikasjonen, også kalt frontend-utvikling. Vue.js blir populær dag for dag fordi det er veldig enkelt å integrere med andre prosjekter og biblioteker. Det er veldig enkelt å installere og bruke.
Vue.js er et progressivt JavaScript-rammeverk åpen kildekode brukes til å utvikle interaktive nettbrukergrensesnitt og enkeltsideapplikasjoner (SPA). Vue.js blir ofte referert til som Vue og uttales som "view.js" eller "view".
En enkeltsideapplikasjon eller SPA er en nettapplikasjon eller et nettsted som gir brukere en veldig jevn, responsiv og rask opplevelse som ligner på en skrivebordsapplikasjon. En enkeltsideapplikasjon inneholder en meny, knapper og blokker på en enkelt side. Når en bruker klikker på en av dem, omskriver den gjeldende side dynamisk i stedet for å laste inn helt nye sider fra en server. Dette er årsaken bak responshastigheten.
Vue er i utgangspunktet utviklet for frontend-utvikling, så det må håndtere mange HTML-, JavaScript- og CSS-filer. Vue.js gjør det enkelt for brukere å utvide HTML med HTML-attributter kalt direktiver. Vue.js gir innebygde direktiver og mange direktiver definett av brukeren for å forbedre funksjonaliteten til HTML-applikasjoner.
Nedenfor er listen over de viktigste funksjonene til Vue.js:
Vue.js-komponenter er en av de viktige funksjonene i dette rammeverket. De brukes til å utvide grunnleggende HTML-elementer for å innkapsle gjenbrukbar kode. Du kan lage gjenbrukbare egendefinerte elementer i Vue.js-applikasjoner som senere kan gjenbrukes i HTML.
Vue.js gir HTML-baserte maler som kan brukes til å assosiere den gjengitte DOM med Vue-forekomstdata. Alle Vue-maler er gyldig HTML som kan analyseres av spesifikasjonskompatible nettlesere og HTML-parsere. Vue.js kompilerer modeller til virtuelle DOM-gjengivelsesfunksjoner. Vue gjengir komponenter til virtuelt DOM-minne før nettleseren oppdateres. Vue kan også beregne minimum antall komponenter som skal gjengis og bruke minimumsmengden av DOM-manipulasjon når applikasjonstilstand endres.
Vue gir et responssystem som bruker enkle JavaScript-objekter og optimerer gjengivelse. I denne prosessen holder hver komponent oversikt over sine reaktive avhengigheter, slik at systemet vet nøyaktig når og hvilke komponenter som skal gjengis.
Sidenavigering gjøres ved hjelp av vue-ruter. Du kan bruke det offisielt støttede vue-ruterbiblioteket for enkeltsideapplikasjonen din.
Vue lar deg bruke forskjellige overgangseffekter når elementer settes inn, oppdateres eller fjernes fra DOM.
Det er flere metoder for å bruke Vue.js. Du kan installere den ved å gå til den offisielle siden, eller du kan også begynne å bruke Vue.js-filen fra CDN-biblioteket. Her er noen måter å bruke Vue.js på i prosjektet ditt.
Hvis du vil bruke taggen <script> av Vue.js direkte inn i HTML-filen din, må du laste den ned fra den offisielle nettsiden.
<html>
<head>
<script type = "text/javascript" src = "vue.min.js"></script>
</head>
<body>
</body>
</html> La oss gå til Vue.js offisielle nettsted https://vuejs.org/v2/guide/installation.html for å laste ned vue.js i henhold til dine behov.
Du kan også bruke Vue.js-filen fra CDN, i applikasjonen din. Bruk lenken https://unpkg.com/vue@3/dist/vue.global.js inne i elementet <script>, som Nedenfor:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>Vue.js er en av de nyeste programvareteknologiene som er mye brukt for webutvikling og bygging av Single Page Applications (SPA). Som du kan gjette fra navnet, brukes det mest for UI eller visningssiden av prosjektet.
La oss se fordelene med å bruke Vue.js i prosjektet ditt:
En av de største fordelene med Vue.js er at den er veldig liten i størrelse. Suksessen til et JavaScript-rammeverk avhenger mye av størrelsen, og denne spennende JavaScript-pluginen er bare 18-21KB, så du kan veldig enkelt laste ned og bruke den på kort tid.
Vue.js-rammeverket har en veldig enkel struktur og er veldig lett å forstå. Det er en av grunnene til populariteten til dette rammeverket. Hvis du er kjent med HTML og JavaScript, kan du enkelt kode i Vue.js. Brukere kan enkelt legge til Vue.js til sitt webprosjekt på grunn av dens enkle struktur og utvikle applikasjoner.
Vue.js har mange komponenter for alt og kan integreres veldig raskt med eksisterende applikasjoner. Du kan integrere den med alle programmer skrevet i JavaScript.
Den fleksible naturen til Vue.js gjør det også enkelt for utviklere av React.js, Angular.js og andre nye JavaScript-rammeverk å forstå. Det gir mye fleksibilitet å bruke virtuelle noder til å skrive HTML-filer, JavaScript-filer og rene JavaScript-filer.
Du kan lage egendefinerte elementer som er gjenbrukbare i Vue.js-applikasjoner.
Vue.js gir veldig enkel, komplett og detaljert dokumentasjon, slik at utviklere som har liten peiling på HTML og JavaScript kan bruke den til å programmere.
Vue.js bruker virtuell DOM som ligner på andre eksisterende rammeverk som ReactJS, Ember, etc. Den virtuelle DOM er en lett trerepresentasjon i minnet av den originale HTML DOM og oppdateres uten å påvirke den opprinnelige DOM.
Vue.js gir toveiskommunikasjon med sin Model View View Model (MVVM)-arkitektur som forenkler håndteringen av HTML-blokker.
Rammeverket kommer med et system som lar oss deklarativt gjengi data til DOM ved hjelp av enkel og grei modellsyntaks.
Her er et eksempel:
<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-rammeverket lar oss definire HTML-attributter kalt direktiver, som brukes til å gi funksjonalitet til HTML-applikasjoner.
Det er to typer direktiver i Vue.js:
Vue.js bruker doble klammeparenteser {{}} som plassholdere for data, og Vue.js-direktiver er HTML-attributter som bruker et v-prefiks.
En Vue-app kobles til et enkelt DOM-element og kontrollerer det fullt ut. I eksemplet ovenfor er det #app.
Med Vue kan vi vurdere HTML som inngangspunktet, og alt annet skjer inne i den opprettede Vue-forekomsten.
La oss se et eksempel der vi prøver element- og attributtbinding:
<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> I dette tilfellet er det nye v-bind-attributtet direktivet. Direktiver brukes med et v-prefiks for å indikere at de er unike attributter levert av Vue, og brukes til å bruke spesiell responsiv oppførsel på den gjengitte DOM.
Resultatet av eksemplet er følgende
Ercole Palmeri
Å utvikle finmotorikk gjennom fargelegging forbereder barna på mer komplekse ferdigheter som å skrive. Å farge…
Marinesektoren er en ekte global økonomisk makt, som har navigert mot et 150 milliarder marked...
Sist mandag kunngjorde Financial Times en avtale med OpenAI. FT lisensierer sin journalistikk i verdensklasse...
Millioner av mennesker betaler for strømmetjenester og betaler månedlige abonnementsavgifter. Det er vanlig oppfatning at du...
