VUE的事件修饰符，once,prevent,stop，capture,self,passiveVUE的事件修饰符，once,prevent,stop

2022-05-25 18:01:34 阅读：196 来源： 互联网

今天笔者在学习vue3的时候顺带巩固了下vue的基础，感觉这些还是挺有用的，特此分享给大家。

once，只执行一次

<div v-on:click.once='alert("1")'></div>

2. prevent
阻止默认程序，比如form表单中的summit提交按钮，会自己提交，

<form v-on:submit="alert('who')" action="first_submit" method="get" accept-charset="utf-8">
        first_submit
        get
        <input type="submit" name="">
    </form>

现在的submit会进行数据提交，和跳转

<form v-on:submit.prevent="alert('who')" action="first_submit" method="get" accept-charset="utf-8">
        first_submit
        get
        <input type="submit" name="">
    </form>

prevent，直接不让你提交了，也不跳转，只是执行自己命名的函数，个人觉得这个修饰符使用的并不多，完全可以不做submit，我自己写个click更方便啊！！
3. stop
阻止函数的传递

<div v-on:click='alert("1")' style="width: 100%;height: 45px;background-color: black;">
            <div v-on:click="alert('2')" style='width: 80%;margin-left: 10%;background-color: white;'>
                123
            </div>
        </div>

此时点击子级的div会，先弹出2，再弹出1

标签：prevent,修饰符,stop,submit,提交,once
来源： https://www.cnblogs.com/panwudi/p/16310180.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

VUE的事件修饰符，once,prevent,stop，capture,self,passiveVUE的事件修饰符，once,prevent,stop