Vue implements click and passes in event objects and custom parameters at the same time

Just pass in custom parameters

HTML

<div id="app">
 <button @click="tm(123)">ddddd</button>
</div>

JS code

new Vue({
  el:'#app',
 methods:{
   tm:function(e){
    console.log(e);
  }
 }
})

Just pass in the event object

HTML

<div id="app">
 <button @click="tm">ddddd</button>
</div>

JS code

new Vue({
  el:'#app',
 methods:{
   tm:function(e){
    console.log(e);
  }
 }
})

Pass in event object and custom parameters at the same time

HTML

<div id="app">
 <button @click="tm($event,123)">ddddd</button>
</div>

JS code

new Vue({
  el:'#app',
 methods:{
   tm:function(e,value){
    console.log(e);
    console.log(value);
  }
 }
})

Supplement: vue common events v-on:click and event objects, event bubbling, event default behavior

In fact, v-on can be followed by not only click events but also other events, and the usage is similar. For example: v-on:click/mouseout/mouseover/mousedown.......

The following click is an example

Note: All v-on can be abbreviated as @, for example, v-click can be abbreviated as @click

1. Listening for events

You can use the v-on directive to listen for DOM events and run some JavaScript code when they are triggered. Generally speaking, it is to listen to DOM to trigger some operations. The actions (js) executed after these operations (such as clicks) are triggered can be written directly behind

v-on:click="item+=1"

eg:

<template>
 <div >
  <input type="button" value="clickme" v-on:click="item+=1"/>
  <div>{{item}}</div>
 </div>
</template>
 
