Vueのデータバインディングを理解する

Posted at 2020-03-21

どんな記事？

Vue.jsでのデータバインディングを理解しよう！

データバインディングとは、データと描画を同期する仕組み。

"Mustache"構文（二重中かっこ）を利用した形が基本です。

<span> Message: {{ msg }}</span>

こうすると{{ msg }}の部分が、対応するオブジェクトのmsgプロパティの値に置き換えられます。

v-htmlディレクティブを使用すると、HTML文をバインディングできます。

(ディレクティブとは、DOM要素に対して何かを実行することをライブラリに伝達する、マークアップ中の特別なトークン）

<p v-html="text"></p>

data: function() {
  retrun {
    text: 'Hello!'
  }
}

出力

Hello!

pのコンテンツはtextプロパティの値に置き換えられ、プレーンなHTMLとして解釈されます。

v-bindを使用すると、HTML属性値をバインディングすることができます。

<div v-bind:class="{ active: isActive }"></div>

data: {
  isActive: true
}

以上のようにすると、HTMLはこのように描画されます。

描画結果

<div class="active"></div>

isActiveがfalseになると、active属性値は描画されなくなります。

テンプレートをより見やすくする為に、直接オブジェクトを指定してバインディングする方法もあります。

<div v-bind:style="styleObject"></div>

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

描画結果

<div style="color: red; fontSize: 13px;"></div>

テンプレート内のv-bindの後ろについている:は、引数を意味しています。

<a v-bind:href="url"></a>

上記の例でhrefは、v-bindディレクティブに、urlの値と要素のhref属性をバインドするように伝える引数です。

v-bindに対しては省略記法が提供されています。
v-bindを書かずに:のみにしても大丈夫なんですね。

完全な構文

<a v-bind:href="url"></a>

省略記法

<a :href="url"></a>