【Vue.js 入門】ページを描画する方法

今回は、JavaScript のデータと DOM を結びつけてページを描画する様々な方法を紹介していきます(^^)

Vue.js について最初から知りたいという方はこちら

参考書

【『Vue.jsのツボとコツがゼッタイにわかる本』レビュー】最初のVue.js参考書はこれ！！

Vue.jsとは、JavaScriptのフレームワークのひとつですね。本書は、ある程度JavaScriptを習得された方が、Vue.jsの勉強を始めるにあたって最初の一冊におすすめです！Vue.jsのツボとコツがゼッタイにわかる本...

テキストにバインド
属性にバインド
style 属性にバインド
class 属性にバインド
リストデータをバインド
描画に条件を付ける
1. 複数の条件を指定

テキストにバインド

まずは、JavaScript のデータを HTML のテキストにバインドする（結びつける）方法です。

HTML の該当箇所に {{ プロパティ名 }} と記述します。（マスタッシュ構文と言います）

サンプルとして、プロパティ名を message として書いてみると…

<div id="app">{{message}}</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  }
});

すると、ブラウザに message プロパティの値である ‘Hello’ が描画されます。

つまり、

<div id="app">Hello</div>

このように置き換わっていることがわかりますね。

属性にバインド

属性にバインドする場合は、属性名の前に v-bind: を付け足します。

< 要素名　v-bind: 属性名 = ” プロパティ名 ” >

まずは確認として、普通に HTLM のみで書きます。

<input type="text" value="Hello">

input タグを使ったので、入力欄と value 属性の値の ‘Hello’ が表示されます。

続いて、今度はプロパティ名を属性にバインドします。

<div id="app">
  <input type="text" v-bind:value="message">
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  }
});

すると、先ほどと同様の表示が行われます。

属性をバインドすることで、属性値と同じ名前のプロパティ名を参照し、その値を属性値として扱っているわけですね。

属性にはマスタッシュ構文（ {{ プロパティ名 }} ）は使えません。

あくまで要素内容にバインドする場合にだけ使えます。

<!--誤った用法-->
  
<div id="app">
  <input type="text" v-bind:value="{{message}}">
</div>

style 属性にバインド

< 要素名　v-bind: style = ” { CSS のプロパティ名 :　アプリケーションのプロパティ名 } ” >

例として文字の色をバインドします。

<div id="app">
  <p v-bind:style="{color: fontColor}">{{fontColor}}</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    fontColor: 'red'
  }
});

すると、ブラウザには赤色で ‘red’ と表示されます。

class 属性にバインド

< 要素名　v-bind: class = ” { class 名 :　class 名を出力する条件式 } ” >

オブジェクトの値が「条件式」となっているところに注意です。

この条件式が true であれば class 名を付与するということです。

ただ、実際にタグの中に条件式を書くと可読性が悪くなるため、条件式の結果を data オプションのプロパティにもたせ、代わりにそのプロパティ名を書くことで見通しがよくなります。

以下のサンプルは、条件式が true の場合は ‘important’ という class 名を付けます。

<div id="app">
  <span v-bind:class="{important: isImportant}">これは重要です</span>
</div>

//文字を太くし、アンダーラインを引く

.important{
  font-weight: bold;
  background: linear-gradient(transparent 50%, yellow 50%);
}

var app = new Vue({
  el: '#app',
  data: {
    isImportant: true
  }
});

isImportant プロパティが true なので、class 名が付与されました。
ブラウザの表示は以下の通りです。

リストデータをバインド

配列にある複数のデータをひとつずつ取り出し、要素にバインドすることができます。

< 要素名　v-for = ” 配列要素を代入する変数名　in　配列の変数名 ” >

以下の例は、配列に登録している５人のデータを繰り返し出力します。

<div id="app">
  <table>
    <tr><th>学籍番号</th><th>名前</th></tr>
    <tr v-for="student in students">
      <td>{{student.number}}</td><td>{{student.name}}</td>
    </tr>
  </table>
</div>

var app = new Vue({
  el: '#app',
  data: {
    students: [
      {number: '1', name: '阿部'},
      {number: '2', name: '安藤'},
      {number: '3', name: '石川'},
      {number: '4', name: '井上'},
      {number: '5', name: '江崎'}
    ]
  }
});

