Binding event Listening Instruction: v-on

Abbreviation: @ (grammar sugar)

Example:

<el-button @click="add('11111111111111')" style="background-color: red">
    <el-button @click="add('222222222222222222')" style="background-color: black">
        <el-button @click="add('33333333333333333')">Button</el-button>
    </el-button>
</el-button>

 

When clicking the button in the white area, all three button events will be triggered, that is, the outer element will also trigger events, but the trigger sequence is from inside to outside.

When you click the black area, the black area and red area will be triggered.

When clicking on the red area, as long as the red area is triggered.

 

 

Modifier for v-on events:

1.    . stop: prevent event bubbling, that is, prevent the triggering of outer element events starting from this layer

<el-button @click="add('11111111111111')" style="background-color: red">
    <el-button @click.stop="add('222222222222222222')" style="background-color: black">
        <el-button @click="add('33333333333333333')">Button</el-button>
    </el-button>
</el-button>

When clicking on the black area, only the events in the black area are triggered, and the events in the outer red area cannot be triggered.

When the white button is clicked, the event in the black area is triggered, but the event in the outer red area cannot be triggered.

 

2.     . self: the event can only be triggered when the event is in the element itself

<el-button @click="add('11111111111111')" style="background-color: red">
    <el-button @click.self="add('222222222222222222')" style="background-color: black">
        <el-button @click="add('33333333333333333')">Button</el-button>
    </el-button>
</el-button>

When a white button is clicked, the black area event cannot be triggered because the black area itself is not clicked (nor in the element)

When the black area is clicked, an event is triggered

3.  . Capture: when adding event listeners, the event capture mode is used, that is, the event is triggered first. When multiple event listeners use the event capture mode, the outermost event is triggered first, from the outside to the inside

<el-button @click="add('11111111111111')" style="background-color: red">
    <el-button @click.capture="add('222222222222222222')" style="background-color: black">
        <el-button @click="add('33333333333333333')">Button</el-button>
    </el-button>
</el-button>

When the black button is clicked, the event is triggered preferentially because the event capture mode is used. Then, after the event listener using event capture mode is triggered, other events are triggered in order from the inside out.

 

<el-button @click.capture="add('11111111111111')" style="background-color: red">
    <el-button @click.capture="add('222222222222222222')" style="background-color: black">
        <el-button @click="add('33333333333333333')">Button</el-button>
    </el-button>
</el-button>

When the red area and the black area use the event capture mode, the event listener using the event capture mode is triggered from the outside to the inside, and other events are triggered from the inside to the outside.

 4.   . prevent: block default events

For example:

<a href="https://www.csdn.net/" @click.prevent="add('33333333333333333')">dddddddddddd</a>

When clicking this a tag, the route will not jump, but the click event we set can still be executed (without. prevent, although the click event we set can also be executed, the route will jump)

5.    . Once: the event is triggered only once

As the name suggests, it's easy to understand

<el-button @click="add('11111111111111')" style="background-color: red">
    <el-button @click.once="add('222222222222222222')" style="background-color: black">
        <el-button @click="add('33333333333333333')">Button</el-button>
    </el-button>
</el-button>

When we first click on the white area.

When we click on the white area for the second time, because the black area event has been triggered once.

 

 

Modifiers for v-on events can also be mixed

<el-button @click="add('11111111111111')" style="background-color: red">
    <el-button @click.self.stop="add('222222222222222222')" style="background-color: black">
        <el-button @click="add('33333333333333333')">Button</el-button>
    </el-button>
</el-button>

When you click the black button, it is executed The stop operation is} executed again self operation.

There are also more event modifiers, but I haven't used them yet.