每天一遍提醒自己增強(qiáng)自身抵抗力霞幅，多喝熱水漠吻，注意身體。
介紹完 兩對(duì)cp 后司恳，今天來(lái)看看一對(duì)基友的故事侥猩。
在 Vue 中有個(gè)名為 methods 的字段，這貨通常是要搭配 v-on 來(lái)一起使用抵赢。
兩個(gè)搞到一塊可以實(shí)現(xiàn)術(shù)語(yǔ)喚為 事件監(jiān)聽 的東西欺劳。
來(lái)波回憶殺，看看原生的 JavaScript 是如何進(jìn)行事件監(jiān)聽的铅鲤？
const demo = document.querySelector('#demo')
demo.onclick = () => {
console.log("mama划提，我被人點(diǎn)了。嚶嚶嚶邢享。")
}
看上去不大高端鹏往，喚 addEventListener 來(lái)看看。
const demo = document.querySelector('#demo')
addEventListener('click', () => {
console.log("mama骇塘，我被人點(diǎn)了伊履。嚶嚶嚶。")
})
emm款违，有點(diǎn)樣子了唐瀑。
通過(guò)上面的一波回憶，要來(lái)監(jiān)聽事件可以提取下列步驟：
- 找到要監(jiān)聽誰(shuí)插爹？ || 監(jiān)聽對(duì)象
- 對(duì)監(jiān)聽到的事件做何反應(yīng)哄辣？ || 響應(yīng)
簡(jiǎn)言之，事件監(jiān)聽就是：某元素發(fā)生了什么事情赠尾，我要做出相應(yīng)的反應(yīng)證明我不是吃干飯的力穗。
來(lái)看看在 Vue 的地盤事件監(jiān)聽是怎么的一個(gè)玩法？
<h1>{{cemcoe}}</h1>
<button v-on:click="qinqin">qinqin</button>
<button v-on:click="baobao">baobao</button>
v-on 監(jiān)聽事件气嫁，起到的是找到監(jiān)聽元素的作用当窗；methods 提供具體的應(yīng)對(duì)策略，被打要不要被打回去寸宵，還是以理服人崖面。
const demo = document.querySelector('#demo')
// 老兄，找元素的事情交給我 v-on
addEventListener('click', () => {
// 回調(diào)函數(shù)就交給 methods 好了
console.log("mama邓馒，我被人點(diǎn)了嘶朱。嚶嚶嚶。")
})
這個(gè)東西還有語(yǔ)法糖 v-on:click === @click
用上語(yǔ)法糖光酣，有點(diǎn)簡(jiǎn)潔的寫法：
<h1>{{cemcoe}}</h1>
<button @click="qinqin">qinqin</button>
<button @click="baobao">baobao</button>
具體的 qinqin 和 baobao 函數(shù)這里就不實(shí)現(xiàn)了疏遏，當(dāng)偽代碼看。
通過(guò)上面的一番瞎掰，可以知道 methods 中其實(shí)是原先 addEventListener 的回調(diào)函數(shù)财异，函數(shù)肯定要有參數(shù)才能發(fā)揮它的魅力倘零。
關(guān)于參數(shù)的問(wèn)題：
- 如果方法(函數(shù))不需要參數(shù)，那方法后的 () 可以不寫
· 若方法本身有參數(shù)戳寸，會(huì)默認(rèn)將原生事件 event 傳進(jìn)去 - 同時(shí)傳某個(gè)參數(shù)和 event 時(shí)呈驶，通過(guò) $event 傳進(jìn)去
這個(gè)關(guān)于 event 的一些東西有空再寫。
下面來(lái)看一些例子疫鹊，正常的邏輯
<button @click="fn(‘cemcoe’)">點(diǎn)我</button>
// ---methods---
fn (a) { console.log(a) }
這是乖孩子袖瞻，方法有一個(gè)函數(shù)，那么在使用時(shí)就規(guī)規(guī)矩矩地傳給它一個(gè)參數(shù)拆吆，合作愉快聋迎。
那遇到就是叛逆，就是要彰顯與眾不同枣耀，就是不傳參數(shù)且不加括號(hào)霉晕，會(huì)怎么樣？下面是點(diǎn)三次按鈕的結(jié)果捞奕。
<button @click="fn">點(diǎn)我</button>
// ---methods---
fn (a) { console.log(a) }
在事件定義時(shí)牺堰，寫方法時(shí)省略小括號(hào)，但是方法本身需要參數(shù)颅围，這時(shí)Vue會(huì)默認(rèn)將瀏覽器生產(chǎn)的 event 事件對(duì)象作為參數(shù)傳入方法中伟葫。
下面來(lái)看一個(gè)方法定義時(shí)，需要 event 對(duì)象谷浅，同時(shí)需要其他參數(shù)的例子：
<button @click="fn('cemcoe', $event)">點(diǎn)我</button>
//---methods---
fn (name, event) {
console.log(name, event)
}
// cemcoe MouseEvent
大概就是這個(gè)樣子扒俯，傳參時(shí)使用 $event 傳遞事件本身。
原生的 事件監(jiān)聽 會(huì)有事件冒泡等問(wèn)題一疯，Vue 為這些問(wèn)題提供了解決方案，術(shù)語(yǔ)叫做修飾符夺姑。換成大白話就是加點(diǎn)加狀態(tài)墩邀。
<div @click="divClick">
<button @click="btnClick">
button
</button>
</div>
//---methods---
divClick() {
console.log("div")
},
btnClick() {
console.log("btn")
}
當(dāng)點(diǎn)擊 button 時(shí)會(huì)發(fā)現(xiàn)控制臺(tái)會(huì)打印 div 和 btn，也就是說(shuō)盏浙，兩個(gè)點(diǎn)擊都被激活眉睹，這就是事件冒泡。
阻止冒泡废膘，Vue 可以使用修飾符 .stop
<div @click.stop="divClick">
<button @click="btnClick">
button
</button>
</div>
//---methods---
divClick() {
console.log("div")
},
btnClick() {
console.log("btn")
}
修飾符的使用方法如上例 竹海，直接在事件監(jiān)聽后加修飾符。
這里有一些其他修飾符：
- stop 阻止冒泡 event.stopPropagation()
- prevent 阻止默認(rèn)事件 event.preventDefault()
- keyCode 特定按鍵觸發(fā)
- once 執(zhí)行一次回調(diào)
關(guān)于 v-on 和 methods 的故事告一段落丐黄。
這里是連載 化學(xué)小子的前端實(shí)驗(yàn)冊(cè) 的第 19 篇斋配，歡迎關(guān)注。
