詳解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前端實(shí)現(xiàn)token的無(wú)感刷新3種方案(refresh_token)
這篇文章主要給大家介紹了關(guān)于VUE前端實(shí)現(xiàn)token的無(wú)感刷新3種方案(refresh_token)的相關(guān)資料,為了提供更好的用戶體驗(yàn),我們可以通過(guò)實(shí)現(xiàn)Token的無(wú)感刷新機(jī)制來(lái)避免用戶在使用過(guò)程中的中斷,需要的朋友可以參考下2023-11-11
vue3手動(dòng)設(shè)置滾動(dòng)條位置自動(dòng)定位功能
這篇文章介紹了vue3手動(dòng)設(shè)置滾動(dòng)條位置自動(dòng)定位功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-12-12
功能強(qiáng)大的vue.js拖拽組件安裝應(yīng)用
這篇文章主要為大家介紹了功能強(qiáng)大的vue.js拖拽組件安裝應(yīng)用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
vue3+ElementPlus封裝函數(shù)式彈窗組件詳解
這篇文章主要為大家詳細(xì)介紹了如何利用vue3和ElementPlus封裝函數(shù)式彈窗組件，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下2023-08-08
專業(yè)級(jí)Vue?多級(jí)菜單設(shè)計(jì)
這篇文章主要為大家介紹了專業(yè)級(jí)的Vue?多級(jí)菜單設(shè)計(jì)實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
vue2.0路由切換后頁(yè)面滾動(dòng)位置不變BUG的解決方法
下面小編就為大家分享一篇vue2.0路由切換后頁(yè)面滾動(dòng)位置不變BUG的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
vue中計(jì)算屬性computed理解說(shuō)明包括vue偵聽(tīng)器,緩存與computed的區(qū)別
這篇文章主要介紹了對(duì)vue中計(jì)算屬性computed理解說(shuō)明包括vue偵聽(tīng)器,緩存與computed的區(qū)別,需要的朋友可以參考下2022-05-05
用Vue實(shí)現(xiàn)頁(yè)面訪問(wèn)攔截的方法詳解
大家在做前端項(xiàng)目的時(shí)候,大部分頁(yè)面, 游客都可以直接訪問(wèn) , 如遇到 需要登錄才能進(jìn)行的操作,頁(yè)面將提示并跳轉(zhuǎn)到登錄界面,那么如何才能實(shí)現(xiàn)頁(yè)面攔截并跳轉(zhuǎn)到對(duì)應(yīng)的登錄界面呢,本文小編就來(lái)給大家介紹一下Vue實(shí)現(xiàn)頁(yè)面訪問(wèn)攔截的方法,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了Vue中的計(jì)算屬性,模板內(nèi)的表達(dá)式,用于簡(jiǎn)單運(yùn)算,但是模板中放入太多的邏輯會(huì)讓模板過(guò)重且難以維護(hù)，更多具體內(nèi)容一起進(jìn)入下面文章學(xué)習(xí)吧,需要的朋友也可以參考一下2021-12-12
這篇文章主要為大家介紹了Vuecli3配置代理及遇到的問(wèn)題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08