Vue.js fokuserer hovedsageligt på visualiseringsdelen af applikationen, også kaldet frontend-udvikling. Vue.js bliver populær dag for dag, fordi det er meget nemt at integrere med andre projekter og biblioteker. Det er meget nemt at installere og bruge.
Vue.js er en progressiv JavaScript-ramme open source bruges til at udvikle interaktive webbrugergrænseflader og enkeltsideapplikationer (SPA'er). Vue.js omtales almindeligvis som Vue og udtales som "view.js" eller "view".
A Single Page Application eller SPA er en webapplikation eller et websted, der giver brugerne en meget jævn, responsiv og hurtig oplevelse, der ligner en desktopapplikation. En enkeltsideapplikation indeholder en menu, knapper og blokke på en enkelt side. Når en bruger klikker på en af dem, omskriver den dynamisk den aktuelle side i stedet for at indlæse helt nye sider fra en server. Dette er årsagen til dens responshastighed.
Vue er grundlæggende bygget til frontend-udvikling, så det skal håndtere en masse HTML-, JavaScript- og CSS-filer. Vue.js gør det nemt for brugere at udvide HTML med HTML-attributter kaldet direktiver. Vue.js giver indbyggede direktiver og mange direktiver definte af brugeren for at forbedre funktionaliteten af HTML-applikationer.
Nedenfor er listen over de vigtigste funktioner i Vue.js:
Vue.js-komponenter er en af de vigtige funktioner i denne ramme. De bruges til at udvide grundlæggende HTML-elementer til at indkapsle genanvendelig kode. Du kan oprette genbrugelige brugerdefinerede elementer i Vue.js-applikationer, som senere kan genbruges i HTML.
Vue.js leverer HTML-baserede skabeloner, der kan bruges til at knytte den gengivne DOM til Vue-forekomstdata. Alle Vue-skabeloner er gyldig HTML, der kan parses af spec-kompatible browsere og HTML-parsere. Vue.js kompilerer modeller til virtuelle DOM-gengivelsesfunktioner. Vue gengiver komponenter til virtuel DOM-hukommelse, før browseren opdateres. Vue kan også beregne det mindste antal komponenter, der skal gengives, og anvende minimumsmængden af DOM-manipulation ved ændring af applikationstilstand.
Vue leverer et reaktionssystem, der bruger simple JavaScript-objekter og optimerer gengivelsen. I denne proces holder hver komponent styr på sine reaktive afhængigheder, så systemet ved præcis hvornår og hvilke komponenter der skal gengives.
Sidenavigation sker ved hjælp af vue-router. Du kan bruge det officielt understøttede vue-router-bibliotek til din enkeltsideapplikation.
Vue giver dig mulighed for at bruge forskellige overgangseffekter, når elementer indsættes, opdateres eller fjernes fra DOM.
Der er flere metoder til at bruge Vue.js. Du kan installere det ved at gå til dets officielle websted, eller du kan også begynde at bruge filen Vue.js fra CDN-biblioteket. Her er nogle måder at bruge Vue.js i dit projekt.
Hvis du vil bruge tagget <script> af Vue.js direkte ind i din HTML-fil, skal du downloade den fra den officielle hjemmeside.
<html>
<head>
<script type = "text/javascript" src = "vue.min.js"></script>
</head>
<body>
</body>
</html> Lad os gå til Vue.js officielle hjemmeside https://vuejs.org/v2/guide/installation.html at downloade vue.js efter dine behov.
Du kan også bruge filen Vue.js fra CDN i din ansøgning. Brug linket https://unpkg.com/vue@3/dist/vue.global.js inde i elementet <script>, som nedenfor:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>Vue.js er en af de nyeste softwareteknologier, der er meget brugt til webudvikling og opbygning af Single Page Applications (SPA). Som du kan gætte ud fra navnet, bruges det mest til UI eller visningssiden af projektet.
Lad os se fordelene ved at bruge Vue.js i dit projekt:
En af de største fordele ved Vue.js er, at den er meget lille i størrelsen. Succesen med et JavaScript-framework afhænger meget af dets størrelse og dette spændende JavaScript-plugin er kun 18-21KB, så du kan meget nemt downloade og bruge det på ingen tid.
Vue.js-rammen har en meget enkel struktur og er meget let at forstå. Det er en af grundene til denne rammes popularitet. Hvis du er fortrolig med HTML og JavaScript, kan du nemt kode i Vue.js. Brugere kan nemt tilføje Vue.js til deres webprojekt på grund af dens enkle struktur og udvikle applikationer.
Vue.js har mange komponenter til alt og kan meget hurtigt integreres med eksisterende applikationer. Du kan integrere det med enhver applikation skrevet i JavaScript.
Den fleksible karakter af Vue.js gør det også nemt for udviklere af React.js, Angular.js og alle andre nye JavaScript-rammer at forstå. Det giver en masse fleksibilitet at bruge virtuelle noder til at skrive HTML-filer, JavaScript-filer og rene JavaScript-filer.
Du kan oprette brugerdefinerede elementer, der kan genbruges i Vue.js-applikationer.
Vue.js giver meget enkel, komplet og detaljeret dokumentation, så udviklere, der ikke har nogen idé om HTML og JavaScript, kan bruge det til at programmere.
Vue.js bruger virtuel DOM svarende til andre eksisterende rammer som ReactJS, Ember osv. Den virtuelle DOM er en let in-memory træ-repræsentation af den originale HTML DOM og opdateres uden at påvirke den oprindelige DOM.
Vue.js giver tovejskommunikation med sin Model View View Model-arkitektur (MVVM), der forenkler håndteringen af HTML-blokke.
Rammen kommer med et system, der giver os mulighed for deklarativt at gengive data til DOM ved hjælp af enkel og ligetil modelsyntaks.
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-rammen giver os mulighed for definire HTML-attributter kaldet direktiver, som bruges til at levere funktionalitet til HTML-applikationer.
Der er to typer direktiver i Vue.js:
Vue.js bruger dobbelte klammer {{}} som pladsholdere for data, og Vue.js-direktiver er HTML-attributter, der bruger et v-præfiks.
En Vue-app forbinder til et enkelt DOM-element og styrer det fuldt ud. I ovenstående eksempel er det #app.
Med Vue kan vi betragte HTML som indgangspunktet, og alt andet sker inde i den oprettede Vue-instans.
Lad os se et eksempel, hvor vi prøver element- og attributbinding:
<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 tilfælde er den nye v-bind-attribut direktivet. Direktiver bruges med et v-præfiks for at angive, at de er unikke attributter leveret af Vue, og bruges til at anvende speciel responsiv adfærd på den gengivne DOM.
Resultatet af eksemplet er følgende
Ercole Palmeri
Coveware by Veeam vil fortsætte med at levere responstjenester til cyberafpresning. Coveware vil tilbyde kriminaltekniske og afhjælpende funktioner...
Forudsigende vedligeholdelse revolutionerer olie- og gassektoren med en innovativ og proaktiv tilgang til anlægsstyring...
Det britiske CMA har udsendt en advarsel om Big Techs adfærd på markedet for kunstig intelligens. Der…
Dekretet om "grønne huse", der er formuleret af Den Europæiske Union for at øge bygningers energieffektivitet, har afsluttet sin lovgivningsproces med...
