在 vue.js 中，“@”符號用于綁定事件偵聽器，允許組件或元素在用戶交互時(shí)執(zhí)行特定操作。事件處理程序是響應(yīng)事件時(shí)執(zhí)行的函數(shù)，事件修飾符可用于修改事件偵聽器的行為，如阻止事件冒泡或限制輸入。
Vue 中的 @ 符號
在 Vue.js 中，@ 符號是一個(gè)指令前綴，用于綁定事件偵聽器。它允許組件或元素在用戶交互（例如點(diǎn)擊、鍵盤輸入或鼠標(biāo)懸停）時(shí)執(zhí)行特定的操作。
用法
@ 符號緊跟事件名稱放置在 HTML 元素或組件模板中的 v-on 指令中。例如：
<code class="html"><button v-on:click="handleClick">點(diǎn)擊我</button></code>
登錄后復(fù)制
上面的代碼中，@click 指令將 handleClick 方法與按鈕元素的 click 事件關(guān)聯(lián)起來。當(dāng)用戶點(diǎn)擊按鈕時(shí)，handleClick 方法將被調(diào)用。
事件處理程序
事件處理程序是響應(yīng)事件時(shí)執(zhí)行的函數(shù)。它通常在組件的 methods 選項(xiàng)中定義，如：
<code class="javascript">methods: {
handleClick() {
// 事件處理程序代碼
}
}</code>
登錄后復(fù)制
事件修飾符
Vue.js 還提供了事件修飾符，用于修改事件偵聽器的行為。例如：
.stop：阻止事件冒泡
.prevent：阻止默認(rèn)事件操作
.self：僅在事件發(fā)生在元素自身時(shí)觸發(fā)
例如
以下代碼中的按鈕將阻止點(diǎn)擊事件冒泡：
<code class="html"><button v-on:click.stop="handleClick">點(diǎn)擊我</button></code>
登錄后復(fù)制
而以下代碼中的輸入框?qū)⒆柚褂脩糨斎胱帜敢酝獾淖址?/p>
<code class="html"><input v-on:keydown.self="handleKeyDown"></code>
登錄后復(fù)制
總結(jié)
Vue.js 中的 @ 符號是用于綁定事件偵聽器的指令前綴。它允許組件或元素響應(yīng)用戶交互，并通過事件處理程序執(zhí)行特定的操作。借助事件修飾符，可以進(jìn)一步控制事件偵聽器的行為。
