Detailed explanation of the use of .native modifier in Vue.js

This time I will bring you a detailed explanation of the use of .native modifiers in Vue.js. What are the precautions for using .native modifiers 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 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 adapt images to model height in WeChat applet

Create a custom selector with jQuery Detailed explanation of steps

How to obtain the Get parameters in Url

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