Articole

Ce este o aplicație cu o singură pagină și ce este Vue.js

Vue.js este un cadru JavaScript progresiv și open source utilizat pentru a dezvolta interfețe interactive de utilizator web și aplicații cu o singură pagină.

Vue.js se concentrează în principal pe partea de vizualizare a aplicației, numită și dezvoltare front-end. Vue.js devine popular pe zi ce trece, deoarece este foarte ușor de integrat cu alte proiecte și biblioteci. Este foarte simplu de instalat și utilizat.

Ce este Vue.js?

Vue.js este un cadru JavaScript progresiv open-source utilizat pentru dezvoltarea interfețelor de utilizator web interactive și a aplicațiilor cu o singură pagină (SPA). Vue.js este denumit în mod obișnuit Vue și pronunțat ca „view.js” sau „view”.

Ce este o aplicație cu o singură pagină (SPA)?

O aplicație cu o singură pagină sau SPA este o aplicație web sau un site web care oferă utilizatorilor o experiență foarte simplă, receptivă și rapidă, similară unei aplicații desktop. O aplicație cu o singură pagină conține un meniu, butoane și blocuri pe o singură pagină. Când un utilizator face clic pe una dintre ele, rescrie în mod dinamic pagina curentă, în loc să încarce pagini întregi noi de pe un server. Acesta este motivul din spatele vitezei sale de răspuns.

Vue este construit practic pentru dezvoltarea frontend, așa că trebuie să gestioneze o mulțime de fișiere HTML, JavaScript și CSS. Vue.js facilitează extinderea HTML-ului cu atribute HTML numite directive. Vue.js oferă directive încorporate și multe directive definite de către utilizator pentru a îmbunătăți funcționalitatea aplicațiilor HTML.

Caracteristicile Vue.js

Mai jos este lista celor mai importante caracteristici ale Vue.js:

COMPONENTI

Componentele Vue.js sunt una dintre caracteristicile importante ale acestui cadru. Sunt folosite pentru a extinde elementele HTML de bază pentru a încapsula cod reutilizabil. Puteți crea elemente personalizate reutilizabile în aplicațiile Vue.js care pot fi reutilizate ulterior în HTML.

Șabloane

Vue.js oferă șabloane bazate pe HTML care pot fi utilizate pentru a asocia DOM-ul redat cu datele instanței Vue. Toate șabloanele Vue sunt HTML valide care pot fi analizate de browsere și analizoare HTML care respectă specificațiile. Vue.js compilează modele în funcțiile de randare Virtual DOM. Vue redă componente în memoria virtuală DOM înainte de a reîmprospăta browserul. Vue poate calcula, de asemenea, numărul minim de componente de redat și să aplice cantitatea minimă de manipulare DOM atunci când se schimbă starea aplicației.

Reactivitate

Vue oferă un sistem de receptivitate care utilizează obiecte JavaScript simple și optimizează redarea. În acest proces, fiecare componentă ține evidența dependențelor sale reactive, astfel încât sistemul știe exact când și ce componente să re-renda.

Rutare

Navigarea în pagină se face cu ajutorul vue-router. Puteți utiliza biblioteca vue-router acceptată oficial pentru aplicația dvs. de o singură pagină.

Tranziții

Vue vă permite să utilizați diferite efecte de tranziție atunci când elementele sunt inserate, actualizate sau eliminate din DOM.

Cum se instalează Vue.js?

Există mai multe metode de a utiliza Vue.js. Îl puteți instala accesând site-ul său oficial sau puteți începe să utilizați fișierul Vue.js și din biblioteca CDN. Să vedem mai jos câteva modalități de a utiliza Vue.js în proiectul tău.

Direct în fișierul HTML

Dacă doriți să utilizați eticheta <script> de Vue.js direct în fișierul HTML, trebuie să îl descărcați de pe site-ul oficial.

<html>  
   <head>  
      <script type = "text/javascript" src = "vue.min.js"></script>  
   </head>  
   <body>
   </body>  
</html>  

Să mergem la site-ul oficial Vue.js https://vuejs.org/v2/guide/installation.html pentru a descărca vue.js în funcție de nevoile dvs.

Folosind CDN

De asemenea, puteți utiliza fișierul Vue.js de la CDN, în aplicația dvs. Utilizați linkul https://unpkg.com/vue@3/dist/vue.global.js în interiorul elementului <script>, ca mai jos:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Beneficiile utilizării Vue.js

Vue.js este una dintre cele mai recente tehnologii software utilizate pe scară largă pentru dezvoltarea web și construirea de aplicații cu o singură pagină (SPA). După cum puteți ghici din nume, este folosit mai ales pentru interfața de utilizare sau partea de afișare a proiectului.

