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