Vue.js

Vue.js software
Tip	Cadrul pentru aplicații web
Dezvoltator	Evan Tu
Data primei versiuni	2014
Ultima versiune	2.6.10 (20 martie 2019 [1] )
Sistem de operare	Multiplatform
Limba	TypeScript JavaScript
Licență	Licență MIT ( Licență gratuită )
Site-ul web	vuejs.org/
Editați datele pe Wikidata · Manual

Vue.js ( de obicei cunoscut sub numele de Vue, pronunțat / vju / ca-view) este un cadru JavaScript open-source de configurare Model-View-viewmodel pentru crearea de interfețe de utilizator și s Ingle pagina de aplicare s. A fost creat de Evan You și este administrat de el însuși și de membrii activi ai echipei de bază din diverse companii, cum ar fi Netlify și Netguru ^[2] .

Prezentare generală

Vue.js prezintă o arhitectură adoptabilă în mod incremental, care se concentrează pe redarea declarativă și compoziția componentelor. Funcționalitatea avansată necesară pentru aplicații complexe, cum ar fi rutarea, gestionarea stării și instrumentele de construcție, sunt oferite prin biblioteci ^[3] întreținute oficial și pachete de asistență, inclusiv Nuxt.js printre cele mai populare soluții.

Istorie

Vue a fost creat de Evan You, după ce a lucrat pentru Google folosind AngularJS în numeroase proiecte. El a propus un rezumat al procesului său de gândire în urma experienței sale: „M-am gândit, dacă aș putea să scot partea care mi-a plăcut cu adevărat despre Angular și să construiesc ceva cu adevărat ușor?”. ^[4] Prima confirmare a codului sursă al proiectului este datată iulie 2013, în timp ce a fost publicată oficial în februarie următoare, în 2014.

Versiuni

Caracteristici

Componente

Componentele Vue extind elementele HTML de bază pentru a încapsula codul reutilizabil. În general vorbind, componentele sunt elemente personalizate pe care compilatorul Vue le asociază cu funcționalitatea. În Vue, o componentă este în esență o instanță a Vue cu opțiuni predefinite. ^[5]

Următorul fragment de cod conține un exemplu de componentă Vue. Componenta are un buton și imprimă de câte ori se face clic pe buton:

 < div id = "tuto" >
	< v-bind cu clic pe buton : initial-count = "0" > </ cu clic pe buton >
</ div >

< script >
Vue . componentă ( „clic pe buton” , {
  recuzită : [ "initialCount" ],
  data : () => ({
    număr : 0 ,
  }),
  template : `<button v-on: click =" onClick "> S-a făcut clic pe <nowiki> {{count}} </nowiki> ori </button>` ,
  calculat : {
    countTimesTwo () {
      returnează asta . număr * 2 ;
    }
  },
  ceas : {
    count ( newValue , oldValue ) {
      consolă . log ( `Valoarea numărării este modificată din $ { oldValue } în $ { newValue } .` );
    }
  },
  metode : {
    onClick () {
        aceasta . număr + = 1 ;
    }
  },
  montat () {
    aceasta . count = aceasta . initialCount ;
  }
});

Vue nouă ({
  el : '#tuto' ,
});
</ script >

Modele

Vue utilizează sintaxa modelului bazată pe HTML care vă permite să legați DOM-ul redat la datele instanței Vue care stau la baza. Toate șabloanele Vue sunt HTML valabile, care pot fi analizate de analizori HTML care respectă specificațiile browserului și ale specificațiilor. Vue compilează modelele în funcții de redare virtuală DOM. Un model de obiect de document virtual (sau „DOM”) permite Vue să redea componentele din memorie înainte de actualizarea browserului. Combinat cu sistemul de reacție, Vue este capabil să calculeze numărul minim de componente pentru redare și să aplice cantitatea minimă de manipulări DOM atunci când starea aplicației se schimbă.

Utilizatorii Vue pot folosi sintaxa modelului sau pot alege să scrie funcții de redare direct folosind JSX . ^[6] Funcțiile de redare vă permit să compilați aplicația din componente software. ^[7]

Reactivitate

Vue oferă un sistem receptiv care utilizează obiecte JavaScript simple și redare optimizată. Fiecare componentă ține evidența dependențelor sale responsive în timpul redării, astfel încât sistemul să știe exact când trebuie redefinită și pe ce componente. ^[8]

Tranziții

Vue oferă o varietate de moduri de a aplica efecte de tranziție atunci când elementele sunt inserate, actualizate sau eliminate din DOM . Aceasta include instrumente pentru:

• Aplicați automat clase pentru tranziții și animații CSS ;
• Integrați biblioteci de animație CSS terță parte, cum ar fi Animate.css;
• Utilizați JavaScript pentru a manipula direct DOM în timpul cârligelor de tranziție;
• Integrați biblioteci de animație JavaScript terță parte, cum ar fi Velocity.js.

