v-on修飾符，拓展

@事件.stop停止冒泡事件

如果沒加的話

html中

<div id="test" @click="show1">
? ?啊啊啊啊啊
? ?<button @click="show2">測試</button>
</div>

js methods中

show1()
{
? ?console.log('div');
},
show2()
{
? ?console.log('btn');
}

如下圖所示：

點(diǎn)擊子元素，卻同時(shí)輸出了父子元素里的內(nèi)容

我們想解決這個(gè)問題，只需要在HTML中

<div id="test" @click="show1">
? ?啊啊啊啊啊
? ?<button @click.stop="show2">測試</button>
</div>

效果如下：

當(dāng)我們再去點(diǎn)'啊啊啊啊'時(shí)輸出的就是父元素里的內(nèi)容了

@事件.prevent阻止默認(rèn)行為

當(dāng)我們不使用prevent時(shí)

html中

<form action="yourWebServer">
? ?<input type="submit" value="提交">
</form>

點(diǎn)擊之后頁面自動(dòng)提交給指定服務(wù)器

再我們加了之后，就不會(huì)自動(dòng)提交，我們還可以在里面實(shí)現(xiàn)別的功能

<form action="yourWebServer">
? ?<input type="submit" value="提交" @click.prevent="sub">
</form>

sub()
{
? ?console.log('subPoint');
}

用戶點(diǎn)擊提交按鈕。按理來說應(yīng)該就反應(yīng)一次，你這個(gè)咋還能一直點(diǎn)

那么我們就再加個(gè)once就好了，只響應(yīng)一次嘛

<form action="yourWebServer">
? ?<input type="submit" value="提交" @click.once.prevent="sub">
</form>

之前都是鼠標(biāo)的監(jiān)聽事件

這次我們不妨試試鍵盤的

<form action="yourWebServer">
? ?<input type="submit" value="提交" @click.once.prevent="sub">
? ?<input type="text" @keyup="sub">
</form>

效果如下：

我們不難發(fā)現(xiàn)它是統(tǒng)計(jì)每次鍵盤抬起的事件

如果你長按一個(gè)鍵，只能算是一次

還有一種特殊情況

@事件.enter鍵代碼 只有按到指定按鍵才會(huì)觸發(fā)

<form action="yourWebServer">
? ?<input type="submit" value="提交" @click.once.prevent="sub">
? ?<input type="text" @keyup.enter="sub">
</form>

還有最后一個(gè)組件化當(dāng)中用到的@事件.native在后續(xù)我們再總結(jié)