【Vue】バインドとディレクティブとは？

2023年12月4日Vue2

kamiです。
TwitterとYoutubeもやってます。

今回はバインドとディレクティブの紹介です。

1. バインディングとは
2. 単一方向データバインディング
3. 双方向データバインディング
4. バインディングの例
5. ディレクティブとは
6. 単一方向データバインディングのディレクティブ
7. 双方向データバインディングのディレクティブ

バインディングとは

バインディング（Binding）とは、Vueなどのフロントエンドフレームワークやライブラリにおいて、データとUI（ユーザーインターフェース）を異なる要素やデータを結びつけることを指します。
Vue.jsにおいては、データとDOM（Document Object Model）の間でバインディングを行い、
データの変更がDOMに反映され、DOMの変更がデータに影響を与える双方向の関係を築くことができます。

アプリケーションの状態と表示を同期させるってことです。

単一方向データバインディング

単一方向データバインディングの例文です。
ボタンをクリックすることで、メッセージが変更されます。
データが変更されると、それがUIに反映されます。

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  methods: {
    changeMessage() {
      // データの変更
      this.message = 'New Message!';
    }
  }
};
</script>

バインディングでの値の変化

デフォルトの値：Hello, Vue!
ボタンを押下後の値：New Message!

スポンサードサーチ

双方向データバインディング

双方向データバインディングの例文です。
データの変更がUIに反映され、逆もまた然りです。
主にフォーム要素などで使用されます。

<template>
  <div>
    <input ref="usernameInput" />
    <p>{{ username }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: ''
    };
  },
  mounted() {
    this.$refs.usernameInput.addEventListener('input', this.updateUsername);
  },
  methods: {
    updateUsername(event) {
      this.username = event.target.value;
    }
  }
};
</script>

双方バインディングでの値の変化

デフォルトの値：空
inputn湯力後の値：随時更新

この例に関してですが、以下を注意点として理解してください。

ディレクティブを一切使わないバインディングの例を提供するのは難しいですが、今回の例になります。

一般的では今回のようなパターンでは「バインディング」の「v-xxx」を使用しますのでこの後に学びましょう。

バインディングの例

バインディングの例です。

商品リストとカートの2つの部分があります。
v-forディレクティブを使用して商品リストを表示し、v-onディレクティブを使用してカートに商品を追加するような操作ができます。
v-bindディレクティブを使用して商品データを表示し、カートに追加する際にデータの変更がDOMに即座に反映されます。
これにより、ユーザーは商品を見ながらカートに追加できるようになり、良好なユーザーエクスペリエンスが提供されます。

<template>
  <div>
    <h2>商品リスト</h2>
    <ul>
      <li v-for="product in products" :key="product.id">
        <span>{{ product.name }}</span>
        <span>{{ product.price }}円</span>
        <button @click="addToCart(product)">カートに追加</button>
      </li>
    </ul>

    <h2>カート</h2>
    <ul>
      <li v-for="item in cart" :key="item.id">
        <span>{{ item.name }}</span>
        <span>{{ item.price }}円</span>
        <span>{{ item.quantity }}個</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [ // 仮データをセット
        { id: 1, name: '商品A', price: 1000 },
        { id: 2, name: '商品B', price: 1500 },
        { id: 3, name: '商品C', price: 2000 }
      ],
      cart: []
    };
  },
  methods: {
    addToCart(product) {
      // カートに商品を追加
      const cartItem = this.cart.find(item => item.id === product.id);
      if (cartItem) {
        cartItem.quantity++;
      } else {
        this.cart.push({ ...product, quantity: 1 });
      }
    }
  }
};
</script>

スポンサードサーチ

ディレクティブとは

ディレクティブとは

ディレクティブ（Directive）はVue.jsの特定の構文で、HTMLの属性に対して特別な意味を持たせるものです。
v-から始まり、その後に指定された名前がディレクティブとして解釈されます。
ディレクティブはVue.jsが提供する命令であり、テンプレート内でデータをDOMに反映させるために使用されます。

わかりやすいざっくりな覚え方は、vから始まる名前がディレクティブです。

単一方向データバインディングのディレクティブ

先ほどのバインディングの例にディレクティブな書き方になります。

v-bindについては別途紹介しますね。

<template>
  <div>
    <p v-bind:text="message"></p>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  methods: {
    changeMessage() {
      // データの変更
      this.message = 'New Message!';
    }
  }
};
</script>

バインディングでの値の変化

デフォルトの値：Hello, Vue!
ボタンを押下後の値：New Message!

スポンサードサーチ

双方向データバインディングのディレクティブ

こちらも同様で先ほどのバインディングの例に双方のディレクティブな書き方になります。

v-modelについては別途紹介しますね。

<template>
  <div>
    <input v-model="username" />
    <p>{{ username }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: ''
    };
  }
};
</script>