<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<button v-on="{mouseenter:Onenter,mouseleave:Onleave}" v-on:click="Onclick">Click</button>
<form v-on:keyup.enter="onEnter" v-on:submit="onSubmit($event)">
<!--<!–<form v-on:submit.prevent="onSubmit"> –> 1.-->
<!--<!–<form v-on:submit.stop="onSubmit"> –> 取消冒泡事件-->
<input type="text">
<button type="submit">提交</button>
</form>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
methods:{
Onenter:function () {
console.log("clicked")
},
Onenter:function () {
console.log("entered")
},
Onleave:function () {
console.log("leaved")
},
onSubmit:function (e) {
e.preventDefault(); //取消时间的默认动作，此处取消提交的刷新页面操作，与1.处的操作相同
console.log("submitted")
},
onEnter:function () {
console.log("Key Enter Pressed")
}
}
})
</script>
</body>
</html>
v-on: 可以使用 @代替，即v-on:submit="" ===> @submit=""