Cos'è Vue.js?
Vue.js ti consente di estendere HTML con attributi HTML chiamati direttive
Le direttive Vue.js offrono funzionalità alle applicazioni HTML
Vue.js fornisce direttive integrate e direttive definite dall'utente
Direttive Vue.js
Vue.js usa le parentesi doppie {{ }}come segnaposto per i dati.
Le direttive Vue.js sono attributi HTML con il prefissov-
Esempio di visualizzazione
Nell'esempio seguente, viene creato un nuovo oggetto Vue con new Vue() .
La proprietà el: associa il nuovo oggetto Vue all'elemento HTML con id="app" .
Esempio
<div id="app">
<h1>{{ message }}</h1>
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
</script>
Legatura Vue.js
Quando un oggetto Vue è associato a un elemento HTML, l'elemento HTML cambierà quando l'oggetto Vue cambia:
Esempio
<div id="app">
{{ message }}
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
function
myFunction() {
myObject.message = "John Doe";
}
</script>
Rilegatura bidirezionale Vue.js
La v-modeldirettiva associa il valore degli elementi HTML ai dati dell'applicazione.
Questo è chiamato legame a due vie:
Esempio
<div id="app">
<p>{{ message }}</p>
<p><input v-model="message"></p>
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
</script>
Rilegatura ad anello Vue.js
Utilizzo della v-fordirettiva per associare un array di oggetti Vue a un "array" di elementi HTML:
Esempio
<div id="app">
<ul>
<li v-for="x in todos">
{{
x.text }}
</li>
</ul>
</div>
<script>
myObject =
new Vue({
el: '#app',
data: {
todos: [
{ text: 'Learn
JavaScript' },
{ text: 'Learn
Vue.js' },
{ text: 'Build
Something Awesome' }
]
}
})
</script>