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!