這次帶給大家如何使用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-i18n和element-ui國際化開發
以上是如何使用Vue.js中.native修飾符的詳細內容。更多資訊請關注PHP中文網其他相關文章!