<script>
export default {
 name: 'HelloWorld',
 data () {
  return {
  Item:1
  }
 }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 
</style>

result:

You can see that the bound value increases by 1 each time you click it. That is to say, you can put the js operation after the event trigger. But sometimes when the logic is too complex, writing it in will cause confusion, and the view and logic will be confused. So click can be followed by a method, and all processing logic methods can be encapsulated in a function and called when clicked.

2. Event handling method

v-on:click="greet"

For example:

<template>
 <div >
  <input type="button" value="clickme" v-on:click="greet"/>
  <div>{{res}}</div>
 </div>
</template>
 
<script>
export default {
 name: 'HelloWorld',
 data () {
  return {
   name : 1,
   res:""
  }
 },
 methods:{
  greet: function () {
   // `this` in the method refers to the current Vue instance this.res = 'Hello ' + this.name + '!';
  }
 }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 
</style>

Effect:

You can see that after clicking, the js logic in the greet method is executed.

3. Time binding method with parameters:

Same as above, the only difference is that it carries parameters

 v-on:click="greet(name)"

<template>
 <div >
  <input type="button" value="clickme" v-on:click="greet(name)"/>
  <div>{{res}}</div>
 </div>
</template>
 
<script>
export default {
 name: 'HelloWorld',
 data () {
  return {
   name : 1,
   res:""
  }
 },
 methods:{
  greet: function (reccept) {
   // `this` in the method refers to the current Vue instance this.res = 'Hello ' + reccept + 1 + '!';
  }
 }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 
</style>

The effect is consistent. The method can also be called multiple times in one method.

4. Methods in inline processors

That is to say, calling other methods in the method, the other methods here can be js native methods such as preventing bubbling, etc., or they can be custom methods

v-on:click="greet(name,$event)"

eg:

<template>
 <div >
  <input type="button" value="clickme" v-on:click="greet(name,$event)"/>
  <div>{{res}}</div>
 </div>
</template>
 
<script>
export default {
 name: 'HelloWorld',
 data () {
  return {
   name : 1,
   res:""
  }
 },
 methods:{
  greet: function (reccept,event) {
   if (reccept===1) this.say()
  },
  say:function () {
   this.res="I called"
  }
 }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 
</style>

Effect:

5. Event Object

$event gets the event object of the current click event, for example, click gets the DOM event object information of the current click

v-on:click="greet($event)"

eg:

<template>
 <div >
  <input type="button" value="clickme" v-on:click="greet($event)"/>
 </div>
</template>
 
<script>
export default {
 name: 'HelloWorld',
 data () {
  return {
   hide : true
  }
 },
 methods:{
  greet: function (ev) {
  alert(ev.clientX)
  }
 }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 
</style>

Effect:

6. Event Bubbling

When the event is not prevented from bubbling, it will bounce twice

<template>
 <div >
  <div @click="show1($event)">
   <div @click="show2($event)">Click me</div>
  </div>
 </div>
</template>
 
<script>
export default {
 name: 'HelloWorld',
 data () {
  return {
   hide : true
  }
 },
 methods:{
  show1: function (ev) {
   alert(1)
  },
  show2: function (ev1) {
   alert(2)
  }
 }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 
</style>

But if you stop bubbling, it will only pop once

eg: Native js prevents bubbling

ev1.cancelBubble=true

<template>
 <div >
  <div @click="show1($event)">
   <div @click="show2($event)">Click me</div>
  </div>
 </div>
</template>
 
<script>
export default {
 name: 'HelloWorld',
 data () {
  return {
   hide : true
  }
 },
 methods:{
  show1: function (ev) {
   alert(1)
  },
  show2: function (ev1) {
    ev1.cancelBubble=true
   alert(2)
 
  }
 }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 
</style>

So what about the bubbling prevention method encapsulated by Vue itself?

@click.stop="show2()"

eg:

<template>
 <div >
  <div @click="show1()">
   <div @click.stop="show2()">Click me</div>
  </div>
 </div>
</template>
 
<script>
export default {
 name: 'HelloWorld',
 data () {
  return {
   hide : true
  }
 },
 methods:{
  show1: function () {
   alert(1)
  },
  show2: function (ev1) {
   alert(2)
  }
 }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 
</style>

7. Prevent default behavior:

For example: Right-clicking will bring up the default menu as follows

<template>
 <div >
  <div>
   <div @contextmenu="show2()">Right click me</div>
  </div>
 </div>
</template>
 
<script>
export default {
 name: 'HelloWorld',
 data () {
  return {
   hide : true
  }
 },
 methods:{
  show2: function (ev1) {
   alert(2)
 
  }
 }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 
</style>

Effect:

Then there is a way to prevent the default behavior

ev1.preventDefault();

eg:

<template>
 <div >
  <div>
   <div @contextmenu="show2($event)">Right click me</div>
  </div>
 </div>
</template>
 
<script>
export default {
 name: 'HelloWorld',
 data () {
  return {
   hide : true
  }
 },
 methods:{
  show2: function (ev1) {
   alert(2);
   ev1.preventDefault();
  }
 }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 
</style>

The default menu will not be displayed after clicking (PS 360 browser right click is invalid)

The method encapsulated in vue to prevent default behavior:

@contextmenu.prevent="show2()"

eg:

<template>
 <div >
  <div>
   <div @contextmenu.prevent="show2()">Right click me</div>
  </div>
 </div>
</template>
 
<script>
export default {
 name: 'HelloWorld',
 data () {
  return {
   hide : true
  }
 },
 methods:{
  show2: function (ev1) {
   alert(2);
  }
 }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 
</style>

8. Other event modifiers

The usage is the same, so I won't repeat it.

.capture

.self

.once

<!-- Prevent the click event from propagating further -->
<a v-on:click.stop="doThis"></a>
<!-- Submit event no longer reloads the page -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- Modifiers can be chained -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- modifiers only -->
<form v-on:submit.prevent></form>
<!-- Use event capture mode when adding event listeners -->
<!-- That is, the events triggered by the element itself are processed here first, and then handed over to the internal elements for processing-->
<div v-on:click.capture="doThis">...</div>
<!-- Trigger the handler only when event.target is the current element itself -->
<!-- That is, the event is not triggered from the internal element-->
<div v-on:click.self="doThat">...</div>

When using modifiers, order is important; the corresponding code will be generated in the same order. Therefore, using @click.prevent.self will prevent all clicks, while @click.self.prevent will only prevent clicks on the element itself.

2.1.4 Added

<!-- Click event will only fire once-->
<a v-on:click.once="doThis"></a>

Unlike other modifiers that only work on native DOM events, the .once modifier can also be used on custom component events. If you haven't read the documentation about the component yet, don't worry about it now.

<!-- the scroll event will not cancel the default scroll behavior -->
<div v-on:scroll.passive="onScroll">...</div>

Vue provides additional .passive modifiers for these modifiers to improve mobile performance.

For example, when scrolling, the browser will trigger the scrolling after the entire event is processed, because the browser does not know whether the event has been called event.preventDefault() in its processing function. The .passive modifier is used to further tell the browser that the default behavior of this event will not be canceled.

Do not use .passive and .prevent together. Passive handlers cannot prevent the default event behavior.

The above is my personal experience. I hope it can give you a reference. I also hope that you will support 123WORDPRESS.COM. If there are any mistakes or incomplete considerations, please feel free to correct me.

You may also be interested in: