How to use .native modifier in Vue.js-JS Tutorial-php.cn

How to use .native modifier in Vue.js

php中世界最好的语言

Release： 2018-06-02 10:41:48

Original

1365 people have browsed it

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>

Copy after login

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>

Copy after login

JavaScriptCode

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

Copy after login

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>

Copy after login

JavaScript code

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

Copy after login

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!