Vue.js 入門 #2 – Vue.js とデータバインディング

Vue.js を利用したWebアプリケーション開発の手法を紹介していきます。
第二回目は Vue.js の データバインディング機能の詳細を解説していきます。

データバインディング

データバインディングは、Vue.js の主要機能の一つです。

JavaScript 内で定義した値を {{ }} 形式で HTML 内に記述することで、
DOM と JavaScript の変数とを簡単に紐付けることが出来ます。

{{ }} の内部ではJavaScript の記法が利用可能なので、+ を用いた文字列の結合や文字列関数の活用等も行えます。

データバインディングの基本記法は {{ }} ですが、
単純なテキストノードのバインディング以外にも様々な活用方法が存在します。

属性へのバインディング

テキストではなく、属性としてHTML要素に変数の値を割り当てる場合、 属性名の前に: を使用します。

<template>
  <div>
    <a> click me! </p>
  </div>
</template>


export default { 
  data(){
    return {
      url: "http://google.com"
    }
  }
}

:がつけられた属性では、値に様々なJavaScript の記法を活用可能になります。例えば以下のような文字列の結合なども利用可能です。

<template>
  <div>
    <a> click me! </p>
  </div>
</template>
</script>

双方向バインディング

v-model は双方向バインディングを実現する Vue のディレクティブです。

v-model をフォーム要素に使用する事により、値の表示だけでなく、変更の感知まで行えるようになります。

<template>
  <div>

    <p> {{message.length}} / 20</p> 
  </div>
</template>

上記の例では、message 変数の値が フォームに表示されるだけでなく、
フォームの値を変更した際に自動的に message 変数の値も書き換えられます。

表示・非表示のバインディング

v-if を利用する事で、条件式を利用してDOMの表示非表示を切り替える事が出来ます。

<template>
  <div>

    <p> {{message.length}} / 20</p>
    <p class="text-alert"> 0"> テキストを入力してください。</p>
  </div>
</template>

上記の例では、フォームの未入力時にのみ「テキストを入力してください。」のメッセージを表示します。

クラスのバインディング

クラスのバインディングには、単純なテキストだけではなく、オブジェクトを利用する事もできます。

<template>
  <div>

    <p>= 20}"> {{message.length}} / 20</p>
    <p> 0"> テキストを入力してください。</p>
  </div>
</template>

{red: message.length &gt;= 20} は、クラスのバインディング条件をオブジェクト形式で表現したものです。
キーにクラス名、値にクラスを付与する条件を記述します。

上記の例では、message.length &gt;= 20 の条件で クラス red が表示されるため、
20文字以上の入力時にカウンタの色を切り替えることが出来るようになります。

オブジェクトを使用する事で複数のクラスバインディングもキレイに表現する事が可能になります。
また、常にバインディングしたいクラスの設定は値に true を使用すればOKです。

<template>
  <div>

    <p>= 20,text-count:true}"> {{message.length}} / 20</p>
    <p> 0"> テキストを入力してください。</p>
  </div>
</template>

上記の例では、クラス text-count が常に カウントテキストに与えられます。

配列、オブジェクトのバインディング

配列と v-for の利用

配列のデータを使って HTML 要素を繰り返し表現するには v-for 属性を利用します。

<template>
  <div id="app">
    ...
    <ul>
      <li> {{item}} </li>
    </ul>
  </div>
</template>


export default { 
  data(){
    return {
      items : ["本を買う","牛乳を買う"]
    }
  }
}

オブジェクトを使用する場合は次のように記述することも出来ます。

<template>
  <div>
    <ul>
      <li>
        <a>{{title}} </a>
      </li>
    </ul>
  </div>
</template>


export default { 
  data(){
    return {
      menu: {
        top: "/",
        about: "/about/",
        contact: "/contact/",
      }
    }
  }
}
広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中