Vue.js
<span>Message: {{ msg }}</span>
<span v-once>Ceci ne changera jamais : {{ msg }}</span>
<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
Les moustaches ne peuvent pas être utilisées à l’intérieur des attributs HTML, à la place utilisez une directive v-bind.
<div v-bind:id="dynamicId"></div>
Si isButtonDisabled a la valeur null, undefined, ou false, l’attribut disabled ne sera pas inclus dans l’élément <button> généré.
<button v-bind:disabled="isButtonDisabled">Button</button>
{{ number + 1 }}
{{ ok ? 'OUI' : 'NON' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
Les directives sont des attributs spéciaux avec le préfixe v-. Les valeurs attendues pour les attributs de directives sont une unique expression JavaScript. Le travail d’une directive est d’appliquer réactivement des effets secondaires au DOM quand la valeur de son expression change.
<p v-if="seen">Maintenant vous me voyez</p>
Certaines directives peuvent prendre un “argument”, indiqué par un deux-points après le nom de la directive. Par exemple, la directive v-bind est utilisée pour mettre à jour réactivement un attribut HTML
Ici href est un argument, qui dit à la directive v-bind de lier l’attribut href de l’élément à la valeur de l’expression url.
<a v-bind:href="url"> ... </a>
la directive v-on, qui écoute les évènements du DOM
Ici l’argument est le nom de l’évènement à écouter.
<a v-on:click="doSomething"> ... </a>
Ici attributeName va dynamiquement être évalué comme une expression JavaScript et cette valeur d’évaluation va être utilisée comme valeur finale pour l’argument. Par exemple, si votre instance de Vue a une propriété de donnée, attributeName, et que cette valeur est "href", alors la liaison sera équivalente à v-bind:href.
<a v-bind:[attributeName]="url"> ... </a>
<a v-on:[eventName]="doSomething"> ... </a>
Les modificateurs sont des suffixes spéciaux indiqués par un point, qui indique qu’une directive devrait être liée d’une manière spécifique. Par exemple, le modificateur .prevent dit à la directive v-on d’appeler event.preventDefault() lorsque l’évènement survient.
<form v-on:submit.prevent="onSubmit"> ... </form>
Abréviation pour v-bind
syntaxe complète
<a v-bind:href="url"> ... </a>
abréviation
<a :href="url"> ... </a>
abréviation avec argument dynamique (2.6.0+)
<a :[key]="url"> ... </a>
Abréviation pour v-on
syntaxe complète
<a v-on:click="doSomething"> ... </a>
abréviation
<a @click="doSomething"> ... </a>
abréviation avec argument dynamique (2.6.0+)
<a @[event]="doSomething"> ... </a>
La syntaxe ci-dessus signifie que la classe active sera présente si la propriété isActive est considérée comme vraie.
<div v-bind:class="{ active: isActive }"></div>
<div
class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>
Il est possible de passer un tableau à v-bind:class pour appliquer une liste de classes
<div v-bind:class="[activeClass, errorClass]"></div>
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
Ceci appliquera toujours la classe errorClass, mais appliquera activeClass uniquement quand isActive vaut true.
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
La syntaxe objet pour v-bind:style est assez simple - cela ressemble presque à du CSS, sauf que c’est un objet JavaScript.
<div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
La syntaxe tableau pour v-bind:style permet d’appliquer plusieurs objets de style à un même élément.
<div v-bind:style="[baseStyles, overridingStyles]"></div>
La directive v-if est utilisée pour conditionnellement faire le rendu d’un bloc. Le rendu du bloc sera effectué uniquement si l’expression de la directive retourne une valeur évaluée à vrai.
<h1 v-if="awesome">Vue est extraordinaire !</h1>
Un élément v-else doit immédiatement suivre un élément v-if ou un élément v-else-if (sinon il ne sera pas reconnu).
<h1 v-if="awesome">Vue est extraordinaire !</h1>
<h1 v-else>Oh non 😢</h1>
Comme v-if est une directive, elle doit être attachée à un seul élément. Mais comment faire si nous voulons permuter plusieurs éléments ? Dans ce cas, nous pouvons utiliser v-if sur un élément <template>, qui sert d’enveloppe invisible. Le résultat final rendu n’inclura pas l’élément <template>.
<template v-if="ok">
<h1>Titre</h1>
<p>Paragraphe 1</p>
<p>Paragraphe 2</p>
</template>
Le v-else-if, comme le nom le suggère, sert comme une « structure sinon si » pour v-if. Il peut également être enchainé plusieurs fois. Semblable à v-else, un élément v-else-if doit immédiatement suivre un élément v-if ou un élément v-else-if.
<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else-if="type === 'C'">C</div>
<div v-else>Ni A, ni B et ni C</div>
Vue vous offre un moyen de dire, « Ces deux éléments sont complètement distincts, ne les réutilise pas ». Ajoutez juste un attribut key avec des valeurs uniques.
<template v-if="loginType === 'username'">
<label>Nom d'utilisateur</label>
<input placeholder="Entrez votre nom d'utilisateur" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Entrez votre adresse email" key="email-input">
</template>
Une autre option pour afficher conditionnellement un élément est la directive v-show. L’utilisation est en grande partie la même.
La différence est qu’un élément avec v-show sera toujours restitué et restera dans le DOM ; v-show permute simplement la propriété CSS display de l’élément.
<h1 v-show="ok">Bonjour !</h1>
Nous pouvons utiliser la directive v-for pour faire le rendu d’une liste d’éléments en nous basant sur un tableau. La directive v-for utilise une syntaxe spécifique de la forme item in items, où items représente le tableau source des données et où item est un alias représentant l’élément du tableau en cours d’itération
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
<ul id="example-2">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
Vous pouvez aussi utiliser v-for pour itérer sur les propriétés d’un objet.
<ul id="v-for-object" class="demo">
<li v-for="value in object">
{{ value }}
</li>
</ul>
new Vue({
el: '#v-for-object',
data: {
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
}
})
<div v-for="(value, name, index) in object">
{{ index }}. {{ name }}: {{ value }}
</div>
# https://fr.vuejs.org/v2/guide/list.html#Maintaining-State