Lassen Sie uns über Vues Anleitung zur Ereignisüberwachung v-on sprechen

In der Front-End-Entwicklung müssen wir häufig mit Benutzern interagieren. Zu diesem Zeitpunkt müssen wir Benutzerereignisse überwachen, z. B. Klicks, Ziehen, Tastaturereignisse usw. Wie überwacht man Ereignisse in Vue? Verwenden Sie die Anweisung v-on. Der folgende Artikel führt Sie durch den Ereignisüberwachungsbefehl v-on von Vue. Ich hoffe, er ist hilfreich für Sie! 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 Befehlseinführung

• 🎜Funktion: Ereignis-Listener binden🎜
• 🎜Abkürzung: @🎜
• 🎜Erwartet: Funktion (Methode) |. Inline-Anweisung (interner Ausdruck) |. Objekt (Objekt)🎜
• 🎜Parameter: Ereignis🎜

🎜in Vue Binden Sie ein Ereignis Listener in, und der Ereignistyp wird durch den Parameter angegeben; der Ausdruck kann der Name einer Methode oder einer Inline-Anweisung sein und kann weggelassen werden, wenn kein Modifikator vorhanden ist. (Teilen von Lernvideos: vue-Video-Tutorial) 🎜 🎜Ab v2.4.0 unterstützt v-on auch die Bindung eines Ereignis/Listener-Schlüssel-Wert-Paar-Objekts ohne Parameter. Beachten Sie, dass bei Verwendung der Objektsyntax keine Modifikatoren unterstützt werden. 🎜🎜Bei Verwendung für gewöhnliche Elemente können nur native DOM-Ereignisse überwacht werden. Bei Verwendung für eine benutzerdefinierte Elementkomponente können Sie auch benutzerdefinierte Ereignisse abhören, die von untergeordneten Komponenten ausgelöst werden. 🎜🎜Beim Abhören nativer DOM-Ereignisse verwendet die Methode das Ereignis als einzigen Parameter. Bei Verwendung einer Inline-Anweisung kann die Anweisung auf ein $event-Attribut zugreifen: v-on:click="handle('ok', $event)". 🎜🎜Schauen wir uns zunächst ein einfaches Beispiel an🎜

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

🎜Der Effekt, den Sie sehen, ist wie folgt:🎜🎜🎜🎜In der Vue-Vorlage verwenden wir v-on und binden ein click-Ereignis (v-on:click) und binden Sie dann ein Ereignis clickMe an dieses click-Ereignis. In Vue wird dieses clickMe normalerweise in methods: {} platziert, was bedeutet, dass die Funktion clickMe in methoden geschrieben wird. Code>. 🎜🎜Siehe v-on:click="clickMe", ist es onclock="clickMe" in HTML sehr ähnlich? Dem Aussehen nach zu urteilen, sind ihre Schreibmethoden unterschiedlich, aber die Ergebnisse sind die gleichen. In Vue können wir auch @click anstelle von v-on:click verwenden. Dann spielen sie die gleiche Rolle. 🎜🎜In Vue gibt es zusätzlich zu den obigen Beispielen auch die folgenden Möglichkeiten, v-on zu verwenden: 🎜

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

🎜Benutzerdefinierte Ereignisse für untergeordnete Komponenten abhören (wenn das untergeordnete Element vorhanden ist) Der Ereignishandler wird sein aufgerufen, wenn die Komponente my-event auslöst): 🎜

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

🎜Aus dem einfachen Beispiel oben können Sie sehen, dass Vue einige Modifikatoren im Ereignisverarbeitungsprozess enthält: 🎜

• 🎜.stop: Call event.stopPropagation()🎜
• 🎜.prevent: Call event.preventDefault ()🎜
• 🎜.capture: Capture-Modus beim Hinzufügen von Ereignis-Listenern verwenden🎜
• 🎜.self : Der Rückruf ist Wird nur ausgelöst, wenn das Ereignis von dem Element selbst ausgelöst wird, an das der Listener gebunden ist bei Auslösung durch einen bestimmten Schlüssel🎜
• 🎜.native: Lauschen Sie dem nativen Ereignis des Komponentenstammelements🎜
• 🎜.once code>: Löst den Rückruf nur einmal aus🎜
• 🎜.left: Wird nur ausgelöst, wenn die linke Maustaste geklickt wird (nur in Version 2.2.0+ verfügbar)🎜
• 🎜.right: Wird nur ausgelöst, wenn die rechte Maustaste gedrückt wird (nur verfügbar in v2.2.0+)🎜
• 🎜 .middle: Wird nur ausgelöst, wenn mit der rechten Maustaste geklickt wird. Wird ausgelöst, wenn mit der Maus mit der mittleren Maustaste geklickt wird (nur verfügbar in v2.2.0+) 🎜
• 🎜.passive : Listener im {passive: true-Modus Gerät hinzufügen, (nur in Version 2.3.0+ verfügbar) 🎜

🎜Vues offizielle Website bietet eine detaillierte Einführung in Ereignisverarbeitung und benutzerdefinierte Komponentenereignisse. Bei Interesse können Sie sich den entsprechenden Inhalt ansehen: 🎜

• 🎜Ereignishandler🎜
• 🎜Benutzerdefinierte Komponentenereignisse🎜

🎜v-on-Beispiel

🎜Lassen Sie uns einen einfachen Effekt erzeugen, ist ein Zähler, der Effekt ist wie folgt: 🎜🎜🎜🎜Dieser Effekt ist sehr einfach. Klicken Sie auf +, um die Zahl zu erhöhen, und auf -, um die Zahl zu verringern. 🎜🎜In Vue verfügt unsere Vorlage über drei Elemente, zwei Schaltflächen und einen Container, der Zahlen anzeigt. Die erste Schaltfläche führt Additionsberechnungen durch und die zweite Schaltfläche führt Subtraktionszählungen durch. Der einfache Aufbau sieht so aus: 🎜

<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前端开发、编程基础视频）

Das obige ist der detaillierte Inhalt vonLassen Sie uns über Vues Anleitung zur Ereignisüberwachung v-on sprechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!