イベントを操作する

  • 3 分

アプリケーションでは、イベントは、発生する可能性があるアクションですが、いつ発生するかは必ずしもわかりません。 たとえば、ページにボタンがある場合、ユーザーがそれを選択する可能性があることはわかりますが、 そのタイミングはわかりません。

イベントを処理して何らかの Web アプリケーションを作成する方法を知っておく必要があります。 ここでは、Vue.js を使用してイベントを管理する方法を調べます。

v-on ディレクティブと @

Vue.js には、v-on と呼ばれるディレクティブが用意されています。これは、v-on:click など、任意のイベントにバインドできます。 イベントの処理は中心的なタスクであるため、Vue.js には、任意のイベントの @ ショートカットも用意されています。 このため、クリック イベントをバインドするには、@click ショートカットを使用できます。

イベント ハンドラー

イベント ハンドラーを作成するには、Vue アプリケーションまたはコンポーネント内の methods フィールドに関数を追加します。 methods フィールドは、data() に似ていますが、状態オブジェクトを返すのではなく、アプリケーションで使用可能な関数の一覧を保持します。 HTML では、他の JavaScript 関数を参照する場合と同じ方法で、これらの関数を参照できます。

Note

methods フィールドに関数を追加する主な理由は、任意の登録されたデータに関数がアクセスできるようにするためです。

メソッドを Vue アプリまたはコンポーネントに追加すると、this はアクティブなインスタンスをポイントします。 次の例の name など、アクティブなインスタンスで使用可能なデータは、this からアクセスできます。

イベント ハンドラーの作成

呼び出されたときに name データ プロパティの値を表示するメソッドを作成するには、次の例のようにします。

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

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

displayName() は methods プロパティに追加されるため、テンプレートからアクセスでき、イベントにバインドすることができます。

イベント ハンドラーをイベントにバインドする

displayName() 関数を click イベントにバインドするには、短縮形 @click を使用します。 ユーザーがボタンを選択すると、displayName() 関数が呼び出されます。

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