Utilisation de la directive v-on

<input type='button' v-on:click='compteur++'/>

Forme abrégée de v-on

<input type='button' @click='compteur++'/>

2. Méthodes d'appel des fonctions d'événement

Liaison directe du nom de fonction

<button v-on:click='afficherMessage'>Bonjour</button>

Appel de fonction

<button v-on:click='afficherMessage()'>Dire bonjour</button>

3. Passage de paramètres aux fonctions d'événement

Paramètres réguliers et objet événement

<button v-on:click='afficherMessage("salut",$event)'>Dire bonjour</button>

Si l'événement est lié directement au nom de fonction, l'objet événement est automatiuqement passé comme premier paramètre à la fonction.

Si l'événement est lié à un appel de fonction, l'objet événement doit être passé en dernier paramètre et son nom doit impérativement être $event.

4. Modificateurs d'événements

.stop - Arrêter la propagation

<a v-on:click.stop="gererAction">Naviguer</a>

.prevent - Empêcher le comportemnet par défaut

<a v-on:click.prevent="gererAction">Naviguer</a>

5. Modificateurs de touches

.enter - Touche Entrée

<input v-on:keyup.enter='soumettre'>

.delete - Touche Supprimer

<input v-on:keyup.delete='gererAction'>

6. Modificateurs de touches personnalisés

Objet global config.keyCodes

Vue.config.keyCodes.f1 = 113

<div id="application">
    <input type="text" v-on:keyup.perso='gererAction' v-model='donnees'>
</div>
<script type="text/javascript">
    /*
      Liaison d'événements - Modificateurs de touches personnalisés
      Note : Le nom du modificateur est personnalisable, mais la valeur doit correspondre au keyCode de la touche
    */
    Vue.config.keyCodes.perso = 113 // 113 est le code de la touche F2
    var vm = new Vue({
      el: '#application',
      data: {
        donnees: ''
      },
      methods: {
        gererAction: function(evenement){
          console.log(evenement.keyCode)
        }
      }
    });
  </script>

Exemple : Calculatrice simple

① Utiliser la directive v-model pour lier la valeur a et la valeur b

② Associer un événement au bouton de calcul pour implémenter la logique

③ Afficher le résultat du calcul à l'emplacement approprié

<div id="application">
        <h1>Calculatrice simple</h1>
        <div>
            <span>Valeur A :</span>
            <span><input type="text" v-model="premiereValeur"></span>
        </div>
        <div>
            <span>Valeur B :</span&gt            <span><input type="text" v-model="deuxiemeValeur"></span>
        </div>
        <div>
            <button v-on:click='calculer'>Calculer</button>
        </div>
        <div>
            <span>Résultat :</span>
            <span v-text='resultat'></span>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: '#application',
            data: {
                premiereValeur: '',
                deuxiemeValeur: '',
                resultat: ''
            },
            methods: {
                calculer: function () {
                    this.resultat = parseInt(this.premiereValeur) + parseInt(this.deuxiemeValeur);
                }
            }
        });
    </script>