DevTools - ClicAndCode

Appeler une méthode dans un gestionnaire d'événement

Facile

<button @click="saluer">Saluer</button>

Directive v-for avec index

Facile

<li v-for="(item, index) in items">
  {{ index }} - {{ item.message }}
</li>

Directive v-for sur un objet

Intermédiaire

<li v-for="(value, key) in myObject">
  {{ key }}: {{ value }}
</li>

Directive v-for sur un tableau

Facile

<li v-for="item in items">
  {{ item.message }}
</li>

Directive v-if

Facile

<h1 v-if="awesome">Vue is awesome!</h1>

Directive v-if/v-else

Facile

<div v-if="Math.random() > 0.5">
  Maintenant vous me voyez
</div>
<div v-else>
  Maintenant non
</div>

Directive v-show

Facile

<h1 v-show="ok">Bonjour !</h1>

Écouteur d'événement (v-on)

Facile

<button v-on:click="counter += 1">Ajouter 1</button>
<!-- Raccourci -->
<button @click="counter += 1">Ajouter 1</button>

Liaison bidirectionnelle (v-model)

Facile

<input v-model="message" placeholder="Éditez-moi">

Liaison d'attribut (v-bind)

Facile

<div v-bind:id="dynamicId"></div>
<!-- Raccourci -->
<div :id="dynamicId"></div>

Modificateurs d'événement (.prevent)

Intermédiaire

<form @submit.prevent="onSubmit"></form>

v-model sur des boutons radio

Facile

<input type="radio" v-model="picked" value="Un">

📚 Cheatsheet