Méthodes et gestionnaires d'événements

Les gestionnaires de méthodes

peuvent utiliser la directive v-on pour surveiller les événements DOM :

<p id="example">
  <button v-on:click="greet">Greet</button>
</p>

Nous avons lié un gestionnaire d'événements de clic à une méthode greet. Définissez cette méthode dans l'instance Vue ci-dessous :

var vm = new Vue({
  el: '#example',
  data: {
    name: 'Vue.js'
  },
  // 在 `methods` 对象中定义方法
  methods: {
    greet: function (event) {
      // 方法内 `this` 指向 vm
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      alert(event.target.tagName)
    }
  }
})

// 也可以在 JavaScript 代码中调用方法
vm.greet() // -> 'Hello Vue.js!'

Processeur d'instructions en ligne

En plus de vous lier directement à une méthode, vous pouvez également utiliser des instructions JavaScript en ligne :

<p id="example-2">
  <button v-on:click="say(&#39;hi&#39;)">Say Hi</button>
  <button v-on:click="say(&#39;what&#39;)">Say What</button>
</p>

new Vue({
  el: &#39;#example-2&#39;,
  methods: {
    say: function (msg) {
      alert(msg)
    }
  }
}

Semblables aux expressions en ligne, les gestionnaires d'événements sont limités à une seule instruction.

Parfois, il est également nécessaire d'accéder aux événements DOM natifs dans un gestionnaire d'instructions en ligne. Vous pouvez utiliser la variable spéciale $event pour la passer dans la méthode :

<button v-on:click="say(&#39;hello!&#39;, $event)">Submit</button>

// ...
methods: {
  say: function (msg, event) {
    // 现在我们可以访问原生事件对象
    event.preventDefault()
  }
}

Le modificateur d'événement

doit souvent appeler event.preventDefault() ou event.stopPropagation() dans l'événement gestionnaire. Bien que nous puissions facilement faire cela dans une méthode, il serait préférable que la méthode soit une pure logique de données et ne traite pas les détails des événements DOM.

Pour résoudre ce problème, Vue.js fournit deux modificateurs d'événements pour v-on : .prevent et .stop. Vous souvenez-vous encore que les modificateurs sont des suffixes de commande commençant par un point ?

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat">

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

1.0.16 a ajouté deux modificateurs supplémentaires :

<!-- 添加事件侦听器时使用 capture 模式 -->
<p v-on:click.capture="doThis">...</p>

<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<p v-on:click.self="doThat">...</p>

Modificateurs de touches

Lors de l'écoute des événements de clavier, nous devons souvent détecter keyCode . Vue.js permet d'ajouter des modificateurs de touches à v-on :

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">

Il est difficile de se souvenir de tous les keyCode. Vue.js fournit des alias pour les touches les plus couramment utilisées :

<!-- 同上 -->
<input v-on:keyup.enter="submit">

<!-- 缩写语法 -->
<input @keyup.enter="submit">

enter
tab
delete
esc
space
up
down
left
right

// 可以使用 @keyup.f1
Vue.directive('on').keyCodes.f1 = 112

présente plusieurs avantages : v-on

1. Vous pouvez facilement localiser la méthode correspondante dans le code JavaScript en scannant le modèle HTML.

2. Comme vous n'avez pas besoin de lier manuellement les événements en JavaScript, votre code ViewModel peut être une logique très pure, complètement découplée du DOM et plus facile à tester.

3. Lorsqu'un ViewModel est détruit, tous les gestionnaires d'événements seront automatiquement supprimés. Vous n’avez pas à vous soucier de les nettoyer vous-même.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!