Heim > Artikel > Web-Frontend > Detailliertes Beispiel für Ereignismodifikatoren in Vue

Detailliertes Beispiel für Ereignismodifikatoren in Vue

青灯夜游nach vorne: 2022-08-10 16:38:042217Durchsuche

Ereignismodifikatoren

In Vue verarbeiten Ereignismodifikatoren die Details vieler DOM-Ereignisse, sodass wir nicht mehr viel Zeit mit der Bearbeitung dieser lästigen Dinge verbringen müssen, sondern uns mehr darauf konzentrieren können die logische Abarbeitung des Programms. (Teilen von Lernvideos: vue-Video-Tutorial)

Die wichtigsten Ereignismodifikatoren in Vue sind:

.stop.stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡
.prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）
.capture：与事件冒泡的方向相反，事件捕获由外到内
.self：只会触发自己范围内的事件，不包含子元素
.once：只会触发一次

接下来，咱们通过一些简单的示例来看看事件修饰符起的作用。

.stop 防止事件冒泡

冒泡事件：嵌套两三层父子关系，然后所有都有点击事件，点击子节点，就会触发从内至外子节点->父节点的点击事件

<!-- HTML -->
<div>
    <div>
        <div>
            <button>点击我(^_^)</button>
        </div>
    </div>
    <p>{{ message }}</p>
</div>

let app = new Vue({
    el: '#app',
    data () {
        return {
            message: '测试冒泡事件'
        }
    },
    methods: {
        inner: function () {
            this.message = 'inner： 这是最里面的Button'
        },
        middle: function () {
            this.message = 'middle: 这是中间的Div'
        },
        outer: function () {
            this.message = 'outer: 这是外面的Div'
        }
    }
})

Detailliertes Beispiel für Ereignismodifikatoren in Vue

整个事件示意图如下：

Detailliertes Beispiel für Ereignismodifikatoren in Vue

防止冒泡事件的写法是：在点击上加上.stop相当于在每个方法中调用了等同于event.stopPropagation()，点击子节点不会捕获到父节点的事件

<!-- HTML --> 
<div id="app"> 
　　<div class="outeer" @click.stop="outer"> 
　　　　<div class="middle" @click.stop="middle"> 
　　　　　　<button @click.stop="inner">点击我(^_^)</button>
 　　　　</div>
 　　</div> 
</div>

这个时候，点击button时，并不会捕获到div.middle和div.outer上的事件：

Detailliertes Beispiel für Ereignismodifikatoren in Vue

.prevent取消默认事件

.prevent等同于JavaScript的event.preventDefault()，用于取消默认事件。比如我们页面的<a href="#"></a>标签，当用户点击时，通常在浏览器的网址列出#：

Detailliertes Beispiel für Ereignismodifikatoren in Vue

在JavaScript中，常常使用event.preventDefault()来防止浏览器的网址中出现#。在Vue中，可以使用事件修饰符.prevent来取消默认事件。这个时候，点击链接之后，浏览器的网址中再也不会出现#。

<div id="app">
  <a href="#" @click.prevent="prompt">点击我(^_^)</a>
  <p>{{ message }}</p>
</div>

let app = new Vue({
  el: &#39;#app&#39;,
  data () {
    return {
      message: &#39;我是一个文本信息&#39;
    }
  },
  methods: {
    prompt: function (e) {
      this.message = location.href
    }
  }
})

Detailliertes Beispiel für Ereignismodifikatoren in Vue

.capture 捕获事件

捕获事件：嵌套两三层父子关系，然后所有都有点击事件，点击子节点，就会触发从外至内父节点->子节点的点击事件

.capture修饰符和.stop刚好相反。.stop是防止事件冒泡，而.capture类似JavaScript的事件捕获，是由外到内的。如下图所示：

用到我们的Vue的事件修饰符中：

<!-- HTML -->
<div id="app">
    <div class="outeer" @click.capture="outer">
        <div class="middle" @click.capture="middle">
            <button @click.capture="inner">点击我(^_^)</button>
        </div>
    </div>
    <p>{{ message }}</p>
