image.png
三種方式
<button @click="handleClick1()">click1-通過函數(shù)調(diào)用</button>
<button @click="handleClick2">click2-通過函數(shù)名</button>
<button @click=" count++ ">click3-通過表達(dá)式</button>
不加括號能獲取事件源
<input type="text" @input="handleInput">
<div>{{ text }}</div>
<!-- 不加括號會傳將事件對象 -->
handleInput(ev) {
// 獲取事件源 ev.target
// 獲取事件值 ev.target.value
this.text = ev.target.value
}
image.png
即想傳參又想傳事件對象
<input type="text" @input="handleInput($event, 'fbb')">
加上$說明不是隨隨便便的參數(shù) 是把事件對象傳出來
-----------------------------------------------------------------------------------------
事件修飾符
事件冒泡
<ul @click="handleUlClick">
<li @click="handleLiClick">11111</li>
<li @click="handleLiClick">11111</li>
<li @click="handleLiClick">11111</li>
</ul>
<script>
handleUlClick() {
console.log("ul-父級觸發(fā)")
},
handleLiClick() {
console.log("li-子級觸發(fā)")
}
</script>
冒泡觸發(fā)
阻止冒泡
方法一. ev.stopPropagation() //阻止冒泡
方法二. <li @click.stop="handleLiClick">11111</li>
<ul @click.self="handleUlClick">
stop 和 self Vue提供的事件修飾符
例如：
<a @click.prevent="handleAClick"> 跳轉(zhuǎn)頁面 </a>
<!-- @click.prevent 阻止默認(rèn)行為 a標(biāo)簽的跳轉(zhuǎn) -->
<button @click.once="handleBtnClick">點擊</button>
<!-- @click.once點完一次立即解綁 -->
-----------------------------------------------------------------------------------------------------------------------
按鍵修飾符
<P>回車提交<input type="text" v-model="myText" @keydown.enter="handleKeyDown"></P>
--@keydown.enter 點擊回車觸發(fā)函數(shù)
---可以根據(jù)鍵值觸發(fā)函數(shù)
----@keydown.87 是 w
----等等容为。。。
