Parlons de l'instruction de surveillance des événements de Vue v-on

Dans le développement front-end, nous devons interagir fréquemment avec les utilisateurs. À l'heure actuelle, nous devons surveiller les événements des utilisateurs, tels que les clics, les glissements, les événements de clavier, etc. Comment surveiller les événements dans Vue ? Utilisez la directive v-on. L'article suivant vous présentera la commande de surveillance des événements de Vue, v-on. J'espère qu'elle vous sera utile ! v-on指令。下面本篇文章就来带大家了解一下Vue的事件监听指令v-on，希望对大家有所帮助！

v-on指令介绍

• 作用：绑定事件监听器

• 缩写：@

• 预期：Function (方法) | Inline Statement(内部表达式) | Object(对象)

• 参数： event

在Vue中绑定事件监听器，事件类型由参数指定；表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。（学习视频分享：vue视频教程）

从v2.4.0开始v-on同样支持不带参数绑定一个事件/监听器键值对的对象。注意当使用对象语法时，是不支持任何修饰器的。

用在普通元素上时，只能监听 原生DOM事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

在监听原生DOM事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个$event属性：v-on:click="handle('ok', $event)"。

先来看一个简单的示例

<!-- Template -->
<div id="app">
    <h1 v-on:click="clickMe">点击我</h1>   
</div>

// JavaScript
var app = new Vue({
    el: &#39;#app&#39;,
    methods: {
        clickMe: function() {
            alert("点击我，我就出来了!(^_^)")
        }
    },
    data: {
    }
})

看到的效果如下：

在Vue的模板中，我们使用了v-on，并且绑定了一个click事件（v-on:click），然后给这个click事件绑定了一个事件clickMe。而这个clickMe在Vue中，我们一般是放在methods: {}中，也就是说clickMe这个函数写在methods中。

看到v-on:click="clickMe"，是不是非常像HTML中的onclock="clickMe"。从外表现象看，他们写法不一样，但是起到的结果是一致的。在Vue中，我们还可以使用@click来替代v-on:click。那么他们起到的作用是一样的。

在Vue中，对于v-on的使用方式，除了上面的示例展示之外，还有下面这些使用方式：

<!-- 方法处理器 -->
<button v-on:click="clickMe"></button>

<!-- 对象语法 （v2.4.0版本以上才支持） -->
<button v-on="{ mousedown: doThis, mouseup: doThat}"></button>

<!-- 内联语句 -->
<button v-on:click="doThat(&#39;Hello&#39;, $event)"></button>

<!-- 缩写 -->
<button @click="doThis"></button>

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>

<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>

<!-- 阻止默认行为， 没有表达式 -->
<form @submit.prevent></form>

<!-- 串联修饰符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 键修饰符， 键别名 -->
<input @keyup.13="onEnter" />

<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>

在子组件上监听自定义事件（当子组件触发my-event时将调用事件处理器）：

<my-component @my-event="handleThis"></my-component>
<!-- 内联语句 -->
<my-component @my-event="handleThis(123, $event)"></my-component>
<!-- 组件中的原生事件 -->
<my-component @click.native="onClick"></my-component>

从上面的简单示例中，可以看出Vue在事件处理的过程中自带了一些修饰符：

• .stop：调用event.stopPropagation()

• .prevent：调用event.preventDefault()

• .capture：添加事件侦听器时使用capture模式

• .self：只当事件是从侦听器绑定的元素本身触发时才触发回调

• .{keyCode | keyAlias}：只当事件是从特定键触发时才触发回调

• .native：监听组件根元素的原生事件

• .once：只触发一次回调

• .left：只当点击鼠标左键时触发，（v2.2.0+ 才具有）

• .right：只当点击鼠标右键时触发，（v2.2.0+ 才具有）

• .middle：只当点击鼠标中键时触发，（v2.2.0+ 才具有）

• .passive：以{passive: true}模式添加侦听器，（v2.3.0+ 才具有）

Vue的官网对事件的处理和组件的自定义的事件都有详细的介绍。如果感兴趣的话，可以查看相应的内容：

• 事件处理器

• 组件自定义事件

v-on示例

我们来做一个简单的效果，就是一个计数器，效果如下：

这个效果很简单，点击+数字往下加，点击-

🎜v-on Introduction de la commande

• 🎜Fonction : Lier l'écouteur d'événement🎜
• 🎜Abréviation : @🎜
• 🎜Attendu : Fonction (méthode) | Inline Statement (expression interne) | Objet (objet)🎜
• 🎜Paramètres : événement🎜

