前军教程网

事件修饰符：

1、 通过prevent修饰符可以阻止标签的默认事件的跳转，

即alert（）事件后，不会跳转。即prevent叫事件修饰符

<div id="root">
    <h2>欢迎来到{{name]学习</h2>
    //preyent修饰符 可阻止默认事件后的跳转处理
    <a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>
</div>
</body>
<script type="text/javascript">
    //阻止 vue 在启动时生成生产提不
    Vue.config.productionTip = false 
    new Vue({
        el:'#root'
        data:(
                name:"尚硅谷
        },
        methods :(
            showInfo(e){
                 alert('同学你好! )
            }
        }
   })
</script>

2、self修饰符：

<!-- 只有event.target是在当前元素操作才触发事件-->
<div class="demo1" @click.self="showInfo">
    <button @click="showInfo">点我提示信息</button>
</div>

3、多个修饰符连用：

<div class="demo1" @click="showInfo">
<!-- <button @click.stop="showInfo">点我提示信息</button> -->
   //多个修饰符边连写，按修饰符写的前后顺序进行触发，以下表示阻止冒泡，再阻止url跳转；
    <a href="http://www.atguigu.com"@click.stop.prevent="showInfo">点我提示信息</a>
</div>
<!-- 事件只触发一次 (常用)-->

想系统性学习开发项目并下载源码，可以搜索微信小程序“群应荟萃” 并转发 ，有无限多的免费学习教程。

加入微信群：“群应荟萃”可以实时获取最新资源更新