Când un element înfășurat într-o componentă de tranziție este inserat sau eliminat, acest lucru se întâmplă:

1. Vue va detecta automat dacă au fost aplicate tranziții CSS sau animații elementului țintă. În acest caz, clasele de tranziție CSS vor fi adăugate / eliminate în timpul corespunzător.
2. Dacă componenta de tranziție a furnizat cârlige JavaScript, aceste cârlige vor fi apelate la momente adecvate.
3. Dacă nu sunt detectate tranziții / animații CSS și nu sunt furnizate cârlige JavaScript, operațiile DOM pentru inserare și / sau eliminare vor fi efectuate imediat pe următorul cadru. ^{[9] [10]}

Rutare

Un dezavantaj tipic al aplicațiilor cu o singură pagină (SPA-uri) este imposibilitatea de a partaja linkuri către pagina „sub” exactă într-o anumită pagină web. Deoarece SPA-urile oferă utilizatorilor lor doar un răspuns bazat pe URL de la server (de obicei servește index.html sau index.vue), adăugarea de marcaje pe anumite ecrane sau partajarea de linkuri către secțiuni specifice este în mod normal dificil, dacă nu imposibil. Pentru a rezolva această problemă, multe routere de pe partea clientului își delimitează adresele URL dinamice cu un „hashbang” (#!), De exemplu page.com/#!/ . Cu toate acestea, cu HTML5 majoritatea browserelor moderne acceptă rutare fără hashbang.

Vue oferă o interfață pentru a modifica ceea ce este afișat pe pagină pe baza căii URL curente, indiferent de modul în care a fost modificată (prin link prin e-mail, actualizare sau linkuri în pagină). În plus, utilizarea unui router frontal permite tranziția intenționată a căii browserului atunci când anumite evenimente ale browserului (cum ar fi clicurile) apar pe butoane sau linkuri. Vue în sine nu vine cu rutare hash front-end, dar pachetul open source „vue-router” oferă un API pentru actualizarea adresei URL a aplicației, acceptă resetarea butonului înapoi (istoricul de navigare) și a parolelor, precum și linkuri de verificare a e-mailului sau a e-mailului cu parametri URL de autentificare. Suportă maparea căilor către componentele imbricate și oferă controlul tranziției cu granulație fină. Cu Vue, dezvoltatorii compun aplicații cu blocuri mici construind componente mai mari. Cu vue-router adăugat la combinație, componentele trebuie pur și simplu mapate la rutele de care aparțin și rutele părinte / rădăcină trebuie să indice unde trebuie redate elementele copil. ^[11]

 < div id = "app" >
  < router-view > </ router-view >
</ div >
...

< script >
...
const Utilizator = {
  șablon : '<div> Utilizator <nowiki> {{$ route.params.id}} </nowiki> </div>'
}

const router = nou VueRouter ({
  trasee : [
    { cale : '/ utilizator /: id' , componentă : Utilizator }
  ]
})
...
</ script >

Codul de mai sus:

1. Setați o cale front-end pentru numele site-ului .com/user/<id> , care va fi afișat în componenta User definită în (const User ...)
2. Permite componentei Utilizator să treacă un anumit ID de utilizator care a fost tastat în URL folosind cheia params a obiectului $ route: $route.params.id
3. Acest model (care variază în funcție de parametrii trecuți în router) va fi redat în <router-view></router-view> în aplicația div # din DOM
4. Codul HTML generat la final pentru cineva care tastează: nomesito.com/user/1 va fi:

 < div id = "app" >
  < div >
    < div > Utilizator 1 </ div >
  </ div >
</ div >

^[12]

Ecosistem

Biblioteca de bază include instrumente și biblioteci dezvoltate atât de echipa de bază, cât și de colaboratori.

Unelte oficiale

• Devtools - extensie de browser devtools pentru depanarea aplicațiilor Vue.js
• Vue CLI - instrument standard pentru dezvoltarea rapidă a Vue.js
• Vue Loader - încărcător webpack care permite scrierea componentelor Vue într-un format numit Componente cu un singur fișier (SFC)

Bibliotecile oficiale

• Vue Router - routerul oficial al Vue.js
• Vuex - Manager de stat centralizat inspirat de Flux pentru Vue.js
• Vue Server Renderer - redare pe partea de server pentru Vue.js

Notă

Elemente conexe

• ReactJS
• AngularJS
• Unghiular
• Model-Vizualizare-vizualizare model
• JavaScript

linkuri externe

• ( RO ) Site oficial , pe vuejs.org .
• ( EN ) Vue.js , pe GitHub .
• Depozitul sursă Vue.js , la github.com .

Free Software Portal : accesați intrările Wikipedia care se ocupă de software gratuit