Vue.componenti JS

Vue.JS è un framework JavaScript progressivo, che viene utilizzato per creare UI (interfacce utente) e SPA (applicazioni a pagina singola). Possiamo iniziare a creare applicazioni Web in VUE.JS con la conoscenza di base di HTML, CSS e JavaScript. Vue.JS è costruito combinando le migliori caratteristiche di framework angolari e react già esistenti. Gli sviluppatori adorano codificare e sentire la libertà e il comfort durante la costruzione di applicazioni in VUE.js.

Questo approccio basato sui componenti è stato sostanzialmente ispirato e scelto dai reactjs. Scriviamo il codice sotto forma di componenti in modo da poter importare quel componente e riutilizzarlo ovunque ne abbia bisogno. Vue.JS offre un componente a file singolo, che lo rende un codice liberamente accoppiato e riutilizzabile.

Vue.JS offre il miglior approccio basato sui componenti, come tutto ciò che uno sviluppatore ha bisogno; Può trovarlo in un singolo .file vue. Gli sviluppatori si sentono così a proprio agio e a proprio 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 fondamentale di un componente Vue. In cui possiamo vedere che il codice è diviso in tre livelli. Questa sintassi a tre strati è la parte migliore di Vue.js. Soddisfa la separazione della preoccupazione, ma essere in un unico .file vue. Abbiamo il nostro modello (HTML), la logica in JavaScript e lo styling all'interno di un componente.

• Modello
• Sceneggiatura
• Stile

Modello

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

Sceneggiatura

Questa è la sezione in cui possiamo scrivere la logica del componente in JavaScript seguendo le 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
• Metodi/funzioni
• Ganci per ciclo di vita
• Proprietà e osservatori calcolati
• E così via…

Stile

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

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

Importa e usa i componenti

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

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