1、綁定監(jiān)聽@click:（以監(jiān)聽click為例，其他如keyup，用法類似）
? v-on:click="fun"
? @click="fun"
? @click="fun(參數(shù))"

<button @click="test1">test1</button><button @click="test2('abc')">test2</button><button @click="test3('abcd', $event)">test3</button>methods: {test1(eve) {//test1函數(shù)沒有參數(shù)，默認(rèn)傳遞 $event alert(eve.target.innerHTML)? //test1},test2 (msg) {?//test1函數(shù)有參數(shù)，傳遞該參數(shù)alert(msg)? // abc},test3 (msg, event) { //有參數(shù)，如果想獲取到enevt，則函數(shù)中需要寫?$eventalert(msg+'---'+event.target.textContent)? // abcd---test3}}

2、@click.stop與@click.prevent

@click.stop 阻止事件冒泡

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

<a href="http://www.baidu.com" @click.prevent="test4">百度一下</a>? ?//阻止a標(biāo)簽跳轉(zhuǎn)，僅執(zhí)行函數(shù)test4

<form? action="/xxx"? ?@submit.prevent="test5">? ?//阻止表單提交，僅執(zhí)行函數(shù)test5

? ? ? ? ?<input type="submit" value="注冊">
</form>

3、按鍵修飾符

@keyup.enter

//按下enter時，執(zhí)行方法test7

<input type="text" @keyup.enter="test7">

methods: {

? ? ??test7 (event) {
? ? ? ? console.log(event.keyCode)
? ? ? ? alert(event.target.value)
? ? ? }

}

總結(jié)

以上是生活随笔為你收集整理的Vue基础语法之@click、时间修饰符@click.stop与@click.prevent、按键修饰符（如@keyup.enter）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。