</div>

let app = new Vue({
    el: &#39;#app&#39;,
    data () {
        return {
            message: &#39;事件捕获&#39;
        }
    },
    methods: {
        inner: function () {
            this.message = &#39;inner： 这是最里面的Button&#39;
            alert(this.message)
        },
        middle: function () {
            this.message = &#39;middle: 这是中间的Div&#39;
            alert(this.message)
        },
        outer: function () {
            this.message = &#39;outer: 这是外面的Div&#39;
            alert(this.message)
        }
    }
})

看到的行为如下：

Detailliertes Beispiel für Ereignismodifikatoren in Vue

.self

修饰符.self只会触发自己范围内的事件，不会包含子元素。

<!-- HTML -->
<div>
    <div>
        <div>
            <button>点击我(^_^)</button>
        </div>
    </div>
    <p>{{ message }}</p>
</div>

let app = new Vue({
    el: '#app',
    data () {
        return {
            message: '修饰符：.self'
        }
    },
    methods: {
        inner: function () {
            this.message = 'inner： 这是最里面的Button'
            alert(this.message)
        },
        middle: function () {
            this.message = 'middle: 这是中间的Div'
            alert(this.message)
        },
        outer: function () {
            this.message = 'outer: 这是外面的Div'
            alert(this.message)
        }
    }
})

咱们分别点击div.outer、div.middle和button，在这几个元素上都绑定了click事件，并且添加了.self修饰符：

Detailliertes Beispiel für Ereignismodifikatoren in Vue

.once 只执行一次点击

还记得我们以前使用Vue写了一个计数器，点击+就会加1，不断点击就会不断累加，反则点击-就会减1，不断点击就会不断减少。

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

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

Detailliertes Beispiel für Ereignismodifikatoren in Vue

如果我们在@click事件上添加.once: entspricht event.stopPropagation( in JavaScript) ) , verhindert das Sprudeln von Ereignissen

.prevent

: Entspricht event.preventDefault() in JavaScript und verhindert die Ausführung des voreingestellten Verhaltens ( Wenn das Ereignis stornierbar ist, stornieren Sie das Ereignis, ohne die weitere Ausbreitung des Ereignisses zu stoppen) Detailliertes Beispiel für Ereignismodifikatoren in Vue

.capture

: In der entgegengesetzten Richtung der Ereignissprudelung erfolgt die Ereigniserfassung von außen nach innen
.self🎜: Nur Ereignisse innerhalb seines eigenen Bereichs werden ausgelöst, ausgenommen untergeordnete Elemente🎜🎜🎜.once🎜: Nur es wird ausgelöst einmal ausgelöst werden🎜🎜Als nächstes schauen wir uns die Rolle von Ereignismodifikatoren anhand einiger einfacher Beispiele an. 🎜
🎜.stop verhindert, dass Ereignisse sprudeln 🎜
🎜Blasenereignisse: Verschachteln Sie zwei oder drei Ebenen von Eltern-Kind-Beziehungen, und wenn Sie auf einen untergeordneten Knoten klicken, werden untergeordnete Knoten von innen ausgelöst nach außen - >Klickereignis des übergeordneten Knotens🎜
<div id="app">
  <button @click.once="increase">+</button>
  <span>{{ count }}</span>
  <button @click.once="decrease">-</button>
</div>
🎜🎜🎜Das Diagramm der gesamten Veranstaltung sieht wie folgt aus: 🎜🎜🎜🎜Die Möglichkeit, Bubbling-Ereignisse zu verhindern, ist: Das Hinzufügen von .stop zum Klick entspricht dem Aufruf des Äquivalents von event.stopPropagation in jeder Methode (): Wenn Sie auf den untergeordneten Knoten klicken, wird das Ereignis des übergeordneten Knotens nicht erfasst🎜
<div id="app">
  <button @keyup.enter="enter" @keyup.tab="tab" @keyup.delete="delete1" @keyup.esc="esc" @keyup.space="space" @keyup.up="up" @keyup.down="down" @keyup.left="left" @keyup.right="right">{{ message }}</button>
  <p>{{ message }}</p>
