【Vue.js】データバインディングについて

Web

データバインディング

Vue.jsではデータとDOMが関連付けられています。 つまりデータの更新と共にDOMが更新されるため、ページが動的に変化します。

これはシンプルなテキストだけではなく、要素の属性にも当てはまります。 要素の属性にデータを割り当てる(データバインディング)には v-bind を使用します。

<div id="app">
  <span v-bind:title="message">Hello Vue!!</span>
</div>
const app = new Vue({
  el: '#app',
  data: {
    message: 'You hover this text!!'
  }
})

title属性は指定した文字列をツールチップとして表示します。 この title属性にv-bindを使用してmessageプロパティの値を割り当てています。 これにより、「Hello Vue!!」というテキストをホバーすると「You hover this text!!」がツールチップとして表示されます。

このようにv-bindを用いることで要素の属性にデータのプロパティ値をバインディングすることができます。 データバインディングができるのはデータのプロパティ値に限らないのですが、今回は割愛します。

またv-bindは省略形が用意されています。

<!--通常-->
<hoge v-bind:[element]="[data property]"></hoge>
<!--省略形-->
<hoge :[element]="[data property]"></hoge>

入力データバインディング

データバインディングは属性だけでなく、v-modelを使うことで要素の値にも設定することができます。 これにより要素の値とバインディングしたデータのプロパティ値が同期されます。

<div id="app">
  <input type="text" v-model="message">
  {{message}}
</div>
const app = new Vue({
  el: "#app",
  data: {
    message: ""
  }
})

input要素の値にmessageプロパティをバインディングしており、またmessageプロパティをテキストとして展開しています。 input要素に文字を入力すると、展開しているテキストも同じ値になるはずです。

このように、v-modelを使用することで入力値とデータのプロパティ値を同期させることができます。

スタイルバインディング

v-bindを使用することで要素のスタイルを動的に変化させることができます。

<div id="app">
  <input type="radio" name="color" value="red" v-model="color">red
  <input type="radio" name="color" value="blue" v-model="color">blue
  <input type="radio" name="color" value="green" v-model="color">green
  <div class="box" :style="{background: color}" />
</div>
.box {
  border: 1px solid black;
  height: 100px;
  width: 100px;
}
const app = new Vue({
  el: "#app",
  data: {
    color: "red"
  }
})

スタイルバインディングでは、スタイルを設定したオブジェクトをバインディングします。 今回はcssのbackgroundプロパティにデータのcolorプロパティを指定しているため、ラジオボタンを選択すると、四角の要素の色が変化します。

cssプロパティ指定する際の注意点として、ケバブケースがそのまま扱えません。 例えばbackground-colorの場合、キャメルケース(backgroundColor)とするかシングルクォートで囲う(’background-color’)必要があります。

クラスバインディング

スタイルバインディングと同じく、クラスについてもv-bindを使用することでバインディングすることができます。

<div id="app">
  <input type="checkbox" v-model="check">change color
  <div class="box" :class="{checked: check}" />
</div>
.box {
  border: 1px solid black;
  height: 100px;
  width: 100px;
}
.checked {
  background: red;
}
const app = new Vue({
  el: '#app',
  data: {
    check: false
  }
})

クラスバインディングでは、指定した値の状態によりクラスの設定有無を変化させることができます。 上記では「checkプロパティがtrueであれば、checkedクラスを付与する」といった意味になります。 そのためチェックボックスにチェックを入れると、四角の要素が赤色に変化します。

クラス名を指定する際も、スタイルバインディングでcssプロパティ指定する際と同様にケバブケースがそのまま扱えませんので注意してください。

ディレクティブ

Vue.jsには、v-bindのように「v-」から始まる属性が複数用意されており、これらをディレクティブと言います。

一部ではありますが、以下のようなディレクティブがあります。

ディレクティブ省略形説明
v-bind:属性データバインディング
v-model入力データバインディング
v-on@イベントハンドリング
v-for要素のループ処理
v-if要素の生成・消滅
v-show要素の表示・非表示

- Vue.jsのおすすめ書籍はコチラ -

コメント

タイトルとURLをコピーしました