<! -- prevent click event from propagating -- > <a v-on:click.stop="doThis"></a> <! -- submit event no longer reloads the page, preventing jump to another page -- > <form v-on:submit.prevent="onSubmit"></form> <! -- click event will only trigger once -- > <a v-on:click.once="doThis"></a>
. stop prevents bubbling, which is equivalent to stopPropagation() in javascript;
. once event will only trigger once
. prevent prevent page Jump, such as a tag jump
Move to the span tab and stop;
Click to increase one year old, it will only trigger once
Block jump of a tag page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Vue.js</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<!-- vue-app It's a root container. -->
<div id="vue-app">
<h1>Event</h1>
<button @click.once="add(1)">One year old</button>
<button v-on:click="subtract(1)">Reduction of one year old</button>
<button @dblclick="add(10)">Ten years old</button>
<button v-on:dblclick="subtract(10)">Minus ten years old</button>
<p>His age is{{age}}</p>
<div id="canvas" v-on:mousemove="updateXY">
<span @mousemove.stop="">By event modifier stop Prevent bubbling events</span>
{{x}}, {{y}} -
<span v-on:mousemove="stopMoving">stopMoving</span>
</div>
<a v-on:click.prevent="alert" href="http://Www.baidu. Com "> Baidu again</a>
</div>
<script src="app.js" type="text/javascript"></script>
</body>
</html>app.js
'use strict';
// Instantiate vue object
new Vue({
el: "#vue-app",
data: {
age: 30,
x: 0,
y: 0
},
methods: {
add: function(inc){
this.age+=inc;
},
subtract: function(dec){
this.age-=dec;
},
updateXY: function(event){
this.x = event.offsetX;
this.y = event.offsetY;
},
stopMoving: function(event){
event.stopPropagation();//Js prevent bubbling event
},
alert: function(){
alert('Stop jumping');
}
}
});