Home > Web Front-end > JS Tutorial > body text

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

php中世界最好的语言
Release: 2018-04-27 09:20:34
Original
2661 people have browsed it

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>
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!

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!