Summary of event handling in Vue.js front-end framework

1. v-on event monitoring

To listen to DOM events, use the v-on directive. This directive is usually used directly in the template and executes some JavaScript code when the event is triggered.

Basic usage of the v-on directive

(1) Use the v-on directive in HTML, followed by all native event names. The basic usage is as follows:

<button v-on:click="show">Show</button>

Bind the click event to the show method. When you click the "Show" button, the show() method is executed. The show() method is defined in the Vue instance.

(2) When using the v-on directive, Vue.js provides a shorthand form of the v-on directive, “@”. The above code can be rewritten as follows:

<button @click="show">Show</button>

(3) The simple usage of the v-on directive is as follows:

<div id="box">
			<!--Basic usage of v-on -->
			<button v-on:click="count1++">Count</button>
			<p>The button was clicked {{count1}} times</p>
			<!--Simple usage of v-on-->
			<button @click="count2++">Count</button>
			<p>The button was clicked {{count2}} times</p>
</div>
		   <script type="text/javascript">
				var vm = new Vue({
					el : '#box',
					data:{
						count1:0,
						count2:0
					}
					
				});
			</script>

The simple usage of the v-on directive is shown below:

Event handling methods

When using the v-on directive, you need to bind an event to a method through the v-on directive, and the bound method is defined as an event handler in the methods option. The sample code is as follows:

<div id="box">
			<button v-on:click="show">Show</button>
		</div>
		   <script type="text/javascript">
				var vm = new Vue({
					el : '#box',
					data:{
						name:'Xiaoming',
						age: 29,
						occupation:'actor'
					},
					methods:{
						show:function(){
							alert('Name:'+this.name+'Age:'+this.age+'Occupation:'+this.occupation);
						}
					}
					
				});
			</script>

The result of the v-on directive binding the click event to the display method is as follows:

Using inline JavaScript statements

(1) In addition to binding directly to a method, the v-on directive also supports inline JavaScript statements, but only one statement can be used. The sample code is as follows:

<div id="box">
			<button v-on:click="show('Tomorrow's Star')">Show</button>
		</div>
		   <script type="text/javascript">
				var vm = new Vue({
					el : '#box',
					methods:{
						show:function(message){
							alert('Message: ' + message);
						}
					}
					
				});

The result of using inline JavaScript statements is shown below:

(2) When you need to obtain the native DOM event object in an inline statement, you can pass a special variable $event into the method. The sample code is as follows:

<div id="box">
			<a href="http://www.baidu.com" rel="external nofollow" v-on:click="show('Tomorrow's Star',$event)">{{message}}</a>
		</div>
		   <script type="text/javascript">
				var vm = new Vue({
					el : '#box',
					data:{
						message:'Hello'
					},
					methods:{
						show:function(message1,e){
							e.preventDefault();
							alert(message1);
						}
					}
					
				});
			</script>

In addition to passing a value to the show() method, a special variable $event is also passed. The function of this variable is to process the native DOM event when the hyperlink is clicked, and apply the preventDefault() method to prevent the hyperlink from jumping. When you click the "Hello" hyperlink, a dialog box will pop up and the running result is as shown in the figure below:

2. Event handling modifiers

The so-called modifier is a special suffix indicated by a half-width period. Vue.js provides multiple modifiers for the v-on directive, including event modifiers and key modifiers.
Event modifiers <br /> In event handlers, preventDefault() or stopPropagation() methods are often called to implement specific functions. To handle these DOM event details, Vue.js provides event modifiers for the v-on directive. Commonly used event modifiers and their descriptions are shown in the following table:

Modifiers can be used in series, and you can use only modifiers without binding event handling methods. Event modifiers are used as follows:

<!-- Prevent the click event from propagating further -->
<a v-on:click.stop="doSomething"></a>
<!-- Prevent the form from submitting by default -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- The handler function is called only when the event is triggered from the current element itself -->
<div v-on:click.self="doSomething"></div>
<!-- Modifier chaining, preventing the form from submitting by default and preventing bubbling-->
<a v-on:click.stop.prevent="doSomething"></a>
<!-- Only modifiers, no event binding -->
<form v-on:submit.prevent></form>

The following is a sample code that applies a .stop modifier to stop event bubbling:

<div id="box">
			<div v-on:click="show('div event trigger')">
				<button v-on:click.stop="show('button event trigger')">Show</button>
			</div>
		</div>
		   <script type="text/javascript">
				var vm = new Vue({
					el : '#box',
					methods:{
						show:function(message){
							alert(message);
						}
					}
					
				});
			</script>

When you click the "Show" button, only the click event of that button will be triggered. If the .stop modifier is not used in the button, when the "Show" button is clicked, not only the click event of the button will be triggered, but also the click event of the div will be triggered, and two dialog boxes will pop up. The running results are shown in the figure below:
(1) Use the .stop modifier:

(2) Click OK without using the .stop modifier:

Key Modifiers

In addition to event modifiers, Vue.js also provides key modifiers for the v-on directive to listen for key presses in keyboard events. When a keyboard event is triggered, the keyCode value of the key needs to be detected. The code is as follows:

<input v-on:keyup.13="submit">

Apply the v-on directive to monitor the keyboard's keyup event. The keyCode value of the Enter key on the keyboard is 13. Therefore, after entering content in the text box, the submit() method will be called when the Enter key is clicked.
For the code shown above, you can use its alias. The Enter key alias is Enter. The code is as follows:

<input v-on:keyup.enter="submit">

The aliases provided by Vue.js for commonly used buttons are shown in the following table:

Note: We will continue to follow up on the Vue.js front-end framework: form control binding in the future. I hope you will support and pay attention to it.

This concludes this article about the event handling summary of the Vue.js front-end framework. For more relevant Vue.js event handling content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!