Vue learn 6Vue event modifiers (once, prevent, stop)

Keywords: Vue Javascript npm

<! -- 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">
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src=""></script>
    <!-- vue-app It's a root container. -->
    <div id="vue-app">
        <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>
        <a v-on:click.prevent="alert" href=" Com "> Baidu again</a>
    <script src="app.js" type="text/javascript"></script>


'use strict';
// Instantiate vue object
new Vue({
    el: "#vue-app",
    data: {
        age: 30,
        x: 0,
        y: 0
    methods: {
        add: function(inc){
        subtract: function(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');


Posted by Nicholas Reed on Mon, 02 Dec 2019 01:15:27 -0800