Vue.js | |
---|---|
Tip de | bibliotecă de funcții , cadru JavaScript și cadru web |
Autor | Evan Yu |
Scris in | JavaScript [3] și TypeScript |
Prima editie | februarie 2014 [1] |
ultima versiune | 3.2.37 [2] ( 6 iunie 2022 ) |
Licență | Licență MIT |
Site-ul web | vuejs.org _ |
Fișiere media la Wikimedia Commons |
Vue.js (de asemenea, Vue ; / v j uː / ) este un cadru JavaScript open source pentru construirea de interfețe cu utilizatorul [4] . Se integrează cu ușurință în proiecte folosind alte biblioteci JavaScript . Poate funcționa ca un cadru web pentru dezvoltarea aplicațiilor cu o singură pagină într-un stil reactiv .
În prezent, susținut de creatorul Evan Yu și de alți membri activi ai echipei de bază din diverse companii, cum ar fi Netlify , Netguru , Baidu , Livestorm [5] .
Un sondaj din 2016 pentru JavaScript a constatat că Vue are 89% satisfacție a dezvoltatorilor [6] . Proiectul are 188.000 de stele pe GitHub [7] , este al treilea cel mai mare proiect din istoria GitHub .
În 2013, angajatul Google Evan You , care lucrează la unul dintre proiecte, a ajuns la concluzia că nu există soluții gata făcute pentru prototiparea rapidă a interfețelor cu utilizatorul aplicațiilor web complexe: React era atunci într-un stadiu incipient de dezvoltare, principalele instrumente. au fost cadre atât de complexe precum AngularJS sau Backbone.js orientat spre MVC , care nu erau simple și se concentrau pe dezvoltarea de aplicații mari. Pentru a reduce acest decalaj, Yu a început să dezvolte Vue.js, care, menținându-și simplitatea, s-a dovedit a fi potrivit nu numai pentru prototipare, ci și pentru dezvoltarea cu drepturi depline [8] .
În octombrie 2015 a fost lansată versiunea 1.0 a bibliotecii, în septembrie 2016, versiunea 2.0.
Începând cu versiunea 2.0, acesta acceptă și randarea pe partea serverului, alias SSR (Rarea pe partea serverului) [9] .
Pe 18 septembrie 2020, Vue.js 3.0.0 „One Piece” a fost lansat, potrivit dezvoltatorilor, „oferă performanțe îmbunătățite, pachete mai mici, o mai bună integrare TypeScript, noi API-uri pentru rezolvarea problemelor la scară largă și o bază solidă pentru iterații viitoare ale cadrului pe termen lung.perspectivă” [10] .
Versiunea 3.0 a încorporat peste 2 ani de efort de dezvoltare, inclusiv peste 30 de RFC-uri, peste 2600 de comiteri, 628 de solicitări de la 99 de dezvoltatori, plus o cantitate imensă de muncă de dezvoltare și documentație. Tot codul a fost rescris într-un TypeScript mai eficient, ceea ce oferă avantaje în dezvoltarea agilă.
De asemenea, este introdus un nou set de Composition API-uri [11] .
versiune | Data de lansare | Titlu |
---|---|---|
3.2 | 5 august 2021 | Cvintupleții prin excelență [12] |
3.1 | 7 iunie 2021 | Pluto [13] |
3.0 | 18 septembrie 2020 | One Piece [14] |
2.6 | 4 februarie 2019 | Macross [15] |
2.5 | 13 octombrie 2017 | Nivel E [16] |
2.4 | 13 iulie 2017 | Kill la Kill [17] |
2.3 | 27 aprilie 2017 | Aventura bizare a lui JoJo [18] |
2.2 | 26 februarie 2017 | D inițial [19] |
2.1 | 22 noiembrie 2016 | Hunter X Hunter [20] |
2.0 | 30 septembrie 2016 | Ghost in the Shell [21] |
1.0 | 27 octombrie 2015 | Evangelion [22] |
0,12 | 12 iunie 2015 | Dragon Ball [23] |
0,11 | 7 noiembrie 2014 | Cowboy Bebop [24] |
0,10 | 23 martie 2014 | Blade Runner [25] |
0,9 | 25 februarie 2014 | Animatrix [26] |
0,8 | 27 ianuarie 2014 | n/a [27] |
0,7 | 24 decembrie 2013 | n/a [28] |
0,6 | 8 decembrie 2013 | vuejs [29] |
Dezvoltatorii numesc Vue.js progresiv și adaptabil progresiv în comparație cu alte cadre web .
Acest lucru permite dezvoltatorului să personalizeze structura aplicației în funcție de propriile cerințe. Dezvoltatorii consideră Vue.js mai ușor de învățat decât AngularJS , deoarece API-ul este construit mult mai ușor de învățat. În Vue.js, numai cunoștințele despre JavaScript și HTML pot fi utilizate. Este posibil să utilizați Typescript. Vue.js are propria sa documentație oficială, destul de bogată, în multe limbi, la vuejs.org [30] , care poate servi ca exemplu în explicarea designului și dezvoltării în browser. Vue.js implementează modelul MVVM, Vue.js oferă posibilitatea de a lega date Javascript, astfel încât ieșirea și intrarea să fie asociate direct cu sursa de date. Astfel, modul de definire manuală a datelor (de exemplu, prin jQuery) din HTML - DOM nu este necesar. Nu este nevoie de adnotări suplimentare, deoarece în Knockout.js , variabilele JavaScript obișnuite declarate în Vue-Element sunt incluse ca elemente reactive .
Reactiv înseamnă că vizualizarea într-un model MVC se schimbă pe măsură ce modelul se schimbă. În Vue, dezvoltatorii leagă pur și simplu o vizualizare la modelul corespunzător, iar Vue observă automat modificările aduse modelului și redă din nou vizualizarea. Această caracteristică face gestionarea stării Vue destul de simplă și intuitivă. [31]
Vue oferă diverse modalități de a aplica efecte de tranziție la inserarea, actualizarea sau ștergerea DOM-ului. Include următoarele instrumente:
Exemple de aplicații Vue
Orice aplicație cu Vue.js are (cel puțin) o instanță centrală. Orice număr de instanțe este posibil pentru fiecare fișier HTML. Instanța este legată de nodul HTML folosind proprietatea el (definită aici cu selectorul CSS „body” ).
Fișierul aplicației este salvat ca *. js .
varvm = noua Vue ( { el : „corp” , date : { mesaj : „Bună lume!” , articole : [ "aceasta" , „și” , "este" , „Matrice” ] } });Funcționalitatea instanțelor poate fi extinsă cu componente stocate într-o vizualizare arborescentă. Componentele diferă de instanțe prin faptul că nu sunt legate de noduri HTML, ci conțin propriul șablon HTML.
// Definirea componentelor și înregistrarea globală vedere . component ( 'componenta mea' , { șablon : „<div><div> este o componentă nouă</div></div>” }) // Creați o instanță Vue noua Vue ({ el : '#exemplu' })Șablon HTML pentru componentă
<!-- Nodul HTML --> < div id = "exemplu" > < my-component ></ my-component > </ div > <!--Utilizarea c DOM--> < div id = "exemplu" > < div > Aceasta este o componentă nouă </ div > </ div >Folosind acolade duble (sintaxă dublu), populare în cadrele JavaScript , elementele JavaScript pot fi inserate în HTML - DOM [32] , cu elementul legat în sursa de date din instanța Vue. Legarea datelor (ing. Databinding) este posibilă în ambele direcții („Two way databinding”) [33] , ceea ce vă permite să modificați datele de către utilizator. directiva de model oferă legare de date cu elemente de intrare.
Directivele v-modelnu sunt altceva decât zahăr sintactic.
Atributele HTML vă permit să efectuați acțiuni cum ar fi iterarea peste o matrice , inclusiv nodurile HTML din DOM numai după cum doriți (v-if) , ascunderea nodurilor HTML (v-show) , capturarea evenimentelor (v-on) sau legarea de atribute la variabile (v-bind) . Directivele Vue.js sunt recunoscute după prefixul v - [34] . de asemenea, puteți aplica filtre pentru a modifica rezultatul elementelor JavaScript [35] . directivele și filtrele personalizate pot fi definite ca funcții JavaScript.
< ul > < li v-for = „articol în articole” > {{ item }} <!-- Valoare de ieșire --> {{ articol | minuscule }} <!-- Afișează valoarea în minuscule --> </ li > </ ul >Toate instanțele și componentele trec printr-un ciclu de viață [36] , care constă din mai multe etape pe care le puteți folosi pentru a vă apela propriile funcții. În special, scena montată este folosită foarte mult deoarece este apelată imediat după ce componenta a fost inclusă în DOM . Folosind funcția Vue $next , puteți defini codul care nu este apelat până când componenta este gata.
noua Vue ({ montat : function () { // apelat când componenta este vizibilă, de exemplu prin v-if vue sau un router. consola . log ( 'Această componentă a fost integrată în DOM la' + Data . acum ()); aceasta . $next (() => console . log ( 'Componenta este acum completă.' )) }, distrus : function () { //Apelat* când componenta este eliminată din DOM. removeListener ( XY ); } })Vue.js poate fi extins cu extensii, care pot conține Mixins [37] , directive, filtre, componente și obiecte. Vuex [38] , un manager de stat conectat la Redux , [39] și Vue router [40] , un router component, sunt oferite ca extensii oficiale. Secțiunea awesome-Vue [41] menține colecția actuală de extensii. De exemplu, există o extensie pentru efectuarea solicitărilor HTTP . cu toate acestea, aceasta a fost creată ca bibliotecă oficială din Vue.js-Portfolio [42] .
Pentru a se adapta mai bine la proiecte mai mari, care sunt mai ușor de scris folosind modularitatea , Vue permite crearea și salvarea componentelor în fișiere .vue separate , numite și sfc (componentă de fișier unic), în loc să fie folosite Vue.componentpentru a înregistra componente. În cadrul acestor fișiere modulare, componentele individuale HTML, CSS și JavaScript sunt organizate în blocuri. [43]
Dezvoltatorii pot folosi instrumentele de compilare Webpack sau Browserify atât pentru componentele cu fișier unic, cât și pentru componentele de ambalare.
< șablon > < p > {{ salut }} Pace! </ p > </ șablon > < script > modul . exporturi = { date : function () { întoarce { salut : „Bună ziua” } } } </ script > < style scoped > p { dimensiunea fontului : 2 em ; text-align : centru ; } </ stil >Vue.js există ca o versiune de dezvoltare, vue-next și o versiune de producție sau stabilă. [48] Versiunea de dezvoltare vă permite să afișați informații și avertismente atunci când modul de depanare este activat. Versiunea destinată utilizării în producție nu acceptă acest mod. [49]
Pentru versiunea de dezvoltare, există o extensie pentru Google - Chrome [50] și Mozilla Firefox [51] pentru a facilita depanarea aplicației. [52]
JavaScript | |
---|---|
Idei | |
Compilatoare | |
Motoare | |
Biblioteci și cadre | |
Editori | |
Instrumente |
|
Tehnologii înrudite | |
oameni | |
Categorie |
ECMAScript | |||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Dialectele | |||||||||||||
Motoare ( comparație ) | |||||||||||||
Cadre , biblioteci |
| ||||||||||||
oameni | |||||||||||||
Alte |
|