Qu'est-ce que Vue.js ?
Vue.js vous permet d' étendre HTML avec des attributs HTML appelés directives
Les directives Vue.js offrent des fonctionnalités aux applications HTML
Vue.js fournit des directives intégrées et des directives définies par l'utilisateur
Vue.js Directives
Vue.js utilise des accolades doubles {{ }}comme espaces réservés pour les données.
Les directives Vue.js sont des attributs HTML avec le préfixe v-
Vue Example
Dans l'exemple ci-dessous, un nouvel objet Vue est créé avec new Vue() .
La propriété el: lie le nouvel objet Vue à l'élément HTML avec id="app" .
Exemple
<div id="app">
<h1>{{ message }}</h1>
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
</script>
Vue.js Binding
Lorsqu'un objet Vue est lié à un élément HTML, l'élément HTML change lorsque l'objet Vue change :
Exemple
<div id="app">
{{ message }}
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
function
myFunction() {
myObject.message = "John Doe";
}
</script>
Liaison bidirectionnelle Vue.js
La v-modeldirective lie la valeur des éléments HTML aux données d'application.
C'est ce qu'on appelle la liaison bidirectionnelle :
Exemple
<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>
Liaison de boucle Vue.js
Utilisation de la v-fordirective pour lier un tableau d'objets Vue à un "tableau" d'éléments HTML :
Exemple
<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>