lichen360 【VUE教程】click点击事件-修饰符教程
这里修饰符写了三个，但是代码中小H只演示了两个，最后一个也是同样的道理加到@click 事件监听后即刻，这个很少用到，一般网站也不会说只点击一次就行了。
这里已经演示的两个知识点很重要，比起用jQuery来写的话，要简单很多。直接在@click后加上修饰符即刻使用，简单易懂。
1、这里我写了个大的DIV和一个包含在DIV里的一个按钮，为了好看出效果我给了背景色。（如果常规来说，点击按钮会触发两个事件，但是这里用到.top就可以阻止冒泡，只显示自己当前的鼠标事件儿）
2、简单写了一个表单，里面提交默认会跳转到当前目录，提交后页面也会跳转，但是有时候我们不需要他提交到某个页面，想在当前页就做出相应或者提示，那么就用到我们的.prevent修饰符。当前页即可用tjclick方法做出自己想要的相关功能。
附上代码：更多教程请关注毛毛博客资源网此栏目，或站内搜索对应教程，也可假如QQ讨论群，直接搜索毛毛博客资源网便可找到，此类教程均为原创教程，简单易懂。勿抄袭。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点击的修饰符，这课很重要，非常常用</title>
</head>
<body>
<!--
.prevent 是阻止 默认行为
.top 是阻止冒泡
.once 只显示一次点击效果
-->
<div id="app">
<div @click="divall()" style="height: 100px; width: 600px; background-color: darkgreen;">
<p>这里是一个div里面的内容</p>
<input @click.stop="divdj()" type="submit" value="这是一个div里的按钮">
</div>
<br /><br /><br /><br />
<form action="/">
<input type="text">
<input type="submit" value="提交" @click.prevent="tjclick()">
</form>
</div>
<script src="../vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
},
methods: {
tjclick(){
console.log('提示信息');
},
divdj(){
console.log('这是点击按钮的提示！')
},
divall(){
console.log('这个是整个div的点击提示！！！')
}
}
});
</script>
</body>
</html>
如下载链接失效，请联系管理员处理【QQ：941007525，微信:style028666】
免责申明：
本站资源均来源于互联网，如有侵权请联系站长！将第一时间删除
本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
资源仅供学习参考请勿商用或其它非法用途，否则一切后果用户自负！
毛毛博客 » 【VUE教程】click点击事件-修饰符教程
免责申明：
本站资源均来源于互联网，如有侵权请联系站长！将第一时间删除
本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
资源仅供学习参考请勿商用或其它非法用途，否则一切后果用户自负！
毛毛博客 » 【VUE教程】click点击事件-修饰符教程
