Vue.jsのディレクティブAPIを自在に操る: v-bindやv-onの高度な活用

作成日 2025.02.12
Vue.js
Vue.js

Vue.jsのディレクティブAPIであるv-bindやv-onを効果的に活用することで、柔軟で効率的なコンポーネント設計が可能になります。本記事では、これらディレクティブの高度な使い方や応用例を詳しく説明します。

1. v-bindの基本的な使い方
2. v-bindで複数属性を動的にバインドする
3. 動的属性名を利用した柔軟なv-bind
4. v-onの基本的な使い方
5. v-onを使った複数イベントのバインド
6. 動的イベント名をv-onでバインド
7. v-bindとv-onの組み合わせ
8. 修飾子を使った高度なv-on
9. カスタムディレクティブを使った応用例
10. v-bindとv-onのパフォーマンス最適化
11. まとめ

v-bindの基本的な使い方

v-bindを使って属性をバインドする基本的な方法を説明します。

<template>
  <a :href="url">リンク</a>
</template>

<script>
export default {
  data() {
    return {
      url: 'https://example.com',
    };
  },
};
</script>

v-bindで複数属性を動的にバインドする

オブジェクトを使った複数属性のバインド方法を示します。

<template>
  <button v-bind="buttonProps">クリック</button>
</template>

<script>
export default {
  data() {
    return {
      buttonProps: {
        id: 'my-button',
        class: 'btn-primary',
        type: 'submit',
      },
    };
  },
};
</script>

動的属性名を利用した柔軟なv-bind

動的属性名を使った例です。

<template>
  <div>
    <input :[dynamicAttr]="value" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      dynamicAttr: 'placeholder',
      value: 'ここに入力',
    };
  },
};
</script>

v-onの基本的な使い方

v-onでイベントリスナーを登録する基本例です。

<template>
  <button @click="handleClick">クリック</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      alert('クリックされました');
    },
  },
};
</script>

v-onを使った複数イベントのバインド

複数イベントに対するv-onの使用例を説明します。

<template>
  <div>
    <input @focus="onFocus" @blur="onBlur" />
  </div>
</template>

<script>
export default {
  methods: {
    onFocus() {
      console.log('フォーカスされました');
    },
    onBlur() {
      console.log('フォーカスが外れました');
    },
  },
};
</script>

動的イベント名をv-onでバインド

動的にイベント名を指定する方法です。

<template>
  <button @[dynamicEvent]="handleEvent">イベント発生</button>
</template>

<script>
export default {
  data() {
    return {
      dynamicEvent: 'click',
    };
  },
  methods: {
    handleEvent() {
      console.log('イベントが発生しました');
    },
  },
};
</script>

v-bindとv-onの組み合わせ

v-bindとv-onを組み合わせて効率的なコードを書く例です。

<template>
  <button :id="buttonId" @click="handleClick">ボタン</button>
</template>

<script>
export default {
  data() {
    return {
      buttonId: 'btn-123',
    };
  },
  methods: {
    handleClick() {
      console.log('ボタンがクリックされました');
    },
  },
};
</script>

修飾子を使った高度なv-on

イベント修飾子（.stop、.prevent、.onceなど）の使用例です。

<template>
  <form @submit.prevent="onSubmit">
    <button type="submit">送信</button>
  </form>
</template>

<script>
export default {
  methods: {
    onSubmit() {
      alert('フォームが送信されました');
    },
  },
};
</script>

カスタムディレクティブを使った応用例

独自のディレクティブを作成して特定の動作をカスタマイズする例を示します。

<template>
  <div v-focus>フォーカスされる要素</div>
</template>

<script>
export default {
  directives: {
    focus: {
      inserted(el) {
        el.focus();
      },
    },
  },
};
</script>