04——事件修饰符

事件修饰符是什么

事件修饰符： 例如阻止默认行为，阻止事件冒泡这些，其实就是把原生js中的阻止默认行为这些东西封装到了指令上面，我们使用指令就可以达到效果，不用写原生js那么长了，它的存在还是为了不操作dom。

用法

v-on:事件名.prevent=‘方法名’   <====>    @事件名.prevent= ‘方法名’

其实就是在事件类型的后面.点上需要的修饰符名字即可

常用的三个：

 阻止默认行为 .prevent

例如form表单提交按钮的默认提交行为，直接在提交按钮上写上 @click.prevent 就不会默认触发提交了

<form action=''>
        <input type="text" >
        <input type="submit" @click.prevent>
    </form>

例如阻止a标签的默认跳转

   <a href="#" @click.prevent></a>我不会跳转</a>

阻止事件冒泡 .stop

 <!-- 阻止事件冒泡 -->
     <button @click.stop="fn">点我阻止冒泡</button>

只执行一次函数 .once

在调用某个方法的时候，在事件名后面写上点once

（例如：@click.once=’方法名’），

那这个方法只会调用一次

例如methods里面有一个方法tan1：

// 方法属性
        methods:{
            // 这里写方法
            tan1(){
                alert("我是一个方法")
            }
        }

在视图层写一个按钮使用点击事件去调用它，正常情况下，每次点击按钮都会触发方法tan1，

但添加上once之后，只有第一次点击会触发方法tan1，后面再点就不会再触发了，就没有效果了

<template>
   <div class="body">
        <!-- view 视图层 -->
         {{msg}}
        <button @click.once="tan1">只会触发一次</button>
    </div>
</template>