Vue提供了許多方便的方法來(lái)處理事件。addEventListner是其中之一，它允許您動(dòng)態(tài)地向元素添加事件處理程序。在Vue中使用它非常簡(jiǎn)單:

mounted() {
const myButton = document.querySelector('.my-button')
myButton.addEventListener('click', this.handleClick)
},
destroyed() {
const myButton = document.querySelector('.my-button')
myButton.removeEventListener('click', this.handleClick)
},
methods: {
handleClick() {
alert('You clicked the button!')
}
}

在上面的代碼中，我們通過(guò)document.querySelector獲取了一個(gè)DOM元素并使用addEventListener方法向其添加了一個(gè)click事件處理程序。在組件銷毀時(shí)，我們也使用removeEventListener方法將處理程序從元素中刪除。

請(qǐng)注意，在定義事件處理程序時(shí)，我們使用了箭頭函數(shù)。這是因?yàn)榧^函數(shù)不會(huì)創(chuàng)建一個(gè)新的this作用域，它將使用組件的上下文。如果我們使用了常規(guī)函數(shù)，則需要在向addEventListener方法傳遞它們時(shí)使用.bind(this)來(lái)確保正確的上下文。

addEventListner是一種非常有用的工具，它允許我們?cè)赩ue中動(dòng)態(tài)地處理事件。無(wú)論是單擊按鈕還是處理更復(fù)雜的事件，它都可以讓您輕松地將事件處理程序添加到組件中。