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

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

eg

<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:
  • How to pass custom parameters in vue select change event
  • vue-custom component value transfer example explanation
  • How to customize event parameters in Vue

<<:  How to implement hot deployment and hot start in Eclipse/tomcat

>>:  MySQL 5.7 and above version download and installation graphic tutorial

Recommend

Detailed explanation of two methods to solve a bug in the justify-content: space-between alignment of flex layout

When setting display:flex, justify-content: space...

How to customize more beautiful link prompt effect with CSS

Suggestion: Handwriting code as much as possible c...

Example analysis of interval calculation of mysql date and time

This article uses an example to describe the inte...

Vue+Openlayer batch setting flash point implementation code (based on postrender mechanism)

Effect picture: Implementation code: <template...

Introduction and use of js observer mode

Table of contents I. Definition 2. Usage scenario...

How to Install and Configure Postfix Mail Server on CentOS 8

Postfix is ​​a free and open source MTA (Mail Tra...

Correct use of MySQL partition tables

Overview of MySQL Partitioned Tables We often enc...

Bugs encountered when using mybatis-generator with mysql8.0.3 in IDEA

1. Add the plug-in and add the following configur...

When Nginx is turned on, the port is occupied and prompts: Address already in use

As shown in the figure: Check port usage: sudo ne...

How to purchase and install Alibaba Cloud servers

1. Purchase a server In the example, the server p...

JDBC Exploration SQLException Analysis

1. Overview of SQLException When an error occurs ...

Analysis of three parameters of MySQL replication problem

Table of contents 01 sql_slave_skip_counter param...

Tutorial on building file sharing service Samba under CentOS6.5

Samba Services: This content is for reference of ...

Docker uses dockerfile to start node.js application

Writing a Dockerfile Taking the directory automat...

Website Building Tutorial for Beginners: Learn to Build a Website in Ten Days

The 10-day tutorial uses the most understandable ...