Vue.jsの基本的な実装方法3(データバインディングの方法について)

はじめに

今回は、データバインディングの方法について解説します。

テキストデータバインディングの方法

./components/HelloWorld.vueのコードを以下のように修正します。

<template>
  <!-- テキストデータバインディングの呼び出し -->
  <p>{{ message1 }}</p>
  <p>{{ message2 }}</p>
  <p>{{ message3 }}</p>
</template>

<script>
export default {
  name: 'HelloWorld',
  // dataプロパティを追加
  data() {
    return {
      message1: 'HelloWorld!',
      message2: 'helloWorld!',
      message3: 'hello-world!',
    };
  },
};
</script>

以下のように表示されます。

• dataプロパティを追加し、任意のメッセージプロパティを設定します。

• <p>{{ message1 }}</p>: このようにしてテンプレート内で呼び出すことができます。

属性データバインディング(v-bind)の方法

herf属性のバインディング

./components/HelloWorld.vueのコードを以下のように修正します。

<template>
  <div>
    <a v-bind:href="url">リンク</a>
  </div>
  <div>
    <!-- 省略形 -->
    <a :href="url">リンク</a>
  </div>
</template>

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

以下のように表示されます。

• v-bindを使用して、アンカータグのhref属性に動的なURLをバインドします。

• v-bindは:に省略できます。

title属性のバインディング:

./components/HelloWorld.vueのコードを以下のように修正します。

<template>
  <span :title="message">ホバーして詳細を表示</span>
</template>

<script>
export default {
  data() {
    return {
      message: 'これは動的なツールチップです',
    };
  },
};
</script>

カーソルを当てると以下のように表示されます。

• ツールチップなどのtitle属性に動的な値をバインドします。

class属性のバインディング

./components/HelloWorld.vueのコードを以下のように修正します。

<template>
  <div>
    <p :class="{ active: isActive }">このテキストはアクティブです。</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
    };
  },
};
</script>

<style>
.active {
  color: red;
  font-weight: bold;
}
</style>

以下のように表示されます。

• isActiveがtrueの場合はactiveクラスのスタイルを適用します。

./components/HelloWorld.vueのコードを以下のように修正します。

<template>
  <div>
    <p :class="{ active: isActive }">このテキストはアクティブではありません。</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: false,
    };
  },
};
</script>

<style>
.active {
  color: red;
  font-weight: bold;
}
</style>

以下のように表示されます。

• isActiveがfalseの場合はactiveクラスのスタイルを適用しません。

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

./components/HelloWorld.vueのコードを以下のように修正します。

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

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      message: 'HelloWorld!',
    };
  },
};
</script>

以下のように表示されます。

テキストボックスに任意の入力をするとUIもリアルタイムで更新されます。

イベントデータバインディング

./components/HelloWorld.vueのコードを以下のように修正します。

<template>
  <div>
    <p>{{ message1 }}</p>
    <button v-on:click="updateMessage1">更新</button>
    <p>{{ message2 }}</p>
    <button @click="updateMessage2">更新</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message1: '初期メッセージ1',
      message2: '初期メッセージ2',
    };
  },
  methods: {
    updateMessage1() {
      this.message1 = '更新されたメッセージ1!';
    },
    updateMessage2() {
      this.message2 = '更新されたメッセージ2!';
    },
  },
};
</script>

更新前(ボタン押下前)は以下のように表示されます。

更新後(ボタン押下後)は以下のように表示されます。

• v-onは@に省略できます。

v-onまたは@の後のイベントにはclick以外にも以下のようなものがあります。

• @mouseover: マウスが要素の上に移動したときに発火します。

<div @mouseover="handleMouseOver">マウスオーバー</div>

• @mouseout: マウスが要素から離れたときに発火します。

<div @mouseout="handleMouseOut">マウスアウト</div>

• @submit: フォームの送信イベントをハンドルします。通常、v-on:submit.preventと組み合わせてデフォルトの送信動作を防ぎます。

<form @submit.prevent="handleSubmit">送信</form>

• @keyup, @keydown, @keypress:: キーボードイベントをハンドルします。

<input @keyup="handleKeyUp">

• @focus: 要素がフォーカスされたときに発火します。

<input @focus="handleFocus">

• @blur: 要素からフォーカスが外れたときに発火します。

<input @blur="handleBlur">

• @change: 入力要素の値が変更され、フォーカスが外れたときに発火します。

<input @change="handleChange">

ディレクティブについて

今まで、バインディングの処理で使用していたv-で始まるVue.js特有の属性のことをディレクティブといいます。

• v-bind: 属性データバインディングを実現するためのディレクティブ

• v-model: 双方向データバインディングを実現するためのディレクティブ

• v-on：イベントデータバインディングを実現するためのディレクティブ

• v-if: 条件に基づいて要素(タグ)を表示または非表示にするためのディレクティブ

• v-for: 配列やオブジェクトのデータを反復処理して要素(タグ)を生成するためのディレクティブ

• v-show: 条件に基づいて要素(タグ)の表示・非表示を切り替えるためのディレクティブ（要素(タグ)はDOMに常に存在）

次回

次回は、今回説明していないディレクティブであるv-if,v-for,v-showの使用方法について解説します。