Ripartiamo con le nostre Super Guide di Vue.js, libreria che adoriamo e che riteniamo di grande, grandissima qualità peraltro molto semplice da imparare e con un ecosistema in netta crescita.
Installare Vue.js è facile, oggi con calma e come di consueto vi spieghiamo come fare, mettetevi comodi, iniziamo!
Installazione Vue.js: procedura
Ci sono diverse modalità di installazione per quanto riguarda Vue.js, una più complessa con webpack e npm, e una più semplice: scaricando Vue.js e caricandolo nella nostra index.
Noi di solito facciamo così.
Possiamo quindi andare sul sito di Vue.js e prendere direttamente il CDN, prendiamo la versione di sviluppo, ricordiamoci che c’è la possibilità di avere anche quella di produzione:
<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>
e andiamo a creare una nuova cartella con un solo file index.html a quel punto inseriamo dentro questo script proprio prima della chiusura del tag body.
Vue.js è ora disponibile, possiamo già usarlo con tutte le sue funzionalità!
<div id="app">
<p>{{title}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
title: 'Ciao mondo!'
}
})
</script>
Impostazione Creazione Applicazione con Vue.js post installazione
Impostiamo la creazione di un’applicazione con Vue.js dopo il primo step dedicato all’installazione di Vue.js
- Andiamo ad istanziare Vue.js, in fondo dopo il caricamento della libreria e andiamo a creare un’istanza di Vue. A questo punto gli dovremo dire come prima cosa dove deve agire.
- Nel costruttore gli passiamo un oggetto che come proprietà avrà l’elemento del dom su cui Vue, o meglio questa istanza di Vue, avrà controllo, quindi dove noi vogliamo utilizzarlo. Sopra abbiamo creato appunto un div con id #app.
- Come terzo punto andiamo a mettere dei dati, un semplice e classico ’Ciao mondo’, Vue ha una proprietà “data” che consente di conservare tutti i dati: inseriamo quindi una proprietà title e andiamo a richiamarla sul template tra parentesi graffe
Vue.js è una delle librerie JavaScript oggi più evolute, non conoscerlo è un vero peccato, soprattutto per la sua splendida ed essenziale complementarità con Laravel!
LaraMind è corsi per aziende e per privati, da un’occhiata al nostro catalogo e alle nostre soluzioni custom per privati e aziende.