v-on instruction monitoring

For more detailed instructions, please refer to: https://cn.vuejs.org/v2/guide/events.html#%E7%9B%91%E5%90%AC%E4%BA%8BBBBBBBBBBB PH6

V-ON is used to monitor the DOM event and trigger some JS code
The specific explanation reference document is worth noting that the instructions in the event modifier:

<!-- Prevent the incident from continuing to spread, stop bubbling -->
<a v-on:click.stop="doThis"></a>

<!--  Submit the incident no longer re -loaded the page, the default is stopped, similar to the preventdeFault function -->
<form v-on:submit.prevent="onSubmit"></form>

<!--  The modifier can be connected in series, and the two functions are used together -->
<a v-on:click.stop.prevent="doThat"></a>

<!--  Only the modifier -->
<form v-on:submit.prevent></form>

<!--  Use event capture mode when adding event monitoring -->
<!--  That is, the event triggered by the child element is processed here first, and then it is handed over to the child element for processing -->
<div v-on:click.capture="doThis">...</div>

<!--  Just be in Event.Target is a trigger processing function when the current element itself -->
<!--  That is, the event is not triggered from the child element -->
<div v-on:click.self="doThat">...</div>

Intelligent Recommendation

Nine, v-model instruction

V-model command The v-model directive, I understand as the binding data source. Binding data to specific form elements makes it easy to implement two-way data binding....

V-bind instruction

The v-bind directive is used to set properties for html tags. Basic usage This way<div id="myid">text</div> Class attribute binding Pass in one or more classes at the same time: ...

V-cloak does not require an expression. It will be removed from the bound html element when the vue instance finishes compiling. It is often used in conjunction with display:none; note: At this time, ...

Vue-instruction v-if

index.html app.js...

More Recommendation

Instruction 3 - (v-on)

First, v-on is used to bind events. The value is recognized as a variable, corresponding to the Vue object's method, which can be abbreviated as (@). There is no way to pass the parameter. The default...

Vue instruction v-show

When I get to v-show, I have to say that his old man and v-if are broken. I will try to pull it first: V-if If the condition is false, then in the generated HTML statement, the label with the conditio...

V-if of Vue instruction

V-if sees the name, it is similar to our if function in java If in java (conditions are established) {execution statement}; only Vue replaces the execution statement in java with the content of the ta...

Vue v-slot instruction

In 2.6.0, vue introduced a new unified syntax for named slots and scope slots (iev-slot instruction). Currently slot versus slot-scope These two features have not been removed yet. Named slot Abbrevia...

v-model instruction

v-bind Characteristic called instructions. With the prefix instruction v-, to indicate that they are provided special characteristics Vue. v-bind:title = “message” The message property tit...