Detailed example of event modifiers in Vue

Event Modifier

---

In Vue, Event Modifier handles the details of many DOM events , so that we no longer need to spend a lot of time dealing with these annoying things, but can have more energy to focus on the logical processing of the program. (Learning video sharing: vue video tutorial)

The main event modifiers in Vue are:

• .stop : Equivalent to event.stopPropagation() in JavaScript, preventing events from bubbling
• .prevent: Equivalent event.preventDefault() in JavaScript prevents the execution of the default behavior (if the event can be canceled, cancel the event without stopping the further propagation of the event)
• .capture: Contrary to the direction of event bubbling, event capture is from outside to inside
• .self: It will only trigger Events within its own scope, excluding child elements

• .once: will only be triggered once

Next, let's look at the role of event modifiers through some simple examples.

.stop Prevent event bubbling

Bubble events: nest two or three layers of parent-child relationships, and then all have click events. Click on the child node to trigger From inside to outside, click event of child node->parent node

<!-- 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'
        }
    }
})

The diagram of the entire event is as follows:

The way to prevent bubbling events is: adding .stop to the click is equivalent to calling the equivalent of event.stopPropagation() in each method. Clicking on child nodes will not capture it. Events to the parent node

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

At this time, when the button is clicked, the events on div.middle and div.outer will not be captured:

.preventCancel the default event

.prevent is equivalent to JavaScript's event.preventDefault(), used to cancel the default event. For example, when the user clicks on the <a href="#"> tag on our page, # is usually listed in the browser's URL:

In JavaScript, event.preventDefault() is often used to prevent # from appearing in the browser's URL. In Vue, you can use the event modifier .prevent to cancel the default event. At this time, after clicking the link, # will no longer appear in the browser's URL.

<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
    }
  }
})

.capture Capture event

Capture event: nest two or three layers of parent-child relationships, and then all have click events, Clicking on a child node will trigger a click event from the outside to the parent node -> child node. The

.capture modifier is exactly the opposite of the .stop. .stop is to prevent events from bubbling, while .capture is similar to JavaScript event capture, which is from outside to inside. As shown in the figure below:

Used in our Vue event modifier:

<!-- 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)
        }
    }
})

The behavior seen is as follows:

.self

Modifier .self will only trigger events within its own scope and will not include child elements.

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

let app = new Vue({
    el: &#39;#app&#39;,
    data () {
        return {
            message: &#39;修饰符：.self&#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)
        }
    }
})

We clicked on div.outer, div.middle and button respectively, and click events were bound to these elements. , and added the .self modifier:

.once only executes one click

Remember we used Vue to write it before For a counter, click and it will increase by 1. If you continue to click, it will continue to accumulate. On the contrary, if you click on -, it will decrease by 1. If you continue to click, it will continue to decrease.

<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
    }
})

If we add the .once modifier on the @click event, it will only be executed once when the button is clicked.

<div id="app">
  <button @click.once="increase">+</button>
  <span>{{ count }}</span>
  <button @click.once="decrease">-</button>
</div>

Demo address: 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;
    }
  }
})

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

演示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 id="app">
    <input type="text" v-on:keydown.f5="prompt()">
</div>

Vue.config.keyCodes.f5 = 116;

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

总结

---

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

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

The above is the detailed content of Detailed example of event modifiers in Vue. For more information, please follow other related articles on the PHP Chinese website!