詳解Vue.js中.native修飾符
更新時間：2018年04月24日 14:07:03 作者：一個點的未來
這篇文章主要介紹了Vue.js中.native修飾符,給普通的HTML標簽監(jiān)聽一個事件，之后添加 .native 修飾符是不會起作用的。需要的朋友可以參考下
修飾符（Modifiers）是以半角句號 . 指明的特殊后綴，用于指出一個指令應(yīng)該以特殊方式綁定。這篇文章給大家介紹Vue.js中.native修飾符，感興趣的朋友一起看看吧。
.native修飾符
官方對.native修飾符的解釋為：
有時候，你可能想在某個組件的根元素上監(jiān)聽一個原生事件?？梢允褂?v-on 的修飾符 .native 。例如：
<my-component v-on:click.native="doTheThing"></my-component>
簡單點理解就是：
給普通的HTML標簽監(jiān)聽一個事件，之后添加 .native 修飾符是不會起作用的。例如：
HTML代碼
<div id="app"> <a href="#" rel="external nofollow" v-on:click.native="clickFun">click me</a> </div>
JavaScript代碼
new Vue({
el: '#app',
methods: {
clickFun: function(){
console.log("message: success")
}
}
})
結(jié)果
給某個組件的根元素上監(jiān)聽一個事件，之后添加 .native 修飾符就會起作用了。例如：
HTML代碼
<div id="app"> <my-component v-on:click.native="clickFun"></my-component> </div>
JavaScript代碼
Vue.component('my-component', {
template: `<a href='#'>click me</a>`
})
new Vue({
el: '#app',
methods: {
clickFun: function(){
console.log("message: success")
}
}
})
結(jié)果
總結(jié)
以上所述是小編給大家介紹的Vue.js中.native修飾符，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
Vue簡易注冊頁面+發(fā)送驗證碼功能的實現(xiàn)示例
本文主要介紹了Vue簡易注冊頁面+發(fā)送驗證碼功能的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要介紹了vue使用layui框架，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
Vue全局監(jiān)測錯誤并生成錯誤日志實現(xiàn)方法介紹
在做完一個項目后，之后的維護尤為重要。這時，如果項目配置了錯誤日志記錄，這樣能大大減少維護難度。雖然不一定能捕獲到全部的錯誤，但是一般的錯誤還是可以監(jiān)測到的。這樣就不用測試人員去一遍一遍復(fù)現(xiàn)bug了2022-10-10
在 Vue.js 中,我們可以通過自定義指令的方式來實現(xiàn)拖拽功能,使得代碼更加模塊化和可復(fù)用,本文將介紹如何基于 Vue.js 實現(xiàn)一個簡易的拖拽指令,感興趣的朋友跟隨小編一起看看吧2024-04-04
Day.js庫本身專注于簡化JavaScript日期和時間的操作,它的API設(shè)計直觀,且功能強大,可以方便地格式化日期、添加或減去時間間隔、比較日期等,本文主要介紹了Vue利用dayjs封裝實現(xiàn)時間實時刷新,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了Vue3.0在組件外使用VueI18n的情況，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了Vue SPA單頁應(yīng)用首屏優(yōu)化實踐，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
關(guān)于vue-cli 3配置打包優(yōu)化要點（推薦）
這篇文章主要介紹了vue-cli 3配置打包優(yōu)化要點，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Bootstrap+Vue滑動監(jiān)聽Scrollspy實現(xiàn)餐廳餐品展示
本文主要介紹了Bootstrap+Vue滑動監(jiān)聽Scrollspy實現(xiàn)餐廳餐品展示，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
vue如何實現(xiàn)清空this.$route.query的值
這篇文章主要介紹了vue如何實現(xiàn)清空this.$route.query的值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09