Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或
event.stopPropagation()。
Vue.js通过由点(.)表示的指令后缀来调用修饰符。基本的几种修饰符如下：
.stop
.prevent
.capture
.self
.once
传统js的写法
我们可以与原生js写法对比下
下面的程序使用js实现，是一种不可以阻止表单提交问题写法。
<body>
<div id="app">
<form action="http://www.neuedu.com" method="post" onsubmit="checkForm()">
<input type="submit" value="提交">
</form>
</div>
</body>
<script>
//view model
//传统的js写法
function checkForm() {
alert(1);
//表单验证必须有一个明确的boolean类型返回值
return false;//此方式无法阻止表单提交，必须在onsubmit位置return
}
</script>
修正后，下面可以阻止表单提交
<body>
<div id="app">
<form action="http://www.neuedu.com" method="post" onsubmit="return checkForm()">
<input type="submit" value="提交">
</form>
</div>
</body>
<script>
//view model
//传统的js写法
function checkForm() {
alert(1);
//表单验证必须有一个明确的boolean类型返回值
return false;//此方式无法阻止表单提交，必须在onsubmit位置return
}
</script>
###Vue写法
按照Vue事件修饰的写法，其中阻止提交使用@submit.prevent
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-on:事件修饰符</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<form @submit.prevent action="http://www.neuedu.com" method="post">
<input type="submit" value="提交">
</form>
</div>
</body>
<script>
//view model
new Vue({
el:"#app"
});
</script>
</html>
### @mouseover.stop
鼠标经过事件，阻止事件漏过。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-on:事件修饰符</title>
<style>
#div {
background-color: red;
height: 300px;
width: 300px;
}
</style>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<form @submit.prevent action="http://www.neuedu.com" method="post">
<input type="submit" value="提交">
</form>
<div @mouseover="fun1" id="div">
<textarea @mouseover.stop ="fun2($event)">这是一个文件域</textarea>
</div>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
methods:{
fun1:function () {
alert("鼠标移动到div上");
},
fun2:function (event) {
alert("鼠标移动到textarea上");
}
}
});
</script>
</html>
网友评论