Vue.js Componente

Vue.js este un cadru javascript progresiv, care este utilizat pentru a construi interfețe UI (interfețe utilizator) și SPA-uri (aplicații cu o singură pagină). Putem începe să construim aplicații web în Vue.js cu cunoștințe de bază despre HTML, CSS și Javascript. Vue.js este construit prin combinarea celor mai bune caracteristici din cadrele Angular și React deja existente. Dezvoltatorii adoră codificarea și simt libertatea și confortul în timp ce construiesc aplicații în Vue.js.

Această abordare bazată pe componente a fost practic inspirată și selectată din ReactJS. Scriem cod sub formă de componente, astfel încât să putem importa componenta respectivă și să o refolosim oriunde avem nevoie de ea. Vue.js oferă o componentă cu un singur fișier, ceea ce îl face un cod cuplat ușor și reutilizabil.

Vue.js oferă cea mai bună abordare bazată pe componente, precum orice are nevoie un dezvoltator; îl poate găsi într-un singur .fișier vue. Dezvoltatorii se simt atât de confortabili și de confortabili atunci când nu trebuie să se îngrijoreze sau să aibă grijă de structura suplimentară a unei componente.

În acest articol, vom arunca o privire asupra componentei cu un singur fișier, care are un .extindere vue. Deci, să aruncăm o privire la un exemplu de componentă Vue foarte simplu și să-l înțelegem.

Acesta este un exemplu foarte simplu și de bază al unei componente Vue. În care putem vedea că codul este împărțit în trei straturi. Această sintaxă cu trei straturi este cea mai bună parte a Vue.js. Acesta satisface separarea îngrijorării totuși fiind într-un singur .fișier vue. Avem șablonul nostru (HTML), logica în Javascript și stilul în interiorul unei componente.

• Șablon
• Script
• Stil

Șablon

În această etichetă șablon, scriem codul nostru HTML. Putem lega variabile și în acest lucru folosind Vue.js de legare a datelor și putem adăuga și alte funcționalități folosind Vue.js a furnizat sintaxă pentru funcționalitățile respective.

Script

Aceasta este secțiunea în care putem scrie logica componentei în javascript urmând sintaxele Vue.js. Toate funcționalitățile și logica unei componente merg aici. De exemplu,

• Importul altor componente și pachete necesare.
• Declarație variabilă
• Metode / Funcții
• Cârligele ciclului de viață
• Proprietăți computerizate și observatoare
• Și așa mai departe…

Stil

Aici scriem stilul în CSS al componentei sau putem folosi orice preprocesator pe care dorim să îl folosim.

Aceasta este doar o privire asupra unei componente din Vue.js. Să aruncăm o privire asupra utilizării, organizării și fluxului de date între componente.

Importați și utilizați componente

Pentru a utiliza componenta, trebuie mai întâi să importăm componenta. În caz contrar, cum poate Vue.știu despre asta? Putem pur și simplu să importăm o componentă adăugând o declarație „Import” la începutul etichetei de script și declarând acea componentă în obiectul „componente”, utilizând următoarea sintaxă.

După importarea cu succes a componentei, o putem folosi în șablon astfel