How to use .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. .

.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 to an event for the ordinary

HTML tag, and then adding the .native modifier will not effective. For example:

HTML code

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

JavaScriptCode

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

Result

To someone Listen to an event on the root element of a component, and then add the .native modifier to take effect. 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 use vue to optimize SMS verification performance

How to implement vue-i18n and vue in vue projects element-ui international development

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