當(dāng)我們開發(fā)網(wǎng)頁時(shí)，經(jīng)常需要用戶進(jìn)行一些交互操作，例如點(diǎn)擊按鈕后展示某些內(nèi)容。Vue.js中，可以使用@click指令來綁定按鈕的點(diǎn)擊事件。這一指令可以接受JavaScript表達(dá)式或者調(diào)用方法，從而實(shí)現(xiàn)點(diǎn)擊按鈕后執(zhí)行特定的操作。

<template>
<div>
<button @click="toggleContent">展開內(nèi)容</button>
<p v-if="showContent">這里是展開后的內(nèi)容</p>
</div>
</template>
<script>
export default {
data () {
return {
showContent: false
}
},
methods: {
toggleContent () {
this.showContent = !this.showContent
}
}
}
</script>

在上面的示例中，我們創(chuàng)建了一個(gè)按鈕，并且使用@click指令綁定了toggleContent方法。該方法定義在Vue組件的methods屬性中，可以通過this訪問Vue實(shí)例的數(shù)據(jù)。當(dāng)用戶點(diǎn)擊按鈕時(shí)，會(huì)調(diào)用toggleContent方法并且將showContent的值進(jìn)行取反。Vue會(huì)自動(dòng)檢測到數(shù)據(jù)的變化并更新視圖，例如展示內(nèi)容是否顯示的狀態(tài)。

除了綁定方法之外，@click指令也可以接受JavaScript表達(dá)式。例如下面的示例通過點(diǎn)擊按鈕來實(shí)現(xiàn)計(jì)數(shù)器功能：

<template>
<div>
<p>{{ count }}</p>
<button @click="count++">點(diǎn)擊我！</button>
</div>
</template>
<script>
export default {
data () {
return {
count: 0
}
}
}
</script>

在這個(gè)示例中，我們使用了Vue實(shí)例的data屬性來保存計(jì)數(shù)器的值，然后通過{{ count }}將其渲染到頁面中。在按鈕上使用了@click指令并將表達(dá)式count++傳遞給它。JavaScript表達(dá)式可以使用Vue實(shí)例中的所有屬性和方法，因此這里我們可以直接在按鈕點(diǎn)擊后將count屬性的值+1。

總的來說，Vue.js中使用@click指令非常方便，可以幫助我們快速綁定按鈕的點(diǎn)擊事件。在更復(fù)雜的交互場景中，我們還可以使用Vue的其他指令和組件來實(shí)現(xiàn)更加豐富的交互效果。這些內(nèi)容將在后續(xù)的學(xué)習(xí)中逐漸展開。