vue事件修饰符
程序员文章站
2023-11-11 07:58:57
/* 默认事件触发顺序：冒泡 vue事件修饰符 1.阻止事件传播--事件.stop 2.事假捕获--事件.capture 3.阻止事件默行为--事件.prevent 4.事件只触发一次--事件.once 5.只在点击自身是触发--事件.self */ vue... ......</div>
<div class="content">
<div class="cnblogs_code">
<pre class="brush: css;"> /*
默认事件触发顺序：冒泡
vue事件修饰符
1.阻止事件传播--事件.stop
2.事假捕获--事件.capture
3.阻止事件默行为--事件.prevent
4.事件只触发一次--事件.once
5.只在点击自身是触发--事件.self
*/</pre>
</div>
<div class="cnblogs_code">
<pre class="brush: css;"><html>
<head>
<title>vue事件</title>
<meta charset="utf-8">
</head>
<body>
<div id="app">
<div @click.capture="parent">1
<div @click="child">2
<div @click="gradson">3
</div>
</div>
</div>
</div>
</body>
<script src="node_modules\vue\dist\vue.js"></script>
<script>
let vm =new vue({
el:"#app",
methods:{
parent(){alert(1)},
child(){alert(2)},
gradson(){alert(3)}
}
});
</script>
</html></pre>
</div>
<p> </p> </div>
<div class="info-pre-next">
<p>
上一篇： <a href="/article/2108778.html">
ASP进阶之文章在线管理更新(11) </a>
</p>
<p>
下一篇： <a href="/article/2108781.html">
整合资源协作创新 云计算打造城市公益新模式 </a>
</p>
</div>
<div class="wz_tuijian">
<p>
推荐阅读 </p>
<ul>
<li>
<a href="/article/2109178.html" target="_blank" title="详谈Android中onTouch与onClick事件的关系(必看)">
<h2>
详谈Android中onTouch与onClick事件的关系(必看) </h2>
</a>
</li>
<li>
<a href="/article/2108997.html" target="_blank" title="Android悬浮窗屏蔽悬浮窗外部所有的点击事件的实例代码">
<h2>
Android悬浮窗屏蔽悬浮窗外部所有的点击事件的实例代码 </h2>
</a>
</li>
<li>
<a href="/article/2108779.html" target="_blank" title="vue事件修饰符">
<h2>
vue事件修饰符 </h2>
</a>
</li>
<li>
<a href="/article/2108628.html" target="_blank" title="腾讯内部人士爆料腾讯老干妈事件细节">
<h2>
腾讯内部人士爆料腾讯老干妈事件细节 </h2>
</a>
</li>
<li>
<a href="/article/2108472.html" target="_blank" title="利用“雪梨枪4p事件”一天引流4万IP的实战案例！">
<h2>
利用“雪梨枪4p事件”一天引流4万IP的实战案例！ </h2>
</a>
</li>
<li>
<a href="/article/2108267.html" target="_blank" title="Vue项目在HTML中使用Animate.cssdonghu动画库的实例讲解">
<h2>
Vue项目在HTML中使用Animate.cssdonghu动画库的实例讲解 </h2>
</a>
</li>
<li>
<a href="/article/2108246.html" target="_blank" title="vue2.0结合webpack的路由配置教程">
<h2>
vue2.0结合webpack的路由配置教程 </h2>
</a>
</li>
<li>
<a href="/article/2108214.html" target="_blank" title="出现 vue arr.some is not a function 报错的解决方案">
<h2>
出现 vue arr.some is not a function 报错的解决方案 </h2>
</a>
</li>
<li>
<a href="/article/2108265.html" target="_blank" title="C#线程学习笔记五：线程同步--事件构造">
<h2>
C#线程学习笔记五：线程同步--事件构造 </h2>
</a>
</li>
<li>
<a href="/article/2108237.html" target="_blank" title="Vue的事件机制详细介绍">
<h2>
Vue的事件机制详细介绍 </h2>
</a>
</li>
</ul>
</div>
</article>
</div>
</main>
<footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body>
</html>