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

Vue2

kamiです。
TwitterYoutubeもやってます。

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

バインディングとは

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

icon

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

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

単一方向データバインディングの例文です。
ボタンをクリックすることで、メッセージが変更されます。
データが変更されると、それが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」を使用しますのでこの後に学びましょう。

バインディングの例

icon

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

商品リストとカートの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に反映させるために使用されます。

icon

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

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

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

icon

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!

スポンサードサーチ

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

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

icon

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

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

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

ディレクティブとバインディングを使用しているので各説明しますね。

<input v-model="username" />:

v-modelディレクティブを使用しています。v-modelはフォーム要素とデータの双方向バインディングを提供します。この場合、input要素とusernameデータがバインドされており、ユーザーが入力するとデータが更新され、逆にデータが変更されると入力フィールドも更新されます。

<p>{{ username }}</p>

データの単一方向バインディングを示しています。{{ username }}はデータ username を表示するためのMustache構文({{ }})を使用しています。データが変更されると、この部分が自動的に更新され、新しいデータが表示されます。

以上になります。

サーキュレーター

ミニマリストが選んだおすすめサーキュレーター

【加湿器の選び方】ミニマリストおすすめの加湿器

2022年版ミニマリストが選んだおすすめの空気清浄機

No Image

【ミニマリスト】洗い物を手放す!おすすめできる食洗機

【ミニマリスト】タオルは不要?バスタオル、フェイスタオルとの向き合い方とおすすめのタオル

ドラム式洗濯機

ミニマリストが選んだおすすめのドラム式洗濯機

【最新版・比較したい人必見】ミニマリストが選んだロボット掃除機のおすすめ・選び方

サーキュレーター

ミニマリストが選んだおすすめサーキュレーター

【加湿器の選び方】ミニマリストおすすめの加湿器

2022年版ミニマリストが選んだおすすめの空気清浄機

No Image

【ミニマリスト】洗い物を手放す!おすすめできる食洗機

【ミニマリスト】タオルは不要?バスタオル、フェイスタオルとの向き合い方とおすすめのタオル

ドラム式洗濯機

ミニマリストが選んだおすすめのドラム式洗濯機

【最新版・比較したい人必見】ミニマリストが選んだロボット掃除機のおすすめ・選び方

サーキュレーター

ミニマリストが選んだおすすめサーキュレーター

【加湿器の選び方】ミニマリストおすすめの加湿器

2022年版ミニマリストが選んだおすすめの空気清浄機

No Image

【ミニマリスト】洗い物を手放す!おすすめできる食洗機

【ミニマリスト】タオルは不要?バスタオル、フェイスタオルとの向き合い方とおすすめのタオル

ドラム式洗濯機

ミニマリストが選んだおすすめのドラム式洗濯機

【最新版・比較したい人必見】ミニマリストが選んだロボット掃除機のおすすめ・選び方

Vue2Vue

Posted by kami