Să vedem beneficiile utilizării Vue.js în proiectul tău:

Dimensiuni molto ridotte

Unul dintre cele mai mari avantaje ale Vue.js este că are dimensiuni foarte mici. Succesul unui cadru JavaScript depinde foarte mult de dimensiunea acestuia, iar acest plugin JavaScript interesant are doar 18-21 KB, așa că îl puteți descărca și utiliza foarte ușor în cel mai scurt timp.

Buletin informativ de inovare
Nu rata cele mai importante știri despre inovație. Înscrieți-vă pentru a le primi pe e-mail.
Ușor de înțeles și de codat

Cadrul Vue.js are o structură foarte simplă și este foarte ușor de înțeles. Este unul dintre motivele popularității acestui cadru. Dacă sunteți familiarizat cu HTML și JavaScript, puteți codifica cu ușurință în Vue.js. Utilizatorii pot adăuga cu ușurință Vue.js la proiectul lor web datorită structurii sale simple și pot dezvolta aplicații.

Integrare simplă cu aplicațiile existente

Vue.js are multe componente pentru orice și poate fi integrat foarte rapid cu aplicațiile existente. Îl poți integra cu orice aplicație scrisă în JavaScript.

Flexibil prin natura sa

Natura flexibilă a Vue.js facilitează, de asemenea, înțelegerea de către dezvoltatorii de React.js, Angular.js și orice alte cadre JavaScript noi. Oferă multă flexibilitate în utilizarea nodurilor virtuale pentru a scrie fișiere HTML, fișiere JavaScript și fișiere JavaScript pur.

COMPONENTI

Puteți crea elemente personalizate care sunt reutilizabile în aplicațiile Vue.js.

Documentație simplă, completă și detaliată

Vue.js oferă o documentație foarte simplă, completă și detaliată, astfel încât dezvoltatorii care nu au nicio idee despre HTML și JavaScript o pot folosi pentru a programa.

DOM virtual

Vue.js folosește DOM virtual similar cu alte cadre existente precum ReactJS, Ember etc. DOM-ul virtual este o reprezentare ușoară în arbore în memorie a DOM-ului HTML original și este actualizat fără a afecta DOM-ul inițial.

Comunicare bidirecțională

Vue.js oferă comunicare bidirecțională cu arhitectura sa Model View View Model (MVVM) care simplifică gestionarea blocurilor HTML.

Redare declarativă Vue.js

Cadrul vine cu un sistem care ne permite să redăm datele în mod declarativ către DOM folosind sintaxa modelului simplă și directă.

Iată un exemplu:

<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>

Cadrul Vue.js ne permite definire atributele HTML numite directive, care sunt folosite pentru a oferi funcționalitate aplicațiilor HTML.

Există două tipuri de directive în Vue.js:

  • directive integrate e
  • directive definitate de utilizator.

Vue.js folosește acolade duble {{}} ca substituenți pentru date, iar directivele Vue.js sunt atribute HTML care folosesc un prefix v.

O aplicație Vue se conectează la un singur element DOM și îl controlează pe deplin. În exemplul de mai sus, este #app.

Cu Vue putem considera HTML-ul ca punct de intrare și totul se întâmplă în interiorul instanței Vue create.
Să vedem un exemplu în care încercăm legarea de elemente și atribute:

<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>  

În acest caz, noul atribut v-bind este directiva. Directivele sunt folosite cu un prefix v- pentru a indica faptul că sunt atribute unice furnizate de Vue și sunt folosite pentru a aplica un comportament special de răspuns DOM-ului redat.

Rezultatul exemplului este următorul

Ercole Palmeri

Buletin informativ de inovare
Nu rata cele mai importante știri despre inovație. Înscrieți-vă pentru a le primi pe e-mail.

Articole recente

Smart Lock Market: raport de cercetare de piață publicat

Termenul Smart Lock Market se referă la industria și ecosistemul din jurul producției, distribuției și utilizării...

27 martie 2024

Ce sunt modelele de design: de ce să le folosiți, clasificare, argumente pro și contra

În ingineria software, modelele de proiectare sunt soluții optime la problemele care apar de obicei în proiectarea software. Sunt ca…

26 martie 2024

Evoluția tehnologică a marcajului industrial

Marcarea industrială este un termen larg care cuprinde mai multe tehnici utilizate pentru a crea semne permanente pe suprafața unui...

25 martie 2024

Exemple de macrocomenzi Excel scrise cu VBA

Următoarele exemple simple de macrocomandă Excel au fost scrise folosind VBA Timp de citire estimat: 3 minute Exemplu...

25 martie 2024