使用事件

已完成

在應用程式中，事件是可能發生的動作，但不一定能知道發生的時間。 舉例來說，假設頁面上有一個按鈕，使用者便很可能會去點選它。 但是您無法得知使用者點選它的時機。

您需要知道如何處理事件，才能建立 Web 應用程式。 您將在這裡探索如何使用 Vue.js 來管理事件。

v-on 指示詞和 @

Vue.js 會提供一個稱為 v-on 的指示詞，您可以將其與任何事件繫結，例如 v-on:click。 由於處理事件是核心工作，Vue.js 也會提供所有事件的 @ 捷徑。 因此若要繫結點擊事件，您可以使用 @click 捷徑。

事件處理常式

您可以藉由將函式新增至 methods 欄位，在 Vue 應用程式或元件中建立事件處理常式。 methods 欄位就像是 data()，但它會維護應用程式的可用函式清單，而不是傳回狀態物件。 您可以使用參考其他 JavaScript 函式的相同方式，在 HTML 中參考這些函式。

注意

將函式新增至 methods 欄位的主要原因是，函式可以存取任何已註冊的資料。

當您將方法新增至 Vue 應用程式或元件時，this 會指向使用中的執行個體。 如下列範例中的 name，使用中執行個體的任何可用資料都能從 this 存取。

建立事件處理常式

若要建立會在呼叫時顯示 name 資料屬性值的方法，您可以遵循此範例：

const app = Vue.createApp({
    data() {
        return {
            name: 'Cheryl'
        }
    },

    methods: {
        displayName() {
            console.log(this.name);
        }
    }
});

由於 displayName() 被新增至 methods 屬性中，因此範本可以存取並將其與事件繫結。

將事件處理常式與事件繫結

您可以使用速記 @click 將 displayName() 函式與 click 事件繫結。 當使用者選取按鈕時便會叫用 displayName() 函式。

<button type="button" @click="displayName">Display name</button>