</div>


let app = new Vue({
  el: &#39;#app&#39;,
  data () {
    return {
      message: &#39;将光标置于按钮上后，按下键盘上不同的按键，会有不同的效果&#39;
    }
  },
  methods: {
    enter: function (){
      this.message = &#39;你按了回车键：enter&#39;
    },
    tab: function (){
      this.message = &#39;你按了tab键: tab&#39;
    },
    delete1: function (){
      this.message = &#39;你按了删除键: delete&#39;
    }, 
    esc: function (){
      this.message = &#39;你按了取消键: esc&#39;
    },
    space: function (){
      this.message = &#39;你按了空格键：space&#39;
    },
    up: function (){
      this.message = &#39;你按了向上键：up&#39;
    },
    down: function (){
      this.message = &#39;你按了向下键：down&#39;
    },
    left: function (){
      this.message = &#39;你按了向左键：left&#39;
    },
    right: function (){
      this.message = &#39;你按了向右键：right&#39;
    }
  }
})
🎜Zu diesem Zeitpunkt werden beim Klicken auf die Schaltfläche die Ereignisse auf div.middle und div.outer erfasst wird nicht erfasst:🎜🎜🎜
🎜.preventcancel Standardereignis 🎜
🎜.prevent entspricht JavaScripts event.preventDefault(), das zum Abbrechen des Standardereignisses verwendet wird Ereignis. Wenn der Benutzer beispielsweise auf unserer Seite auf das Tag <a href="#"></a> klickt, wird # normalerweise in der URL des Browsers aufgeführt: 🎜🎜🎜🎜In JavaScript ist es so event.preventDefault() wird häufig verwendet, um zu verhindern, dass # in der URL des Browsers erscheint. In Vue können Sie den Ereignismodifikator .prevent verwenden, um das Standardereignis abzubrechen. Zu diesem Zeitpunkt wird # nach dem Klicken auf den Link nicht mehr in der URL des Browsers angezeigt. 🎜

<div>
    <input>
</div>

Vue.config.keyCodes.f5 = 116;

let app = new Vue({
    el: '#app',
    methods: {
        prompt: function() {
            alert('我是 F5！');
        }
    }
});
🎜🎜🎜.capture Capture-Ereignis🎜🎜Capture-Ereignis: Verschachteln Sie zwei oder drei Ebenen von Eltern-Kind-Beziehungen, und klicken Sie dann auf einen untergeordneten Knoten, um den übergeordneten Knoten->untergeordneten Knoten von außen auszulösen nach innen. Click-Ereignis 🎜🎜.capture Modifikator ist genau das Gegenteil von .stop. .stop verhindert das Sprudeln von Ereignissen, während .capture der Ereigniserfassung von JavaScript ähnelt, die von außen nach innen erfolgt. Wie im Bild unten gezeigt: 🎜🎜🎜🎜 Nutzen Sie unsere Im Ereignismodifikator von Vue: 🎜rrreee🎜Das Verhalten, das Sie sehen, ist wie folgt: 🎜🎜🎜
🎜.self🎜
🎜Der Modifikator .self löst nur Ereignisse innerhalb seines eigenen Bereichs aus und schließt keine untergeordneten Elemente ein Element. 🎜rrreee🎜Wir klicken jeweils auf div.outer, div.middle und klicken auf Ereignisse, die an diese Elemente gebunden sind .self-Modifikator: 🎜🎜🎜🎜.once führt nur einen Klick aus🎜🎜Ich erinnere mich noch daran, dass wir zuvor mit Vue einen Zähler geschrieben haben. Wenn Sie auf + klicken, wird 1 hinzugefügt, und wenn Sie weiter klicken, wird es fortgesetzt Akkumulieren, andernfalls klicken Sie auf - und der Wert verringert sich um 1. Wenn Sie weiter klicken, verringert sich der Wert weiter. 🎜rrreee🎜🎜🎜Wenn wir auf dem @click sind Ereignis Fügen Sie den Modifikator .once hinzu, damit er nur einmal ausgeführt wird, wenn auf die Schaltfläche geklickt wird. 🎜🎜rrreee🎜🎜🎜🎜🎜Demo-Adresse: https://codepen.io/airen/pen/dVQoRN🎜

