Vue.js中.native修飾因子使用詳解

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

修飾符（Modifiers）是以半角句號 . 指明的特殊後綴，用於指出一個指令應該以特殊方式綁定。這篇文章跟大家介紹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中文網其它相關文章！

推薦閱讀：

微信小程式中圖片如何自適應機型高度

jQuery建立自訂選擇器步驟詳解

怎麼取得Url中Get參數

#

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