何が行われているかというと、まず配列 students から一つデータを取り出し、変数 student に格納します。

この場合では、student = {number: ‘1’, name: ‘阿部’} となります。

そして、td タグの中がマスタッシュ構文になっているので、

<td>{{student.number}}</td><td>{{student.name}}</td>
　　　　　　　　↓
<td>１</td><td>阿部</td>

と変換されるんですね。

このようにして一つのデータの処理が終わると、配列の残りのデータも全て同様の処理が行われます。

確認してほしい点は、v-for が記述されているタグが繰り返し出力されるということです。

したがって、このサンプルの HTML は以下のように出力されます。

<div id="app">
  <table>
    <tr><th>学籍番号</th><th>名前</th></tr>
    <tr>
      <td>1</td><td>阿部</td>
    </tr>
    <tr>
      <td>2</td><td>安藤</td>
    </tr>
    <tr>
      <td>3</td><td>石川</td>
    </tr>
    <tr>
      <td>4</td><td>井上</td>
    </tr>
    <tr>
      <td>5</td><td>江崎</td>
    </tr>
  </table>
</div>

ブラウザの表示結果↓

サンプルのような単純な配列データの描画ならこれでよいですが、配列要素が削除されるような処理がある場合、そのあと要素の並び替えや追加を行ったときに意図しない動作の原因になります。

この不具合を避けるため、配列要素を一つ一つ区別できる値を ‘v-bind:key’ でバインドすることで対処できます。

<div id="app">
  <table>
    <tr><th>学籍番号</th><th>名前</th></tr>
    <tr v-for="student in students" v-bind:key="student.number">
      <td>{{student.number}}</td><td>{{student.name}}</td>
    </tr>
  </table>
</div>

描画に条件を付ける

< 要素名　v-if = ” 条件式 ” >出力内容</ 要素名>

条件式が成立する場合のみ要素が出力され、成立しない場合はタグ自体が出力されません。

以下のサンプルは、テストの点が４０点未満の再テスト者をあぶりだすプログラムです。

<div id="app">
  再テスト：<span v-for="student in students" v-if="student.score < 40">　{{student.name}}</span>
</div>

var app = new Vue({
  el: '#app',
  data: {
    students: [
      {number: '1', name: '阿部', score: 95},
      {number: '2', name: '安藤', score: 38},
      {number: '3', name: '石川', score: 60},
      {number: '4', name: '井上', score: 25},
      {number: '5', name: '江崎', score: 76}
    ]
  }
});

v-for でデータを一つずつ取り出し、条件式 “student.score < 40” を満たすデータの name プロパティ値が出力されます。

ブラウザの表示結果↓

複数の条件を指定

< 要素名　v-if = ” 条件式１ ” >出力内容</ 要素名>
< 要素名　v-else-if = ” 条件式２ ” >出力内容</ 要素名>
< 要素名　v-else>出力内容</ 要素名>

これは通常の JavaScript と同じ感覚で条件分岐を行えば大丈夫です。

次のサンプルは、生徒それぞれのテスト結果についての評価を出力するプログラムです。

<div id="app">
  <table>
    <tr v-for="student in students">
      <td>{{student.name}}：</td><td v-if="student.score < 40">再テスト</td>
                                 <td v-else-if="student.score < 80">悪くないだろう</td>
                                 <td v-else>優秀</td>
    </tr>
  </table>
</div>

var app = new Vue({
  el: '#app',
  data: {
    students: [
      {number: '1', name: '阿部', score: 95},
      {number: '2', name: '安藤', score: 38},
      {number: '3', name: '石川', score: 60},
      {number: '4', name: '井上', score: 25},
      {number: '5', name: '江崎', score: 76}
    ]
  }
});

一見すると、生徒名の td タグの横に評価の td タグが３つあるように見えますが、
条件分岐が３つあるだけで、結局は条件に当てはまる一つしか出力されません。

したがって、HTMLは以下のようになります。

<div id="app">
  <table>
    <tr>
      <td>阿部：</td><td>優秀</td>
      <td>安藤：</td><td>再テスト</td>
      <td>石川：</td><td>悪くないだろう</td>
      <td>井上：</td><td>再テスト</td>
      <td>江崎：</td><td>悪くないだろう</td>
    </tr>
  </table>
</div>

ブラウザの表示結果↓