| Vue.js | |
|---|---|
| Type | funktionsbibliotek , JavaScript-framework og web-framework |
| Forfatter | Evan Yu |
| Skrevet i | JavaScript [3] og TypeScript |
| Første udgave | februar 2014 [1] |
| nyeste version | 3.2.37 [2] ( 6. juni 2022 ) |
| Licens | MIT-licens |
| Internet side | vuejs.org _ |
| Mediefiler på Wikimedia Commons | |
Vue.js (også Vue ; / v j uː / ) er en open source JavaScript - ramme til opbygning af brugergrænseflader [4] . Nemt integreret i projekter ved hjælp af andre JavaScript-biblioteker . Det kan fungere som en webramme til udvikling af enkeltsidede applikationer i en reaktiv stil.
Støttes i øjeblikket af skaberen Evan Yu og andre aktive kerneteammedlemmer fra forskellige virksomheder såsom Netlify , Netguru , Baidu , Livestorm [5] .
En undersøgelse fra 2016 for JavaScript viste, at Vue havde 89 % udviklertilfredshed [6] . Projektet har 188K stjerner på GitHub [7] , er det tredjestørste projekt i GitHubs historie .
I 2013 kom Google -medarbejder Evan You , der arbejdede på et af projekterne, til den konklusion, at der ikke er nogen færdige løsninger til hurtig prototyping af komplekse webapplikationsbrugergrænseflader: React var dengang på et tidligt udviklingsstadium, de vigtigste værktøjer var så komplekse rammer som AngularJS eller den MVC - orienterede Backbone.js , som ikke var enkle og fokuserede på at udvikle store applikationer. For at bygge bro over denne kløft begyndte Yu at udvikle Vue.js, som, mens den bevarede sin enkelhed, viste sig at være egnet ikke kun til prototyping, men også til fuldgyldig udvikling [8] .
I oktober 2015 blev version 1.0 af biblioteket udgivet, i september 2016 version 2.0.
Siden version 2.0 understøtter den også server-side rendering, også kaldet SSR (Server-Side Rendering) [9] .
Den 18. september 2020 blev Vue.js 3.0.0 "One Piece" frigivet ifølge udviklerne, "giver forbedret ydeevne, mindre pakker, bedre TypeScript-integration, nye API'er til at løse problemer i stor skala og et solidt fundament for fremtidige iterationer af rammeværket på lang sigt.perspektiv” [10] .
3.0-udgivelsen har inkorporeret over 2 års udviklingsindsats, inklusive over 30 RFC'er, over 2600 commits, 628 anmodninger fra 99 udviklere, plus en enorm mængde udviklingsarbejde og dokumentation. Al kode er blevet omskrevet i et mere effektivt TypeScript, hvilket giver fordele ved agil udvikling.
Der introduceres også et nyt sæt af sammensætnings-API'er [11] .
| version | udgivelses dato | Titel |
|---|---|---|
| 3.2 | 5. august 2021 | The Quintessential Quintuplets [12] |
| 3.1 | 7. juni 2021 | Pluto [13] |
| 3.0 | 18. september 2020 | One Piece [14] |
| 2.6 | 4. februar 2019 | Makros [15] |
| 2.5 | 13. oktober 2017 | Niveau E [16] |
| 2.4 | 13. juli 2017 | Kill la Kill [17] |
| 2.3 | 27. april 2017 | JoJos bizarre eventyr [18] |
| 2.2 | 26. februar 2017 | Indledende D [19] |
| 2.1 | 22. november 2016 | Hunter X Hunter [20] |
| 2.0 | 30. september 2016 | Ghost in the Shell [21] |
| 1.0 | 27. oktober 2015 | Evangelion [22] |
| 0,12 | 12. juni 2015 | Dragon Ball [23] |
| 0,11 | 7. november 2014 | Cowboy Bebop [24] |
| 0,10 | 23. marts 2014 | Blade Runner [25] |
| 0,9 | 25. februar 2014 | Animatrix [26] |
| 0,8 | 27. januar 2014 | n/a [27] |
| 0,7 | 24. december 2013 | n/a [28] |
| 0,6 | 8. december 2013 | udsigt [29] |
Udviklere kalder Vue.js progressive og progressivt tilpasningsdygtige sammenlignet med andre web-frameworks .
Dette giver udvikleren mulighed for at tilpasse strukturen af applikationen i overensstemmelse med deres egne krav. Udviklere finder Vue.js lettere at lære end AngularJS , fordi API'en er bygget meget nemmere at lære. I Vue.js kan kun kendskab til JavaScript og HTML bruges. Det er muligt at bruge Typescript. Vue.js har sin egen officielle, ret rige dokumentation på mange sprog på vuejs.org [30] , der kan tjene som et eksempel på at forklare design og udvikling i browseren. Vue.js implementerer MVVM-mønsteret, Vue.js tilbyder muligheden for at binde Javascript-data, så output og input parres direkte med datakilden. Således er tilstanden til manuelt at definere data (for eksempel via jQuery) fra HTML - DOM ikke nødvendig. Der er ikke behov for yderligere annoteringer, da i Knockout.js er almindelige JavaScript-variabler deklareret i Vue-Element inkluderet som reaktive elementer.
Reaktiv betyder, at visningen i en MVC-model ændres i takt med, at modellen ændres. I Vue binder udviklere blot en visning til den relevante model, og Vue observerer automatisk ændringer af modellen og gengiver visningen. Denne funktion gør styringen af Vue-tilstand ret enkel og intuitiv. [31]
Vue giver forskellige måder at anvende overgangseffekter på, når du indsætter, opdaterer eller sletter DOM. Indeholder følgende værktøjer:
Eksempel på Vue-apps
Enhver applikation med Vue.js har (mindst) én central instans. Et hvilket som helst antal forekomster er muligt for hver HTML-fil. Forekomsten er bundet til HTML-noden ved hjælp af egenskaben el (defineret her med "body" CSS -vælgeren).
Ansøgningsfilen gemmes som *. js .
varvm = new Vue ( { el : "krop" , data : { besked : "Hej verden!" , genstande : [ "det" , "og" , "er" , "Array" ] } });Funktionaliteten af instanser kan udvides med komponenter gemt i en trævisning. Komponenter adskiller sig fra instanser ved, at de ikke er bundet til HTML-noder, men indeholder deres egen HTML-skabelon.
// Komponentdefinition og global registrering vue . komponent ( 'min-komponent' , { skabelon : '<div><div> er en ny komponent < / div>< / div>' }) // Opret en Vue-instans ny Vue ({ el : '#eksempel' })HTML-skabelon til komponenten
<!-- HTML Node --> < div id = "eksempel" > < min-komponent ></ min-komponent > </ div > <!--Using c DOM--> < div id = "eksempel" > < div > Dette er en ny komponent </ div > </ div >Ved at bruge dobbeltkrøllede klammeparenteser (dobbeltkrøllet syntaks), populær i JavaScript - frameworks , kan JavaScript - elementer indsættes i HTML - DOM [32] med elementet bundet i datakilden fra Vue-forekomsten. Databinding (eng. Databinding) er mulig i begge retninger ("Two way databinding") [ 33] , hvilket giver dig mulighed for at ændre data af brugeren. modeldirektivet giver Databinding med input-elementer.
Direktiver v-modeler intet andet end syntaktisk sukker.
HTML - attributter giver dig mulighed for at udføre handlinger såsom iteration over et array , inklusive HTML - noder i DOM kun som ønsket (v-if) , skjule HTML - noder (v-show) , fange hændelser (v-on) eller binde attributter til variabler (v-bind) . Vue.js-direktiver kan genkendes af v- [34] -præfikset . du kan også anvende filtre til at ændre outputtet af JavaScript -elementer [35] . brugerdefinerede direktiver og filtre kan defineres som JavaScript-funktioner.
< ul > < li v-for = "vare i varer" > {{ item }} <!-- Output værdi --> {{ element | små bogstaver }} <!-- Vis værdi med små bogstaver --> </ li > </ ul >Alle instanser og komponenter gennemgår en livscyklus [36] , som består af flere stadier, som du kan bruge til at kalde dine egne funktioner. Især den monterede scene bruges meget, fordi den kaldes umiddelbart efter, at komponenten er inkluderet i DOM . Ved at bruge Vue $next -funktionen kan du definere kode, der ikke kaldes, før komponenten er klar.
ny Vue ({ monteret : funktion () { // kaldes når komponenten er synlig, fx via v-if vue eller en router. konsol . log ( 'Denne komponent er blevet integreret i DOM kl.' + Dato . nu ()); dette . $next (() => konsol . log ( 'Komponenten er nu færdig.' )) }, ødelagt : funktion () { // Kaldes*, når komponenten fjernes fra DOM. removeListener ( XY ); } })Vue.js kan udvides med udvidelser, som kan indeholde Mixins [37] , direktiver, filtre, komponenter og objekter. Vuex [38] , en state manager forbundet til Redux , [39] og Vue router [40] , en komponent router, tilbydes som officielle udvidelser. Sektionen awesome-Vue [41] vedligeholder den nuværende samling af udvidelser. For eksempel er der en udvidelse til at lave HTTP-anmodninger . denne blev dog oprettet som et officielt bibliotek fra Vue.js-Portfolio [42] .
For bedre at kunne tilpasse sig større projekter, der er nemmere at skrive ved hjælp af modularitet , tillader Vue, at komponenter oprettes og gemmes i separate .vue-filer , også kaldet sfc (Single File Component), i stedet for at blive brugt Vue.componenttil at registrere komponenter. Inden for disse modulære filer er individuelle HTML-, CSS- og JavaScript-komponenter organiseret i blokke. [43]
Udviklere kan bruge byggeværktøjerne Webpack eller Browserify til både enkeltfils- og pakkekomponenter.
< skabelon > < p > {{ hilsen }} Fred! </ p > </ skabelon > < script > modul . eksporter = { data : function () { returnere { hilsen : 'Hej' } } } </ script > < style scoped > p { skriftstørrelse : 2 em ; tekst-align : center ; } </ stil >Vue.js eksisterer som en udviklingsversion, vue-next, og en produktions- eller stabil version. [48] Udviklingsversionen giver dig mulighed for at vise information og advarsler, når fejlretningstilstand er aktiveret. Den version, der er beregnet til produktionsbrug, understøtter ikke denne tilstand. [49]
Til udviklingsversionen er der en udvidelse til Google - Chrome [50] og Mozilla Firefox [51] for at gøre det nemmere at fejlfinde applikationen. [52]
| JavaScript | |
|---|---|
| Ideer | |
| Kompilere | |
| Motorer | |
| Biblioteker og rammer | |
| Redaktører | |
| Værktøjer |
|
| Relaterede teknologier | |
| Mennesker | |
| Kategori | |
| ECMAScript | |||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Dialekter |
| ||||||||||||
| Motorer ( sammenligning ) | |||||||||||||
| Rammer , biblioteker |
| ||||||||||||
| Mennesker | |||||||||||||
| Andet |
| ||||||||||||