在 vue.js 中，“@”符號用于綁定事件偵聽器，允許組件或元素在用戶交互時執行特定操作。事件處理程序是響應事件時執行的函數，事件修飾符可用于修改事件偵聽器的行為，如阻止事件冒泡或限制輸入。
Vue 中的 @ 符號
在 Vue.js 中，@ 符號是一個指令前綴，用于綁定事件偵聽器。它允許組件或元素在用戶交互（例如點擊、鍵盤輸入或鼠標懸停）時執行特定的操作。
用法
@ 符號緊跟事件名稱放置在 HTML 元素或組件模板中的 v-on 指令中。例如：
<code class="html"><button v-on:click="handleClick">點擊我</button></code>
登錄后復制
上面的代碼中，@click 指令將 handleClick 方法與按鈕元素的 click 事件關聯起來。當用戶點擊按鈕時，handleClick 方法將被調用。
事件處理程序
事件處理程序是響應事件時執行的函數。它通常在組件的 methods 選項中定義，如：
<code class="javascript">methods: {
handleClick() {
// 事件處理程序代碼
}
}</code>
登錄后復制
事件修飾符
Vue.js 還提供了事件修飾符，用于修改事件偵聽器的行為。例如：
.stop：阻止事件冒泡
.prevent：阻止默認事件操作
.self：僅在事件發生在元素自身時觸發
例如
以下代碼中的按鈕將阻止點擊事件冒泡：
<code class="html"><button v-on:click.stop="handleClick">點擊我</button></code>
登錄后復制
而以下代碼中的輸入框將阻止用戶輸入字母以外的字符：
<code class="html"><input v-on:keydown.self="handleKeyDown"></code>
登錄后復制
總結
Vue.js 中的 @ 符號是用于綁定事件偵聽器的指令前綴。它允許組件或元素響應用戶交互，并通過事件處理程序執行特定的操作。借助事件修飾符，可以進一步控制事件偵聽器的行為。
