Per Iniziare

Iniziamo con un piccolo e veloce tour di come funziona il binding dei dati.
Se sei più interessato a capire come funziona il tutto da una prospettiva più ampia leggi questo post.

Il modo più facile di provare Vue.js è di utilizzare l’esempio su JSFiddle.
Sentiti libero di aprilo in un’altra tab e di seguire l’esempio assieme a questa documentazione, se invece preferisci installare Vue.js consulta la pagina Installazione.

Ciao Mondo!

<div id="app">
{{ message }}
</div>
new Vue({
el: '#app',
data: {
message: 'Ciao Vue.js!'
}
})
{{ message }}

Two Way Binding

<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
new Vue({
el: '#app',
data: {
message: 'Ciao Vue.js!'
}
})

{{ message }}

Rappresentare una Lista

<div id="app">
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
</div>
new Vue({
el: '#app',
data: {
todos: [
{ text: 'Impara JavaScript' },
{ text: 'Impara Vue.js' },
{ text: 'Costruisci qualcosa di interessante' }
]
}
})
  • {{ todo.text }}

Gestire gli Input

<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Capovolgi il Messaggio</button>
</div>
new Vue({
el: '#app',
data: {
message: 'Ciao Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})

{{ message }}

Ora Tutto Assieme

<div id="app">
<input v-model="newTodo" v-on:keyup.enter="addTodo">
<ul>
<li v-for="todo in todos">
<span>{{ todo.text }}</span>
<button v-on:click="removeTodo($index)">X</button>
</li>
</ul>
</div>
new Vue({
el: '#app',
data: {
newTodo: '',
todos: [
{ text: 'Aggiungi qualche compito' }
]
},
methods: {
addTodo: function () {
var text = this.newTodo.trim()
if (text) {
this.todos.push({ text: text })
this.newTodo = ''
}
},
removeTodo: function (index) {
this.todos.splice(index, 1)
}
}
})
  • {{ todo.text }}

Speriamo che questa introduzione di base vi abbia dato un’idea di come Vue.js lavori.
Siamo sicuri che avrete molte domande ora, continuate a leggere questa guida perché vi risponderemo a tutto.