首頁 >web前端 >js教程 >如何使用Vue.js中.native修飾符

如何使用Vue.js中.native修飾符

php中世界最好的语言
php中世界最好的语言原創
2018-06-02 10:41:481420瀏覽

這次帶給大家如何使用Vue.js中.native修飾符,使用Vue.js中.native修飾符的注意事項有哪些,下面就是實戰案例,一起來看一下。

.native修飾符

官方對.native修飾符的解釋為:

  有時候,你可能會想在某個元件的根元素上監聽一個原生事件。可以使用 v-on 的修飾符 .native 。例如:

<my-component v-on:click.native="doTheThing"></my-component>

簡單點理解就是:

給普通的HTML標籤監聽一個事件,之後加上.native 修飾符是不會起作用的。例如:

HTML程式碼

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

 JavaScript程式碼

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

結果

給某個元件的根元素上監聽一個事件,之後加入.native 修飾符就會起作用了。例如:

HTML程式碼

<p id="app">
  <my-component v-on:click.native="clickFun"></my-component>
</p>

JavaScript程式碼

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

結果

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

如何使用vue實作簡訊驗證效能最佳化

如何實作vue專案中vue-i18n和element-ui國際化開發

以上是如何使用Vue.js中.native修飾符的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn