Vue.js是一種流行的前端框架，它提供了一種靈活而強(qiáng)大的方式來構(gòu)建用戶界面。對(duì)于網(wǎng)頁開發(fā)者來說，Vue.js提供了一種簡(jiǎn)單易用的方式來創(chuàng)建交互式用戶界面。在Vue.js中，我們可以使用v-on指令來綁定事件，而@click是其中一個(gè)最常見的指令之一。

當(dāng)用戶單擊某個(gè)元素時(shí)，Vue.js會(huì)將@click事件綁定到該元素上。使用@click指令可以給元素添加一個(gè)點(diǎn)擊事件監(jiān)聽器。例如：

<template>
<div>
<button @click="handleClick">Click me</button>
</div>
</template>
<script>
export default {
methods: {
handleClick() {
console.log('Clicked!');
}
}
}
</script>

在上面的代碼中，我們創(chuàng)建了一個(gè)按鈕，并使用@click指令將handleClick方法綁定到按鈕上。當(dāng)用戶單擊按鈕時(shí)，handleClick方法將被調(diào)用。此時(shí)，控制臺(tái)將輸出Clicked!。

除了直接調(diào)用方法之外，我們還可以在標(biāo)簽中使用v-bind綁定一個(gè)表達(dá)式來動(dòng)態(tài)設(shè)置按鈕內(nèi)容：

<template>
<div>
<button @click="handleClick">{{ buttonText }}</button>
</div>
</template>
<script>
export default {
data() {
return {
buttonText: 'Click me'
}
},
methods: {
handleClick() {
console.log('Clicked!');
}
}
}
</script>

在上面的代碼中，我們將buttonText綁定到按鈕中。當(dāng)數(shù)據(jù)中的buttonText屬性改變時(shí)，按鈕的文本也會(huì)更新。因此，我們可以使用Vue.js的數(shù)據(jù)驅(qū)動(dòng)能力來輕松地動(dòng)態(tài)修改按鈕文本。