键盘修饰符

在JavaScript事件中除了前面所说的事件，还有键盘事件，也经常需要监测常见的键值。在Vue中允许v-on在监听键盘事件时添加关键修饰符。记住所有的keyCode比较困难，所以Vue为最常用的键盘事件提供了别名：

.enter：回车键
.tab：制表键
.delete：含delete和backspace键
.esc：返回键
.space: 空格键
.up：向上键
.down：向下键
.left：向左键
.right：向右键

<div id="app">
  <button @keyup.enter="enter" @keyup.tab="tab" @keyup.delete="delete1" @keyup.esc="esc" @keyup.space="space" @keyup.up="up" @keyup.down="down" @keyup.left="left" @keyup.right="right">{{ message }}</button>
  <p>{{ message }}</p>
</div>


let app = new Vue({
  el: &#39;#app&#39;,
  data () {
    return {
      message: &#39;将光标置于按钮上后，按下键盘上不同的按键，会有不同的效果&#39;
    }
  },
  methods: {
    enter: function (){
      this.message = &#39;你按了回车键：enter&#39;
    },
    tab: function (){
      this.message = &#39;你按了tab键: tab&#39;
    },
    delete1: function (){
      this.message = &#39;你按了删除键: delete&#39;
    }, 
    esc: function (){
      this.message = &#39;你按了取消键: esc&#39;
    },
    space: function (){
      this.message = &#39;你按了空格键：space&#39;
    },
    up: function (){
      this.message = &#39;你按了向上键：up&#39;
    },
    down: function (){
      this.message = &#39;你按了向下键：down&#39;
    },
    left: function (){
      this.message = &#39;你按了向左键：left&#39;
    },
    right: function (){
      this.message = &#39;你按了向右键：right&#39;
    }
  }
})

当你把鼠标移动按钮上，然后按下不同的键盘，将会监听到对应的键盘事件：

Detailliertes Beispiel für Ereignismodifikatoren in Vue

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

鼠标修饰符

鼠标修饰符用来限制处理程序监听特定的滑鼠按键。常见的有：

.left：鼠标左键
.middle：鼠标中间滚轮
.right：鼠标右键

修饰键

可以用如下修饰符开启鼠标或键盘事件监听，使在按键按下时发生响应：

.ctrl
.alt
.shift
.meta

自定义按键修饰符别名

在Vue中可以通过config.keyCodes自定义按键修饰符别名。例如，由于预先定义了keycode 116（即F5）的别名为f5，因此在文字输入框中按下F5，会触发prompt方法，出现alert。

<!-- HTML -->
<div>
    <input>
</div>

Vue.config.keyCodes.f5 = 116;

let app = new Vue({
    el: '#app',
    methods: {
        prompt: function() {
            alert('我是 F5！');
        }
    }
});

总结

在Vue中，使用v-on来给元素绑定事件，而为了更好的处理逻辑方面的事物，Vue提供了一个methods。在methods中定义一些方法，这些方法可以帮助我们处理一些逻辑方面的事情。而在这篇文章中，我们主要介绍了一些事件的修饰符，比如常见的阻止事件冒泡，键盘修饰符等。除此之外，还提供了config.keyCodes提供自定义按键修饰符别名。

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

Das obige ist der detaillierte Inhalt vonDetailliertes Beispiel für Ereignismodifikatoren in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript Event delete 事件 dom href alert 键盘事件 https prompt

Stellungnahme：

Dieser Artikel ist reproduziert unter:cnblogs.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Detaillierte Erläuterung des Lebenszyklus von Vue-Instanzen von der Erstellung bis zur ZerstörungNächster Artikel：Detaillierte Erläuterung des Lebenszyklus von Vue-Instanzen von der Erstellung bis zur Zerstörung

In Verbindung stehende Artikel

Mehr sehen