🎜dans Vue Lier un événement écouteur dans, et le type d'événement est spécifié par le paramètre ; l'expression peut être le nom d'une méthode ou d'une instruction en ligne, et peut être omise s'il n'y a pas de modificateur. (Partage de vidéos d'apprentissage : vue vidéo tutoriel) 🎜 🎜À partir de v2.4.0, v-on prend également en charge la liaison d'un objet paire clé-valeur événement/écouteur sans paramètres. Notez que lors de l'utilisation de la syntaxe d'objet, aucun modificateur n'est pris en charge. 🎜🎜Lorsqu'il est utilisé sur des éléments ordinaires, il ne peut écouter que les événements DOM natifs. Lorsqu'il est utilisé sur un composant d'élément personnalisé, vous pouvez également écouter les événements personnalisés déclenchés par les composants enfants. 🎜🎜Lors de l'écoute d'événements DOM natifs, la méthode prend l'événement comme seul paramètre. Si vous utilisez une instruction en ligne, l'instruction peut accéder à un attribut $event : v-on:click="handle('ok', $event)". 🎜🎜Jetons d'abord un coup d'œil à un exemple simple🎜

<div id="app">
    <button v-on:click="increase">+</button>
    <span>{{ count }}</span>
    <button v-on:click="reduce">-</button>
</div>

🎜L'effet que vous voyez est le suivant :🎜🎜🎜🎜Dans le modèle Vue, nous utilisons v-on et lions un événement click (v-on:click), puis liez un événement clickMe à cet événement click. Dans Vue, ce clickMe est généralement placé dans les methods : {}, ce qui signifie que la fonction clickMe est écrite dans les méthodes . code>. 🎜🎜Voir v-on:click="clickMe", est-il très similaire à onclock="clickMe" en HTML ? A en juger par l'apparence, leurs méthodes d'écriture sont différentes, mais les résultats sont les mêmes. Dans Vue, nous pouvons également utiliser @click au lieu de v-on:click. Ils jouent alors le même rôle. 🎜🎜Dans Vue, en plus des exemples ci-dessus, il existe également les manières suivantes d'utiliser v-on : 🎜

let app = new Vue({
    el: '#app',
    methods: {
        increase: function() {
            this.count++
        },
        reduce: function() {
            this.count--
        }
    },
    data: {
        count: 0
    }
})

🎜Écoutez les événements personnalisés sur les composants enfants (lorsque l'enfant Le gestionnaire d'événements sera appelé lorsque le composant déclenche my-event) : 🎜

<button v-on:click="count += 1">+</button>

🎜Dans l'exemple simple ci-dessus, vous pouvez voir que Vue est livré avec quelques modificateurs dans le processus de traitement des événements : 🎜

• 🎜.stop : Appelez event.stopPropagation()🎜
• 🎜.prevent : Appelez event.preventDefault ()🎜
• 🎜.capture : Utiliser le mode capture lors de l'ajout d'écouteurs d'événements🎜
• 🎜.self  : Le rappel est déclenché uniquement lorsque l'événement est déclenché à partir de l'élément lui-même auquel l'auditeur est lié🎜
• 🎜.{keyCode | keyAlias> : Uniquement lorsque l'événement est déclenché. lorsqu'il est déclenché à partir d'une clé spécifique🎜
• 🎜.native : écoutez l'événement natif de l'élément racine du composant🎜
• 🎜.once code> : Déclenche le rappel une seule fois🎜
• 🎜.left : Se déclenche uniquement lorsque le bouton gauche de la souris est cliqué, (disponible uniquement dans la v2.2.0+)🎜
• 🎜.right : Déclenché uniquement lorsque le bouton droit de la souris est cliqué (uniquement disponible dans la v2.2.0+)🎜
• 🎜 .middle : Déclenché uniquement lorsque le bouton droit de la souris est cliqué. Déclenché lorsque la souris est cliqué avec le bouton central, (uniquement disponible dans la v2.2.0+) 🎜
• 🎜.passive  : Ajouter un écouteur en mode {passive : true Appareil, (uniquement disponible dans la version 2.3.0+) 🎜

🎜Le site officiel de Vue propose une introduction détaillée à traitement des événements et événements personnalisés des composants. Si vous êtes intéressé, vous pouvez consulter le contenu correspondant : 🎜

• 🎜Gestionnaire d'événements🎜
• 🎜Événements personnalisés de composants🎜

🎜Exemple v-on

🎜Faisons un effet simple, est un compteur, l'effet est le suivant : 🎜🎜🎜🎜Cet effet est très simple. Cliquez sur + pour augmenter le nombre vers le bas, et cliquez sur - pour diminuer le nombre vers le bas. 🎜🎜Dans Vue, notre modèle comporte trois éléments, deux boutons et un conteneur qui affiche les nombres. Le premier bouton effectue des calculs d'addition et le deuxième bouton effectue le comptage de soustraction. La structure simple ressemble à ceci : 🎜

<div id="app">
    <button v-on:click="increase">+</button>
    <span>{{ count }}</span>
    <button v-on:click="reduce">-</button>
</div>

两个按钮上都绑定了一个click事件，点击按钮分别触发increase和reduce两个函数，前者做加法，后者做减法。另外一个元素中我们有一个值{{ count }}。每次点击按钮这个{{ count }}都会做相应的变化。

模板有了之后，需要添加对应的功能。

let app = new Vue({
    el: '#app',
    methods: {
        increase: function() {
            this.count++
        },
        reduce: function() {
            this.count--
        }
    },
    data: {
        count: 0
    }
})

在Vue中，我们在methods中声明了两个函数，分别是increase（加法）和reduce（减法）。另外需要在数据源中声明count。

演示demo地址：https://codepen.io/airen/pen/PJbKNg

对于这么简单的效果，我们也可以直接在v-on中处理完：

<button v-on:click="count += 1">+</button>

比如我们前面的示例，修改下：

  <button v-on:click="count += 1">+</button>
  {{ count }}
  -


// JavaScript
let app = new Vue({
  el: '#app',
  data: {
    count: 0
  }
})

效果一样：

演示demo地址：https://codepen.io/airen/pen/veyeLY

（学习视频分享：web前端开发、编程基础视频）

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!