Vue.js componenti

Vue.js è un framework javascript progressivo, che viene utilizzato per creare interfacce utente (interfacce utente) e SPA (applicazioni a pagina singola). Possiamo iniziare a creare applicazioni web in Vue.js con le conoscenze di base di HTML, CSS e Javascript. Vue.js è costruito combinando le migliori funzionalità di Angular e React Framework già esistenti. Gli sviluppatori amano programmare e sentirsi liberi e a proprio agio durante la creazione di applicazioni in Vue.js.

Questo approccio basato sui componenti è stato fondamentalmente ispirato e raccolto da ReactJS. Scriviamo codice sotto forma di componenti in modo da poter importare quel componente e riutilizzarlo ovunque ne abbiamo bisogno. Vue.js offre un componente a file singolo, che lo rende un codice debolmente accoppiato e riutilizzabile.

Vue.js offre il miglior approccio basato su componenti, come qualsiasi cosa di cui uno sviluppatore abbia bisogno; lo può trovare in un singolo .file vue. Gli sviluppatori si sentono così a loro agio quando non devono preoccuparsi o prendersi cura della struttura extra di un componente.

In questo articolo, daremo un'occhiata al componente a file singolo, che ha un .estensione vue. Quindi, diamo un'occhiata a un esempio di componente Vue molto semplice e capiamolo.

Questo è un esempio molto semplice e di base di un componente Vue. In cui possiamo vedere che il codice è diviso in tre strati. Questa sintassi a tre livelli è la parte migliore di Vue.js. Soddisfa la separazione delle preoccupazioni pur essendo in un unico .file vue. Abbiamo il nostro modello (HTML), la logica in Javascript e lo stile all'interno di un componente.

• Modello
• sceneggiatura
• Stile

Modello

In questo tag modello, scriviamo il nostro codice HTML. Possiamo legare le variabili anche in questo usando Vue.js sintassi di associazione dati e possiamo aggiungere alcune altre funzionalità anche in questo usando Vue.js ha fornito la sintassi per le rispettive funzionalità.

sceneggiatura

Questa è la sezione dove possiamo scrivere la logica del componente in javascript seguendo la sintassi di Vue.js. Tutte le funzionalità e la logica di un componente vanno qui. Per esempio,

• Importazione di altri componenti e pacchetti necessari.
• Dichiarazione variabile Vari
• Metodi/Funzioni
• Ganci del ciclo di vita
• Proprietà calcolate e osservatori
• E così via…

Stile

Qui è dove scriviamo lo stile in CSS del componente, oppure possiamo usare qualsiasi preprocessore che vogliamo usare.

Questo è solo un assaggio di un componente in Vue.js. Diamo un'occhiata un po' all'utilizzo, all'organizzazione e al flusso di dati tra i componenti.

Importa e usa componenti

Per utilizzare il componente, dobbiamo prima importare il componente. Altrimenti, come può Vue.js lo sa? Possiamo semplicemente importare un componente aggiungendo un'istruzione "Import" all'inizio del tag script e dichiarando quel componente nell'oggetto "components", utilizzando la seguente sintassi.

Dopo aver importato con successo il componente, possiamo usarlo nel modello in questo modo