How to use the .native modifier in Vue.js

This time I will show you how to use the .native modifier in Vue.js, and what are the precautions for using the .native modifier in Vue.js. The following is a practical case, let's take a look.

Modifiers are special suffixes indicated by a half-width period ., used to indicate that a command should be bound in a special way. This article will introduce you to the .native modifier in Vue.js. Friends who are interested should take a look.

.native modifier

The official explanation of .native modifier is:

Sometimes, you may want to add Listen to a native event on the element. You can use the v-on modifier .native . For example:

<my-component v-on:click.native="doTheThing"></my-component>

A simple understanding is:

Listen an event for a normal HTML tag, and then adding the .native modifier will not work. For example:

HTML code

<p id="app">
　　<a href="#" rel="external nofollow" v-on:click.native="clickFun">click me</a>
</p>

JavaScript code

new Vue({
　　el: '#app',
　　methods: {
　　　　clickFun: function(){
　　　　　　console.log("message: success")
　　　　}
　　}
})

The result

is given to the root element of a component Listen to an event and then add the .native modifier to make it work. For example:

HTML code

<p id="app">
　　<my-component v-on:click.native="clickFun"></my-component>
</p>

JavaScript code

Vue.component('my-component', {
　　template: `click me`
})
new Vue({
　　el: '#app',
　　methods: {
　　　　clickFun: function(){
　　　　　　console.log("message: success")
　　　　}
　　}
})

Result

I believe you have mastered it after reading the case in this article For more exciting methods, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to switch the national language in Vue

##How to develop the vue project internationally

The above is the detailed content of How to use the .native modifier in Vue.js. For more information, please follow other related articles on the PHP Chinese website!