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

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

データバインディング

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

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

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

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

属性へのバインディング

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

<template>
  <div>
    <a :href="url"> click me! </p>
  </div>
</template>

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

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

<template>
  <div>
    <a :href="url+'?reload=true'"> click me! </p>
  </div>
</template>

双方向バインディング

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

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

<template>
  <div>
    <input type="text" v-model="message">  
    <p> {{message.length}} / 20</p> 
  </div>
</template>

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

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

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

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

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

クラスのバインディング

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

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

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

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

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

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

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

HTMLコードのバインディング

{{ }} による変数の展開時、変数内に記述されたHTML はセキュリティ上の理由で全て通常の文字列に変換されます。
フォームの入力値や API の値など外部から渡される値は XSS 脆弱性対策のため、通常の文字列に変換して表示する必要がありますが、
まれに意図して 変数内に格納された HTML のコードを画面に紐付けたいケースがあるかもしれません。

HTMLをHTMLのままDOMに紐付けたい場合には v-html ディレクティブが利用可能です。

<template>
  <div>
    <div v-html="html_code"></div>
  </div>
</template>

v-html を利用する場合には、決して外部からの信頼できない値を画面に表示させないよう注意してください。

配列と v-for の利用

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

<template>
  <div id="app">
    ...
    <ul>
      <li v-for="item in items"> {{item}} </li>
    </ul>
  </div>
</template>

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

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

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


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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です