Vue之事件處理和事件修飾符詳解
更新時(shí)間：2021年11月21日 16:22:53 作者：王同學(xué)要努力
這篇文章主要為大家介紹了Vue之事件處理和事件修飾符，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助<BR>
<div id="root">
<h2>{{name}}，加油！</h2>
<!-- 阻止默認(rèn)事件 -->
<a @click.prevent="showInfo" href="https:www.baidu.com">點(diǎn)我提示信息</a>
<!-- 阻止事件冒泡 -->
<div class="demo1" @click="showInfo">
<button @click.stop="showInfo">點(diǎn)我提示信息</button>
</div>
<!-- 事件只觸發(fā)一次 -->
<button @click.once="showInfo">點(diǎn)我提示信息</button>
<!-- 使用事件捕獲模式 -->
<div class="box1" @click.capture="showMsg(1)">
div1
<div class="box2" @click="showMsg(2)">
div2
</div>
</div>
<!-- 只有event.target是當(dāng)前操作的元素時(shí)才觸發(fā)事件 -->
<div class="demo1" @click.self="showInfo">
<button @click="showInfo">點(diǎn)我提示信息</button>
</div>
</div>
<script>
Vue.config.productionTip = false;
new Vue({
el: '#root',
data() {
return {
name: '張三'
}
},
methods: {
showInfo(e) {
// e.preventDefault();
alert('王同學(xué)，你好！')
},
showMsg(msg) {
console.log(msg);
}
}
});
</script>
總結(jié)
本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
這篇文章主要介紹了vue2 webpack proxy與nginx配置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
以前我們經(jīng)常在react中使用jsx，現(xiàn)在我們?cè)趘ue中也是用jsx,下面這篇文章主要給大家介紹了關(guān)于Vue3使用JSX的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
部署vue+Springboot前后端分離項(xiàng)目的步驟實(shí)現(xiàn)
這篇文章主要介紹了部署vue+Springboot前后端分離項(xiàng)目的步驟實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
詳解vue-cli項(xiàng)目中怎么使用mock數(shù)據(jù)
這篇文章主要介紹了vue-cli項(xiàng)目中怎么使用mock數(shù)據(jù)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
在vue中彈窗是常用的組件之一,可以用來(lái)展示警告、成功提示和錯(cuò)誤信息等內(nèi)容,這篇文章主要給大家介紹了關(guān)于如何使用Vue實(shí)現(xiàn)彈窗效果的相關(guān)資料,需要的朋友可以參考下2024-02-02
vue項(xiàng)目適配屏幕分辨率與屏幕的縮放適配詳細(xì)教程
現(xiàn)在很多14寸的筆記本，出廠(chǎng)默認(rèn)就是150%的顯示。導(dǎo)致很多時(shí)候我們的項(xiàng)目，自己開(kāi)發(fā)的時(shí)候都是按照100%比例來(lái)開(kāi)發(fā)的，上線(xiàn)了就會(huì)發(fā)現(xiàn)這個(gè)問(wèn)題，今天就這個(gè)問(wèn)題給出解決方案，感興趣的朋友跟隨小編一起看看吧2022-11-11
要在Vue?3和Electron中實(shí)現(xiàn)本地化,可以使用類(lèi)似于在Vue項(xiàng)目中進(jìn)行本地化的方式,本文為大家介紹了一種常見(jiàn)的做法,希望對(duì)大家有所幫助2024-03-03
本文主要介紹了element的$notify注意點(diǎn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
Vue網(wǎng)頁(yè)html轉(zhuǎn)換PDF（最低兼容ie10）的思路詳解
這篇文章主要介紹了Vue網(wǎng)頁(yè)html轉(zhuǎn)換PDF（最低兼容ie10）的思路詳解,實(shí)現(xiàn)此功能需要引入兩個(gè)插件，需要的朋友可以參考下2017-08-08
這篇文章主要介紹了vue實(shí)現(xiàn)虛擬列表，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07