Vue中的click事件綁定是非常常見(jiàn)的一個(gè)功能，可以使用戶與頁(yè)面進(jìn)行交互，實(shí)現(xiàn)各種功能。下面我們來(lái)看一下如何在Vue中使用bind click事件綁定。

//html代碼：
<button v-on:click="myFunction">點(diǎn)擊我</button>
//Vue代碼：
new Vue({
el: '#app',
methods: {
myFunction: function () {
alert('Hello World!');
}
}
})

上述代碼中，我們使用v-on:click指令來(lái)綁定click事件，并在Vue實(shí)例中定義了一個(gè)名為myFunction的方法。當(dāng)用戶點(diǎn)擊按鈕時(shí)，myFunction方法就會(huì)被執(zhí)行。

除了使用v-on:click指令，我們還可以使用@click縮寫方式來(lái)進(jìn)行綁定。

//html代碼：
<button @click="myFunction">點(diǎn)擊我</button>
//Vue代碼：
new Vue({
el: '#app',
methods: {
myFunction: function () {
alert('Hello World!');
}
}
})

上述代碼與前面的代碼功能完全相同，只是使用了@click縮寫方式進(jìn)行綁定。

除了綁定方法，我們還可以使用$event來(lái)獲取event對(duì)象。

//html代碼：
<button v-on:click="myFunction($event)">點(diǎn)擊我</button>
//Vue代碼：
new Vue({
el: '#app',
methods: {
myFunction: function (event) {
console.log(event.target.tagName); //輸出button
}
}
})

上述代碼中，我們使用$event傳遞了event對(duì)象，并在myFunction方法中使用event.target來(lái)獲取用戶點(diǎn)擊的元素的tagName。

綁定click事件是Vue中常用的一個(gè)功能，掌握這個(gè)方法可以幫助我們實(shí)現(xiàn)各種復(fù)雜的交互功能。