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