Come si crea un compenente in Vue.js? Cosa sono i componenti? Oggi lo vediamo con calma. Se apriamo HelloWorld.vue dentro components, possiamo vedere come è fatto un componente Vue.js :).
Struttura di un Componente Vue.js
Template: è la parte html
Script: qui la parte javascript
Css: all’interno troveremo la dicitura scoped, il che significa che quel css avrà valore esclusivamente per questo componente. Quindi il codice css qui all’interno sarà applicato solo in questo componente. Una stessa classe in un altro componente non sarà toccata da questo css.
Come si crea un Componente?
Andiamo a creare un componente che può essere riutilizzato in diversi punti della nostra applicazione. Realizziamo un semplice piccolo contenitore con un titolo e un sottotitolo.
Di nuovo abbiamo le props che sono i parametri che il componente si aspetta in ingresso.
Poi “mettiamo un po’ di css” in modo da creare un elemento.
<template>
<div class=”customCard”>
<p>{{text}}</p>
<span>{{subtitle}}</span>
</div>
</template>
<script>
export default {
name: ‘Card’,
props: [‘text’, ‘subtitle’]
}
</script>
<style scoped>
.customCard{
height: 150px;
width: 150px;
background: blue;
border: solid green;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.customCard p{
font-size: 20;
text-align: center;
}
.customCard span{
font-size: 10px;
text-align: center;
}
</style>
Adesso abbiamo un componente bello pronto da poter riutilizzare quante volte vogliamo, passandogli dati diversi.
Scopri tutti i segreti di Vue.js, impara a padroneggiare questa libreria di grande valore in ambito JavaScript e dai un’occhiata all’unico corso in aula e da remoto Vue.js presente oggi in Italia!
Laravel e Vue.js
Stanno bene insieme le due cose, non a caso noi di LaraMind abbiamo creato un corso che mixa nel modo più logico ed efficace possibile Laravel e Vue.js, un percorso completo che proponiamo sia nelle nostre aule a Milano che da remoto.
Non solo corsi a catalogo, LaraMind è anche e soprattutto corsi custom e tutoraggio one to one sia per privati che aziende, per qualsiasi informazione scrivici a amministrazione@laramind.com
