【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()，这主要用于提高移动设备上的滚动性能。

几个常用的事件修饰符：

...

示例：

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



<div @click.self="doThat">...div>


<button @click.once="doThis">button>




<div @scroll.passive="onScroll">...div>


<button @click.ctrl="onClick">Abutton>


<button @click.exact="onExact">Abutton>

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