vue事件修饰符
程序员文章站
2022-06-14 09:47:04
/* 默认事件触发顺序：冒泡 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/1388578.html">
苏代是怎么挑起挑起齐国与多国生死战的? </a>
</p>
<p>
下一篇： <a href="/article/1388580.html">
Centos7下nginx的安装与配置 </a>
</p>
</div>
<div class="wz_tuijian">
<p>
推荐阅读 </p>
<ul>
<li>
<a href="/article/2074226.html" target="_blank" title="JavaScript 事件对内存和性能的影响">
<h2>
JavaScript 事件对内存和性能的影响 </h2>
</a>
</li>
<li>
<a href="/article/2074175.html" target="_blank" title="使用Vue开发自己的Chrome扩展程序过程详解">
<h2>
使用Vue开发自己的Chrome扩展程序过程详解 </h2>
</a>
</li>
<li>
<a href="/article/2074193.html" target="_blank" title="Vue中对拿到的数据进行A-Z排序的实例">
<h2>
Vue中对拿到的数据进行A-Z排序的实例 </h2>
</a>
</li>
<li>
<a href="/article/2074120.html" target="_blank" title="vue解决弹出蒙层滑动穿透问题的方法">
<h2>
vue解决弹出蒙层滑动穿透问题的方法 </h2>
</a>
</li>
<li>
<a href="/article/2074132.html" target="_blank" title="基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法">
<h2>
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法 </h2>
</a>
</li>
<li>
<a href="/article/2074097.html" target="_blank" title="vue+Element-ui实现分页效果实例代码详解">
<h2>
vue+Element-ui实现分页效果实例代码详解 </h2>
</a>
</li>
<li>
<a href="/article/2074100.html" target="_blank" title="express+vue+mongodb+session 实现注册登录功能">
<h2>
express+vue+mongodb+session 实现注册登录功能 </h2>
</a>
</li>
<li>
<a href="/article/2074048.html" target="_blank" title="vue单页缓存方案分析及实现">
<h2>
vue单页缓存方案分析及实现 </h2>
</a>
</li>
<li>
<a href="/article/2074084.html" target="_blank" title="vue打包之后生成一个配置文件修改接口的方法">
<h2>
vue打包之后生成一个配置文件修改接口的方法 </h2>
</a>
</li>
<li>
<a href="/article/2074066.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>