【Vue事件修饰符详细介绍】

在Vue.js中，当你绑定事件监听器时，可以使用事件修饰符来进行特定的操作，事件修饰符是一些由点开头的指令后缀来表示的，它们告诉 v-on 指令对于绑定的事件做一些特别的处理，以下是Vue提供的事件修饰符：

1. .stop - 调用 event.stopPropagation()，停止事件冒泡。
2. .prevent - 调用 event.preventDefault()，阻止事件的默认行为。
3. .capture - 添加事件监听器时使用事件捕获模式，即元素本身接收事件的阶段，事件从外向内逐层捕获直到目标元素。
4. .self - 如果事件是从监听器绑定的元素本身（而不是子元素）触发的，才会触发回调。
5. .once - 事件将只会触发一次，随后便会移除事件监听器。
6. .passive - 以 { passive: true } 模式添加事件监听器，标识该函数永远不会调用 event.preventDefault()，这主要用于提高移动设备上的滚动性能。

几个常用的事件修饰符：

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- click 事件只能点击一次 -->
<a v-on:click.once="doThis"></a>
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>

示例：

<div>接收消息：{{receverMsg}}</div>
<p>
    <!--响应多次或一次点击事件-->
    <input type="text" v-model="sendMsg">
    <button @click="sender">发送(多次)</button>
    <button @click.once="sender">发送(一次)</button>
</p>
<p>
    <!-- 阻止表单提交 -->
    <form action="testAction.action" method="post" @submit.prevent="doSubmit()">
        <label>名称</label>
        <input type="text" name="name"/>
        <input type="submit" value="提交"/>
    </form>
</p>

var vm = new Vue({

    el: "#app",

    data: {
        receverMsg: null,
        sendMsg: null
    },

    methods: {
        sender: function() {
            this.receverMsg = this.sendMsg;
        },
        doSubmit: function() {
            alert('ok');
        }
    }

});

除了上述常用的修饰符，Vue 3.x版本还引入了更多实用的事件修饰符，主要包括：

1. .left - 只当点击鼠标左键时触发。
2. .right - 只当点击鼠标右键时触发。
3. .middle - 只当点击鼠标中键时触发。
4. .exact - 控制其他修饰符一起使用时，精确匹配修饰符。

下面是一些使用事件修饰符的示例：

<!-- 阻止单击事件冒泡 -->
<button @click.stop="doThis"></button>

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

<!-- 修饰符链 -->
<a @click.stop.prevent="doThat"></a>

<!-- 只有在 `event.target` 是元素本身时触发处理函数 -->
<!-- 即事件不是从内部元素冒泡而来的 -->
<div @click.self="doThat">...</div>

<!-- 单击事件将只会触发一次 -->
<button @click.once="doThis"></button>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div @scroll.passive="onScroll">...</div>

<!-- 只有在没有其它按键被同时按下的情况下才触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 只有在 alt 或 shift 被按下的情况下不会触发 -->
<button @click.exact="onExact">A</button>

使用修饰符可以让事件处理函数更加纯粹和专注于逻辑本身，而不需要处理DOM事件细节，从而简化代码和提高可读性，在实际开发中，根据需求合理运用这些修饰符，可以极大地提升开发效率。